12. Dodawanie i dostosowywanie czcionek w szablonach cz.I

Witam serdecznie z tej strony Reusaira. 

Być może ktoś kojarzy mnie z świeżo otwartego bloga mego autorstwa. Jednak mam dobre serce i chciałabym się dzielić moją wiedzą i doświadczeniem z innymi. Dlatego postanowiłam dołączyć do załogi TS. Chciałabym na początku podziękować Oreuis za przyjęcie mnie tutaj. Mam nadzieję, że wspólnymi siłami uda się nam jak i Wam, drodzy czytelnicy, stworzyć różne wspaniałe szablony oraz powalające z nóg prace graficzne. Także zaczynajmy!

Ten poradnik podzieliłam na kilka części. Na początku omówimy sobie rodzaje czcionek jakie na ogół występują i w jakich gadżetach, selektorach najlepiej użyć. 

Musicie zapamiętać jedną rzecz, że czcionka w szablonie pełni jedną z kluczową roli. Tak samo jak nagłówek nadaje wygląd szablonowi. Jednakże wpływa na czytelność i może poprawić lub pogorszyć jakość pracy. Dlatego bardzo ważne jest aby dodać odpowiednią czcionkę w odpowiednie miejsce.

FONT SERIF (z fr. 'czcionka szeryfowa') - zgodnie z definicją podaną w wikipedii: " szeryfy to ozdobne, krótkie kreski stosowane w wielu krojach pisma do zwiększenia dekoracyjności danego fontu. Najczęściej są to poziome kreski będące stopkami liter, ale mogą występować również w innych miejscach znaków. " Dodatkowo są to czcionki dwuelementowe to znaczy, że pionowe kreski są różnej szerokości.

Czcionki typu serif najczęściej są w używane w drukowaniu powieści, książek. Pojawiają się również w innych formach pisanych np. listach formalnych. Serify kojarzą się również z tematyką średniowiecza oraz fantasy. Ułatwia szybkie czytanie, a staromodny urok sprawia, że zatapiamy się w wyobraźni.  Czcionkami tego typu są:

• Times New Roman
• Georgia
• Trebutchet
• New Century Schoolbook
• Palatino

Gdzie i jak stosować:

• jako czcionka  blogów czytelniczych, o dużych rozmiarach około 24-30px
• jako czcionka blogów o tematyce fantasy, o dużych (24-30px) lub średnich rozmiarach (16-24px)/zależnie od potrzeb
• jako tytuł postu / tytuł bloga, można zastosować pogrubienie
• jako ozdobny tekst do stron/linków gadżetów w kursywie, pogrubieniu lub bez. Kreślenia są zbędne

SANS SERIF (z fr. czcionka bezszeryfowa) - czyli czcionki gdzie nie ma dekoracyjnej poziomej kreski w stopce tekstu, a litery są zbudowane z kresek tej samej grubości (tzw. krój jednoelementowy). 

Są używane najczęściej na stronach internetowych, w programach, grach komputerowych, na blogach, ekranach, komputerach. Rzadko można spotkać sans serify w książkach. Taki czcionkami są:

• Arial
• Calibri
• Verdana
• PT Sans i PT Sans Narrow
• Open Sans Condensed

Gdzie i jak stosować:

• na blogach graficznych, fotograficznych, gdzie obraz pełni ważniejszą rolę niż słowo, rozmiary: około 15-18px
• na blogach czytelniczych, o dużych rozmiarach około 24-32px i odstępami między literami około 1px (o dodawaniu odstępów między literami będzie w następnym poradniku)
• we wszystkich gadżetach i tytułach, najlepiej z dodatkiem kursywy lub pogrubienia. Można również użyć przekreślenia

CURSIVE/ HANDWRITING - czyli czcionki , które naśladują pismo odręczne. Cursive oznacza również pismo pochyłe, lecz w tym przypadku nie.

Są stosowane w tytułach, nagłówkach książek, blogów, billboardów, dla wyróżnienia danego zdania słowa. Nie stosuje się w ciągłych tekstach ze względu na utrudnianie w czytaniu (czy wiecie, że pismo odręczne Mickiewicza jest tak trudne do odczytania, że drukarze mieli problem z przepisaniem "Pana Tadeusza" i innych dzieł na książki? Litery były napisane bardzo pochyle, a artysta posiadał dysgrafię). Przykładowymi czcionkami są:

• Comic Sans, Comic Sans MS
• Amatic SC
• Kauschan Script
• Dancing Script

Gdzie i jak stosować:

• w wszelakich tytułach (bloga, posta, komentarzy, gadżetów) dużej wielkości około 24-30px (niektóre czcionki pomimo dodanego rozmiaru mogą być mniejsze, dlatego w takiej sytuacji zwiększa się rozmiar)
• w gadżetach typu: Strony, Etykiety, O mnie (nick) średniej wielkości 16-24px lub zależnie od potrzeb (i jak w przypadku wyżej jeśli czcionka za mała, wystarczy powiększyć)

FANTASY/DISPLAY - drugi typ czcionek dekoracyjnych, jednakże w tym przypadku czcionki nie naśladują pisma odręcznego. Są bardziej ozdobne, często pisane dużymi literami. Występują o wiele częściej w billbordach, tytułach, nazwach własnych niż czcionki cursive, ze względu na ich odrębność, oryginalność oraz, nowoczesność. Taki czcionkami są:

• Impact
• Neurochrome
• Limelight
• BebasNeue
• One Direction (serio jest tak czcionka i wiele podobnych do różnych tytułów, log itp)

Gdzie i jak stosować:

• w wszelakich tytułach (bloga, posta, komentarzy, gadżetów) dużej wielkości około 24-30px (niektóre czcionki pomimo dodanego rozmiaru mogą być mniejsze/za duże, dlatego w takiej sytuacji zwiększa się/zmniejsza się rozmiar)
• w gadżetach typu: Strony, Etykiety, O mnie (nick) średniej wielkości 16-24px lub zależnie od potrzeb (i jak w przypadku wyżej jeśli czcionka za mała, wystarczy powiększyć, a jeśli za duża - powiększyć)

MONOSPACE - to czcionki o ustalonej, jednakowej szerokości. Czcionki były i nadal są używane w programowaniu w starych systemach operacyjnych. Rzadziej jest stosowana w książkach, blogach lub jako dekoracja. Przykładami są:

• Courier
• Roboto Mono
• Incosolata
• Space Mono

Gdzie i jak stosować: 

• w postach o średnich rozmiarach 16-24px
• jako dekoracja w gadżetach o średnich rozmiarach 16-24px lub w zależności od potrzeb

Teraz już wiecie jak rozróżniać czcionki jedne od drugich. Następnym razem zajmiemy się już konkretnie CSS'em.

xoxo

Reusaira