O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Czcionki* do szablonów blogowych

Wybór odpowiedniego kroju dla bloga jest niezwykle istotny. Nie tylko decyduje on o klimacie i charakterze wizualnej strony bloga ale może on nawet zadecydować o tym czy tekst na nim umieszczony zostanie przeczytany. Jeśli podczas czytania będzie narastało zmęczenie wynikające ze złej czytelności tekstu, to może nastąpić najgorszy z możliwych scenariuszy - czytanie zostanie przerwane.

przykładowe kroje dostępne z systemami dla tekstu i specjalne dla tytułu dostępne do zakupu na stronie myfonts.com

Czytelność (raczej ang. legibility a nie readability które to słowo oznacza rozróżnienie struktury, zrozumienie układu ale mówiąc szczerze mam problem z rozdzieleniem tych znaczeń) wiąże się z jakością napisania i przygotowania tekstu. Czytelność tekstu zależy od wielu czynników:

  • kolor tekstu w stosunku do tła
  • odstępów
  • kroju pisma
  • długości wiersza
  • wyrównania (justunku)
  • gęstości tekstu
  • poprawności gramatycznej

W dalszej części wpisu kilka rad związanych z wyborem fontów do tytułu bloga, tytułów notek czy treści głównej. Będzie o sprzecznym komunikacie gdy co innego mówi treść napisu a co innego jego wygląd, o tym że przy pisankach nie używa się wersalików i o trzech fontach stworzonych z myślą o wyświetlaniu na ekranie. Jeżeli zaś te trzy to za mało to proszę zajrzeć do innych wpisów z kategorii kroje pisma.

W bardzo specyficznych warunkach tekst może nie być czytelny ale dalej może komunikować pewne informacje. To właśnie będzie wrażenie, klimat albo charakter i w dużej mierze zależeć będzie od kroju ale i pozostałe cechy związane z czytelnością będą miały znaczenie.

Przykładowo tekst złożony niefrasobliwie o nieregularnych odstępach międzywyrazowych i międzyliterowych, o dramatycznie różnym wyrównaniu i długości wiersza, napisany czytelnym krojem, poprawny gramatycznie może mieć niską czytelność jednak dalej będzie przekazywał swój komunikat związanym z wrażeniem chaosu i dekonstrukcji. Ten sam efekt można uzyskać odpowiednim ksenotypowym krojem. Są to jednak bardzo specyficzne sytuacje gdzie zrozumienie słowa pisanego jest rzeczą drugorzędną a komunikat opiera się bardziej na wrażeniach i emocjach. Nie oznacza to jednak, że można lekceważyć charakter teksu.

Wybierając font dla swojego bloga przede wszystkim należy wziąć pod uwagę jego temat a następnie określić jaki tekst będziemy tym fontem wyświetlać. W przypadku tytułu bloga możemy nawet zaszaleć i pójść w stronę bardziej logotypu niż zwykłego tekstu czytanego. Oczywiście rzecz będzie też zależna od długości tytułu, jego znaczenia, związku z treścią bloga itd. Tytuły notek muszą już komunikować wyjątkowo wyraźny przekaz, krój musi być odpowiedni niezależnie od długości tytułu i jego znaczenia. Najbardziej wymagająca jest treść główna. Musi być niezwykle czytelna i niezwykle anonimowa. Nie może odciągać wzroku i myśli od znaczenia zapisanych słów. Jeżeli będzie zbyt oryginalny, ozdobny czy nietypowy to zamiast czytać tekst użytkownik będzie go oglądał.

Kroje dla tytułów blogów

Mogą być nawet bardzo ozdobne i umieszczone w nietypowy sposób. Warto jednak aby precyzyjnie komunikowały swój przekaz. Abstrahując od stopnia ich ozdobności przede wszystkim należy wybierać kroje, które komunikują to samo co znaczenie słów użytych w tytule (no chyba, że chce się uzyskać celowo wrażenie dysharmonii).

komunikat sprzeczny

W powyższym przykładzie użyłam fontów:

  • budownictwo przemysłowe - Scriptina, ozdobna pisanka o kaligraficznym charakterze; komunikat: delikatnie, ozdobnie, frywolnie
  • biuro prawne - Comic Sans MS, komiksowa pisanka o topornym wyglądzie; komunikat: żart, amatorskość, infantylność
  • elektronika - Garamond, klasyczna antykwa renesansowa; komunikat: tradycja, staroświeckość, elegancja
  • gabinet kosmetyczny - Impact, bezszeryfowy font afiszowy; komunikat: solidny, trwały, nie do poruszenia

Czyli po pierwsze trzeba wziąć pod uwagę charakter kroju. Mniej ważne jest jak bardzo dany krój nam się podoba, istotniejsze jest czy pasuje do treści. Oczywiście możemy blog o składaniu mebli kuchennych zatytułować używając genialnego fontu Zapfino ale w takiej sytuacji nasz tytuł będzie sugerował pewną poetyckość i finezję wiec jeżeli instrukcje skręcania szafek piszemy regularnym trzynstozgłoskowcem to może to być całkiem trafny wybór.

Każdy rodzaj kroju ma też swoją specyfikę więc gdy już wybierzemy ten najodpowiedniejszy musimy liczyć się z pewnymi ograniczeniami. Określone kroje używa się w określony sposób. Przykładowo nigdy przenigdy nie składamy tytułu tylko dużymi literami (wersaliki) gdy używamy kroju pisanki. Fonty pisankowe naśladują pismo odręczne i ich duże litery zaprojektowane są tak aby pięknie wyglądały na początku zdania. Będą miały najprawdopodobniej lewą część litery bardziej ozdobną, prawą nieco prostszą aby dobrze było umieszczać małe litery. Nawet jeżeli każdą dużą literę da się łatwo odczytać to razem będą wyglądały paskudnie.

komunikat niewlasciwie zapisany

Kroje dla tytułów notek i śródtytułów

O ile tytuł bloga może być nawet bardzo fantazyjny bo jest jeden i nawet jeżeli wykorzystać będziemy musieli bardziej oryginalne znaki to nie będzie problemu bo tytuł testowy można zastąpić w szablonie grafiką. O tyle tytuły notek, etykiety w wąskiej szpalcie i śródtytuły to już bardziej skomplikowana sprawa. W niektórych przypadkach możemy pobawić się w zastępowanie tekstu obrazami ale to pracochłonne zadanie i chyba gra niewarta świeczki. Tak więc tytuły notek najlepiej składać fontami dostępnymi z różnymi systemami operacyjnymi. Będzie to prostsze, wygodniejsze, sensowniejsze a nawet lepsiejsze.

Dla tytułów notek i innych etykiet złożonych w dużym stopniu pisma można użyć nawet nieco bardziej afiszowych krojów jak np. Impact (dla przykładu zobacz szablon filmowy 03 - The Kid, bardzo wyrazisty). Najlepiej jednak wybrać krój dostosowując go do tego umieszczonego w notkach. Tam wybór będzie jeszcze bardziej ograniczony więc warto zostawić sobie krój etykiet do wyboru na koniec. Umożliwi to najwygodniejszy manewr pomiędzy praktycznością kroju dla tekstu głównego i indywidualnością tytułu bloga.

Często wystarczy zastosować większy stopień pisma, jego kursywną formę albo wersję pogrubioną. I takie rozwiązanie najbardziej polecam. Jest szczególnie mile widziane gdy wybierzemy bardzo ozdobny tytuł bloga albo dość charakterystyczny krój dla treści głównej.

Kroje dla treści głównej

Przechodzimy do najważniejszej części tej notki. Najbardziej uniwersalnych krojów dla pisania notek. Tutaj czytelność tekstu z bardzo istotnego szczegółu urasta do roli sprawy fundamentalnej. Nie należy we wpisach używać nieczytelnych bądź małoczytelnych krojów, wyjątkiem jest sytuacja gdy nie chcesz aby ktokolwiek miał ochotę przeczytać to co napisałeś, łącznie z tobą samym.

Nie jest to problem gdy wielkość tekstu jest wystarczająca do zapewnienia mu czytelności. Kłopot pojawi się gdy zastosujemy mały stopień pisma. Wyświetlając taki tekst na ekranie dysponujemy niewielką ilością pikseli do oddania kształtu znaków. Kroje do zastosowań ekranowych powinny więc posiadać kilka podstawowych cech które zapewnią im maksymalną czytelność.

Cechy wpływające na większą czytelność kroju

Im mniejszy rozmiar kroju tym większe znaczenie mają te cechy. Jeżeli użyjemy sporych rozmiarów fontu to możemy wybrać bardziej oryginalny kształt o mniejszych oczkach i elegantszych wydłużeniach a nawet kursywę.

  • proste kształty znaków
    Im bardziej skomplikowany kształt, tym gorzej wygląda on wyświetlany w małym rozmiarze. Dlatego czcionki fantazyjne w ogóle nie nadają się do wyświetlania treści na ekranie.
  • odpowiednio duże odległości międzyliterowe
    Nawet przy bardzo małym stopniu pisma litery wyświetlane na ekranie nie powinny się ze sobą stykać odległości między nimi nie mogą być jednak tak duże aby zaburzać czytelność całego wyrazu. W prawdziwym składzie o jego doskonałości świadczą nie tylko litery ale właśnie przestrzeń między nimi.
  • odpowiednia szerokość „oczek”
    Duża wysokość x kroju zapewni duże oczka, które zapewnią doskonałą czytelność nawet w małym stopniu pisma. Im większy stopień pisma tym bardziej elegancki font możemy wybrać, możemy zmniejszyć oczka i postawić na wydłużenia. Przy małym stopniu czytelność staje się najważniejszym priorytetem.
  • unikanie stosowania kursywy
    W 2007 roku ta cecha miała dużo większe znaczenie teraz jednak chyba wszystkie przeglądarki korzystają z antyaliasingu więc pochyłe linie kursyw wyglądają mniej schodkowo. Nadal przy niskiej rozdzielczości nie jest to najpiękniejsze rozwiązanie ale nie wygląda ono też źle. Nie wszystkie jednak fonty mają osobno zaprojektowaną prawdziwą kursywę. W przypadku fontów bezszeryfowych często jest to tylko pochylenie pisma.

Rodzaje czcionek a przeglądarki

Podstawowym problemem przy wyborze czcionek jest sama możliwość wyboru. Należy pamiętać, że zestaw czcionek dostępny na komputerze zależy od zainstalowanego oprogramowania. Użytkownik korzystający z oprogramowania Linuksa będzie miał dostępne inne czcionki niż ten który korzysta z Windowsa. Różnice nie są duże większość najpopularniejszych krojów pisma dostępnych jest na wszystkich platformach, czasami jednak pod nieco innymi nazwami.

Chcąc uzyskać mniej typowy i piękniejszy wygląd najprawdopodobniej trzeba by było samemu umieścić na swojej stronie dany font. Blox nie udostępnia możliwości dodawania plików fontów do zasobów bloga a więc pozostaje tylko korzystanie z tych które użytkownik będzie miał u siebie. Wbrew pozorom wybór wcale nie jest taki mały. Co do piękności czy nowoczesności to jest już większy problem ale wydaje mi się, że zawsze można znaleźć jakiś kompromis.

Decydując o kroju warto sprawdzić bieżące statystyki. Po pierwsze i najważniejsze gdy pisz się po polsku to czy font ma polskie znaki. Po drugie skąd znalazł się na twoim komputerze czyli z jakim systemem jest instalowany, a może pojawił się wraz z jakimś programem... Jeżeli system jest już ustalony to trzeba na koniec zdecydować o alternatywie dla tych którzy maja inny bądź starszą wersję tego samego.

Wybrane czcionki

W roku 1996 firma Microsoft uruchomiła projekt o nazwie Core fonts for the Web. Zlecono zaprojektowanie krojów, które mogłyby być powszechnie używane w przeglądarkach internetowych. Głównym celem stała się jak najlepsza czytelność na ekranie monitora. Zupełnie odwrócono proces projektowania. W przypadku starszych czcionek istniały już gotowe obrysowania wektorowe, które należało zamienić na piksele co nie zawsze skutkowało pożądanym efektem. Nowe czcionki projektowano odwrotnie, najpierw stworzono bitmapy w najbardziej newralgicznych rozmiarach a dopiero potem krój dostał obrys wektorowy.

Efekty takiego podejścia możemy podziwiać w przypadku takich rodzajów czcionek jak Verdana, Georgia i Trebuchet MS. Wszystkie trzy rodzaje prezentują się na ekranie rewelacyjnie w każdym rozmiarze.

  • Verdana jest już wręcz standardem. Zaprojektowano ją z myślą o maksymalnej czytelności i możliwości powszechnego użytku. Pasuje niemal wszędzie i bardzo trudno uczynić ją nieczytelną.
  • Georgia jest czcionką szeryfową. Kształt liter i szeryfów Georgii zoptymalizowano tak, by otrzymać ładne i czytelne napisy także w niskich rozdzielczościach.
  • Trebuchet MS jest bardzo podobnie jak Verdana bezszeryfowy. Charakteryzuje się nieco mniejszym rozmiarem ale ma bardziej indywidualny charakter niż Verdana.

Wybór oczywiście jest większy. Czytelność jest najistotniejsza ale co z tego, że wybierzesz rewelacyjny krój skoro zainstalowany będzie on tylko u 50% użytkowników... I po to właśnie wymyślono stosy i rodziny. Pamiętaj więc, że wybierając font warto na koniec podać jeden z tych umieszczonych w projekcie Core fonts for the Web są chyba najpowszechniejsze.


* Z pełną świadomością użyłam słowa czcionki mimo iż wiem, że de iure niemożliwe jest umieszczenie czcionki na blogu (blog rzecz cyfrowa, czcionka rzecz fizyczna). Można się z tym nie zgadzać, irytować, postulować zmiany ale Windows określił sytuację i nie mam zamiaru kijem zawracać rzeki. Zresztą w samym użyciu słów krój, czcionka, font jako synonimów nie widzę nic zabójczego, co najwyżej będzie to rodzaj świętokradztwa dla purystów. W następnym około-czcionkowym wpisie wyjaśnię także laikom o co rozgrywa się spór i dlaczego w ogóle on mnie nie obchodzi.


Źródła i dodatkowe informacje:

  • Włodzimierz Gajda: Czcionki na stronach WWW
  • Jerzy Maciążek: Typografia WWW
  • Agnieszka 'Kaila' Richter: Rodzaje fontów
  • Bartosz Danowski: Właściwości czcionki
piątek, 30 listopada 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Dostępne kroje z szablony katemac
Sądząc po wynikach wyszukiwania niejednokrotnie pada pytanie 8222 jaka czcionka na bloga? 8221 Zazwyczaj polecam używanie 8222 pewnych 8221 czcionek, takich, które mają bardzo dobrą czytelność i są dostępne w przypadku większości systemów ... »
Wysłany 2008/12/25 21:14:13
Typograficznie z szablony katemac
Od początku pisząc tu o krojach pisma używałam słowa czcionka i nadal będę to robić. Z biegiem czasu przyzwyczaiłam się do słowa font w arkuszu rzeczy opisujące kroje zazwyczaj sł właściwościami font . Skoro font jest nośnikiem to krój nie będzie ... »
Wysłany 2011/11/07 10:02:17
Komentarze
2007/11/30 23:22:33
W moim pierwszym szablonie miałam verdanę, w drugim również, tylko wielkość 11px, Niestety na prośbę wielu osób zwiększyłam, teraz mam georgię.
Kiedy wędruję przez blogi, znajduję takie, które świetnie się czyta,a przy innych męczy się wzrok. I nie zawsze pokrywa się to z tym co piszesz Kate. Czasem verdana jest w nieodpowiednim kolorze na nie odpowiednim tle i oko się męczy, a nieraz garamond czy times new roman jest bardzo dobrze czytelny. Każdą czcionkę źle się czyta, gdy jest zbyt kontrastowa do tła. Wydaje mi się, ze przy większym staraniu można uzyskać zadawalające efekty także stosując inne czcionki. Inną kwestią jest to o czym się pisze, bo to tez nieraz ma znaczenie przy doborze czcionki:) A poza tym czy blogi muszą się kierowac tym, co obowiązuje strony WWW? Blogi to bardziej indywidualizm niz profesjonalizm;)
-
kate_mac
2007/12/01 14:32:47
jasne, ze w przypadku blogów rzecz jest bardziej indywidualna ale jeżeli z twojego bloga korzysta ktoś poza tobą to należałoby uwzględnić ogólne tendencje; co nie znaczy, że należy korzystać tylko i wyłącznie z tych trzech czcionek; Teoretycznie możesz zastosować każdą, musisz tylko dopasować inne parametry wyglądu tekstu tak aby było czytelnie;
wydaje mi się, ze do najpopularniejszych należą Arial i Times; to bardzo subiektywna kwestia ale wydaje mi się, że od Ariala Verdana jest czytelniejsza a Trebuchet ładniejszy; co do Timesa to zawsze będę go polecać do wydruku ale faktem jest, że ta czcionka nie ma charakteru (raczej należałoby napisać, że go straciła poprzez swoją powszechność); krój pisma jak wszystko zmienia się (nie wiem czy widziałaś może pierwsze polskie dokumenty - litery nie zawsze przypominają aktualne); Times zdaje się, że pochodzi z lat 20, nie jest to powód do zrezygnowania z niego ale to tylko podkreśla, że czasami lepiej zastosować coś innego co jest równie ładne, czytelne ale mniej 'opatrzone';
oczywiście zupełnie inaczej będzie się miała sprawa z nagłówkami - bardzo brakuje mi możliwości użycia jakiejś fantazyjnej czcionki w szablonie; na tym polu można jednak działać jedynie plikami graficznymi (które zaś posiadają tą wadę, że automat ich nie odczyta);
-
2007/12/01 20:39:16
Kate na Twoim blogu z próbnymi szablonami zostawiłam Ci wiadomość. Chciałabym przesłać Ci uprawnienia, ale przypomnij mi , który login jest najpewniejszy;)
-
Gość: ff, 109.255.81.*
2011/04/27 11:39:53
Witam, mam pytano odnośnie Twojego logo a mianowicie jakiej czcionki użyłeś, a jeśli to nie czcionka to jak stworzyłeś logo bardzo mi się podoba i chciałbym spróbować zrobić coś podobnego
Dzięki za informacje i pomoc
-
2013/07/24 09:39:16
Witaj, czy znajdę gdzieś przewodnik w jaki sposób dodać czcionkę na bloga
np z google fonts?
w którym miejscu wstawic linki?
wiem jak to zrobić na blogspot, ale na blox nie mam pojecia

chciałam zmienic czcionki tytułu bloga i tytułów wpisów
-
kate_mac
2013/09/04 12:25:57
@a.radziejewska
Z tego co wiem to nie ale to nie jest trudne.

Google fonts udostępnia chyba trzy sposoby dodania ich fontu do własnej strony.

Jeden z nich to jest HTML (zdaje się opisana jako standardowa). Kopiujesz więc kod html wybranego fontu z google fonts i wklejasz w edycji bloksa w polu na dodatkowy kod HTML - od teraz dany font jest dostępny dla danego bloga. Następnie przechodzisz do edycji CSS i przy odpowiednich selektorach zmieniasz/wpisujesz cechę związaną ze zmianą rodziny fontu.

Drugi sposób jest całkiem podobny choć nie wiem na ile poprawny to działa... Na google fonts wybierasz wersję @import i podany tam kod kopiujesz i wklejasz na początku arkusza CSS; następnie tak samo jak przy html odszukujesz w arkuszu selektory związane z miejscami w których chcesz zmienić font.

Pamiętaj tylko że jeżeli piszesz po polsku to wybieraj fonty z polskimi znakami - nie każda czcionka ma je. Jest jedną z bardziej nieprzyjemnych rzeczy gdy próbujesz czytać bloga gdzie w co trzecim słowie polskie litery napisane są zupełnie innym fontem - to się bardzo rzuca w oczy, wygląda bardzo źle i zniechęca do czytania takiej notki.
-
Gość: Basia, *.nat.umts.dynamic.t-mobile.pl
2017/01/09 08:44:55
Witam,

Jaka czcionka uzyta jest w ostatnim (4tym) napisie optyk?

Z gory dziekuje za odpowiedz!
-
Gość: Iga, *.20-3.cable.virginm.net
2017/02/15 13:35:16
Witam. Czy mogłaby Pani powiedzieć, jak nazywa się ostatnia czcionka po prawej stronie OPTYK?
Z góry dziękuję za odpowiedź.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...