Teoretycznie wszyscy zdajemy sobie spraw\u0119, \u017ce dobrze przemy\u015blane formatowanie tekstu jest sprzymierze\u0144cem jego czytelno\u015bci. Wiemy r\u00f3wnie\u017c, \u017ce rola dobrze dobranych font\u00f3w jest w tym temacie nieoceniona. W praktyce jednak najcz\u0119\u015bciej odk\u0142adamy zmiany zwi\u0105zane z typografi\u0105 strony lub bloga w bli\u017cej nieokre\u015blon\u0105 przysz\u0142o\u015b\u0107, obawiaj\u0105c si\u0119, \u017ce bez odpowiednio du\u017cej wiedzy na ten temat, nie poradzimy sobie z odpowiednim dopasowaniem kroj\u00f3w.<\/p>\n
Na szcz\u0119\u015bcie \u017cyjemy w czasach, w kt\u00f3rych istniej\u0105 wirtualni (i, co najwa\u017cniejsze \u2013 darmowi) pomocnicy. Ratuj\u0105 z absolutnie ka\u017cdej opresji, zdradzaj\u0105c sprawdzone rozwi\u0105zania, dotycz\u0105ce niemal ka\u017cdej dziedziny \u017cycia. Z dobieraniem font\u00f3w nie mog\u0142o by\u0107 inaczej. Znalaz\u0142am sze\u015b\u0107 stron, kt\u00f3re u\u0142atwi\u0105 wam poszukiwania idealnej pary.<\/p>\n
Dob\u00f3r fontu, zw\u0142aszcza w projektach, kt\u00f3re b\u0119d\u0105 wy\u015bwietlane na ekranie, ma zasadniczy wp\u0142yw na odbi\u00f3r ca\u0142ego dzie\u0142a. Jednak jego wykonanie jest tak samo wa\u017cne jak wygl\u0105d. <\/p>\n
Typografia internetowa, czyli czytelno\u015b\u0107 tekst\u00f3w na stronach<\/h2>\n\n- Najpierw nale\u017cy okre\u015bli\u0107 podstawowy rozmiar czcionki, kt\u00f3ry jest zwykle r\u00f3wny 16px. W miar\u0119 potrzeb nale\u017cy dopasowa\u0107 wielko\u015b\u0107 na podstawie w\u0142a\u015bciwo\u015bci u\u017cywanej czcionki.<\/li>\n
- Powinno si\u0119 u\u017cywa\u0107 tylko skalowalnych rozmiar\u00f3w czcionek w odniesieniu do okre\u015blonego rozmiaru podstawowego.<\/li>\n
- Trzeba pami\u0119ta\u0107 o zachowaniu odpowiedniej przestrzeni pomi\u0119dzy nast\u0119puj\u0105cymi po sobie wierszami z tekstem. <\/li>\n
- Nie nale\u017cy u\u017cywa\u0107 zbyt wielu rodzaj\u00f3w i wielko\u015bci czcionek. Nadmierna ich r\u00f3\u017cnorodno\u015b\u0107 mo\u017ce doprowadzi\u0107 do zbyt skomplikowanego uk\u0142adu strony i powodowa\u0107 trudno\u015bci w czytaniu, a wi\u0119c b\u0119dzie mecz\u0105ca dla u\u017cytkownika.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2019\/03\/fonts.jpg\")
<\/a><\/figure>\nFonty szeryfowe i bezszeryfowe<\/h2>\n
Fonty przede wszystkim dziel\u0105 si\u0119 na fonty szeryfowe i bezszeryfowe. Nawet dla laika r\u00f3\u017cnica jest do\u015b\u0107 \u0142atwa do wychwycenia, gdy\u017c fonty szeryfowe maj\u0105 ozdobniki; kreseczki dorysowywane na ko\u0144cu liter. Ich zastosowanie by\u0142o zwi\u0105zane z rozwojem druku, dzi\u0119ki dodatkowym kreseczkom czytanie sta\u0142o si\u0119 \u0142atwiejsze i przyjemniejsze dla oka.<\/p>\n
Jednak w dzisiejszych czasach pismo bezszeryfowe jest uznawane za czytelniejsze. A to z tego powodu, \u017ce na ekranie monitora tekst wygl\u0105da inaczej i wi\u0119kszo\u015b\u0107 os\u00f3b woli akapity z\u0142o\u017cone z prostych font\u00f3w.<\/p>\n![\"jak](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/jak-wybra\u0107-font-03-1024x683.jpg\")
<\/figure>\nNatomiast fonty bezszeryfowe s\u0105 pozbawione ozdobnik\u00f3w w postaci szeryf\u00f3w \u2013 ko\u0144c\u00f3wki znak\u00f3w s\u0105 proste. Pismami bezszeryfowymi s\u0105 m.in. Arial, Verdana. Czasami kroje bezszeryfowe nazywa si\u0119 gotykami (Century Gothic), kt\u00f3rych nie nale\u017cy myli\u0107 z pismem gotyckim.<\/p>\n
Natomiast fonty szeryfowe s\u0105 u\u017cywane g\u0142\u00f3wnie do publikacji papierowych. Nie oznacza to, \u017ce trzeba z nich automatycznie zrezygnowa\u0107 z font\u00f3w szeryfowych na blogu czy w prezentacjach. Czasem wystarczy zastosowanie bardziej ozdobnych font\u00f3w w nag\u0142\u00f3wkach, a fonty bezszeryfowe w akapitach, aby ca\u0142o\u015b\u0107 dobrze si\u0119 prezentowa\u0142a.<\/p>\n
Kolory font\u00f3w w projekcie<\/h2>\n
Dob\u00f3r kolor\u00f3w jest kwestia mocno indywidualna. Ka\u017cda firma czy blog maj\u0105 swoj\u0105 ksi\u0119g\u0119 znaku, brandbook czy chocia\u017cby kolory okre\u015blone w logo. G\u0142\u00f3wnie od tego b\u0119dzie zale\u017ca\u0142o, jakie kolory zastana u\u017cyte w projekcie. Na przyk\u0142ad na <\/span>blogach kobiecych <\/span>przewa\u017caj\u0105 pastele. S\u0105 jednak trudne do wykorzystania, gdy\u017c nie zawsze blador\u00f3\u017cowy czy s\u0142omkowo-z\u0142oty nadadz\u0105 si\u0119 na kolor nag\u0142\u00f3wka.<\/p>\nDob\u00f3r czerni w akapitach te\u017c nie powinien byc przypadkowy i zwykle dobrze jest ta czer\u0144 rozja\u015bni\u0107, zamiast stosowa\u0107 #000000, RGB (0,0,0). Trzeba tez pami\u0119ta\u0107 o tym, aby zbada\u0107 o kontrast mi\u0119dzy t\u0142em a tekstem. Czarnym t\u0142o z kolorowymi tekstami jest wonie kiepskim wyborem jak brak odpowiedniego kontrastu, gdy\u017c taka kombinacja meczy wzrok.<\/p>\n
Wyr\u00f3wnywanie tekstu i szata graficzna<\/h2>\n
Kiedy si\u0119gamy po ksi\u0105\u017ck\u0119, tekst zazwyczaj jest wyjustowany, czyli wyr\u00f3wnany do obu margines\u00f3w, tworz\u0105c schludne bloki. W prezentacji mo\u017cemy zrobi\u0107 podobnie, wystarczy, \u017ce sprawdzimy, czy tekst \u0142adnie rozk\u0142ada si\u0119 w poszczeg\u00f3lnych akapitach. Gorzej sprawa wygl\u0105da w przypadku stron internetowych.<\/p>\n
Blogi s\u0105 czytane na r\u00f3\u017cnych no\u015bnikach (telefonach, tabletach, monitorach panoramicznych) i w ka\u017cdym wypadku tekst mo\u017ce roz\u0142o\u017cy\u0107 si\u0119 inaczej. W tym wypadku justowanie akapit\u00f3w mo\u017ce spowodowa\u0107 irytacje czytelnik\u00f3w. Najlepiej jest u\u017cy\u0107 wyr\u00f3wnywania do lewej albo do \u015brodka (ostatnio jest to popularna opcja wykorzystywana na pojedynczych stronach sprzeda\u017cowych).<\/span><\/p>\n![\"jak](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2020\/03\/jak-wybra\u0107-font-02-1024x683.jpg\")
<\/figure>\nW przypadku wyr\u00f3wnywania tekstu istotn\u0105 rol\u0119 odgrywa liczba s\u0142\u00f3w w wierszu. Na monitorze komputera widzimy oko\u0142o 60-100 znak\u00f3w ze spacjami, kt\u00f3re po wyjustowaniu wygl\u0105daj\u0105 ca\u0142kiem klarownie, a przerwy mi\u0119dzy znakami nie s\u0105 denerwuj\u0105ce. Na urz\u0105dzeniach mobilnych znak\u00f3w jest mniej, co mo\u017ce powodowa\u0107 czasem rozci\u0105gniecie si\u0119 tekstu na ca\u0142\u0105 szeroko\u015b\u0107 ekranu.<\/p>\n
Aplikacje, kt\u00f3re pomog\u0105 dobra\u0107 pasuj\u0105ce fonty<\/h2>\n
Nale\u017cy te\u017c uwa\u017ca\u0107 na szablony przystosowane do \u015bciskania tekstu, gdzie w kolumnie mie\u015bci si\u0119 wi\u0119cej ni\u017c 120 znak\u00f3w. W tym przypadku, po przeczytaniu ostatniego s\u0142owa w linii, ci\u0119\u017cko znale\u017a\u0107 wzrokiem pocz\u0105tek kolejnego wiersza.<\/p>\n
GITGUB <\/a><\/strong>\u2013 przejrzysta strona, gdzie mo\u017cesz zobaczy\u0107 gotowe projekty stron czy te\u017c materia\u0142\u00f3w graficznych z dobrze dobran\u0105 typografi\u0105. Przy ka\u017cdym z projekt\u00f3w opisane s\u0105 u\u017cyte fonty. Fonty pochodz\u0105 z bezp\u0142atnego zbioru Google Fonts.<\/p>\nTYP.IO<\/strong><\/a> \u2013 strona o podobnych funkcjonalno\u015bciach jak w przypadku Github. Tu te\u017c mo\u017cemy podejrze\u0107 fonty, kt\u00f3re doskonale do siebie pasuj\u0105. Obok ka\u017cdej z wizualizacji znajdziesz linki do u\u017cytych font\u00f3w oraz do konkretnych stron stosuj\u0105cych takie po\u0142\u0105czenie font\u00f3w.<\/p>\nFONT COMBINATIONS<\/strong><\/a> \u2013 jedna z funkcjonalno\u015bci dost\u0119pnych w ramach platformy Canva. Wybierz z listy font kt\u00f3ry Ci si\u0119 podoba, a narz\u0119dzie poka\u017ce Ci pasuj\u0105 do niego typografi\u0119 wraz z przyk\u0142adem.<\/p>\nAplikacje i narz\u0119dzia do pobieranie font\u00f3w<\/h2>\n
GOOGLE FONTS <\/a><\/strong>\u2013 pozycja obowi\u0105zkowa dla ka\u017cdego mi\u0142o\u015bnika typografii, zw\u0142aszcza tej darmowej. Na stronie mo\u017cecie szybko podejrze\u0107 jak dany font b\u0119dzie wygl\u0105da\u0142 z Waszym tekstem, wystarczy klikn\u0105\u0107 na pr\u00f3bk\u0119 tekstu i wpisa\u0107 swoj\u0105 fraz\u0119.<\/p>\nFONTSQUIRREL<\/strong> <\/a>\u2013 przepastna baza font\u00f3w, jeden z najpopularniejszych agregat\u00f3w font\u00f3w. Bardzo intuicyjna i rozbudowana wyszukiwarka w kt\u00f3rej mo\u017cemy okre\u015bli\u0107 czego szukamy: font na licencji bezp\u0142atnej, komercyjnej, pisanka, a mo\u017ce bogata rodzina?<\/p>\nBEHANCE <\/a><\/strong>\u2013 idealne miejsce do szukania inspiracji, ale te\u017c darmowych font\u00f3w. To co mi si\u0119 tu podoba, to ciekawa prezentacja poszczeg\u00f3lnych prac. Idealne miejsce dla os\u00f3b, kt\u00f3re maj\u0105 trudno\u015b\u0107 z wyobra\u017ceniem sobie jak mo\u017cna dany font wykorzysta\u0107 w praktyce np. w projekcie prezentacji czy ulotki.<\/p>\nADOBE TYPEKIT<\/strong><\/a> \u2013 chc\u0119 by\u0107 wobec Was uczciwa i musz\u0119 wspomnie\u0107 o p\u0142atnym narz\u0119dziu z kt\u00f3rego korzystam na co dzie\u0144. Jako posiadacz licencji na produkty Adobe mam automatycznie dost\u0119p do gigantycznej bazy font\u00f3w. Wada \u2013 niestety jest to p\u0142atna biblioteka, co wi\u0119cej, nie wszystkie fonty s\u0105 tu za darmo.<\/p>\nCzytaj tak\u017ce:<\/h2>\n
Kaligrafia jako sztuka: 40 darmowych font\u00f3w dla pisania kreatywnego<\/a><\/p>\n
<\/a><\/figure>\nFonty szeryfowe i bezszeryfowe<\/h2>\n
Fonty przede wszystkim dziel\u0105 si\u0119 na fonty szeryfowe i bezszeryfowe. Nawet dla laika r\u00f3\u017cnica jest do\u015b\u0107 \u0142atwa do wychwycenia, gdy\u017c fonty szeryfowe maj\u0105 ozdobniki; kreseczki dorysowywane na ko\u0144cu liter. Ich zastosowanie by\u0142o zwi\u0105zane z rozwojem druku, dzi\u0119ki dodatkowym kreseczkom czytanie sta\u0142o si\u0119 \u0142atwiejsze i przyjemniejsze dla oka.<\/p>\n
Jednak w dzisiejszych czasach pismo bezszeryfowe jest uznawane za czytelniejsze. A to z tego powodu, \u017ce na ekranie monitora tekst wygl\u0105da inaczej i wi\u0119kszo\u015b\u0107 os\u00f3b woli akapity z\u0142o\u017cone z prostych font\u00f3w.<\/p>\n Natomiast fonty bezszeryfowe s\u0105 pozbawione ozdobnik\u00f3w w postaci szeryf\u00f3w \u2013 ko\u0144c\u00f3wki znak\u00f3w s\u0105 proste. Pismami bezszeryfowymi s\u0105 m.in. Arial, Verdana. Czasami kroje bezszeryfowe nazywa si\u0119 gotykami (Century Gothic), kt\u00f3rych nie nale\u017cy myli\u0107 z pismem gotyckim.<\/p>\n Natomiast fonty szeryfowe s\u0105 u\u017cywane g\u0142\u00f3wnie do publikacji papierowych. Nie oznacza to, \u017ce trzeba z nich automatycznie zrezygnowa\u0107 z font\u00f3w szeryfowych na blogu czy w prezentacjach. Czasem wystarczy zastosowanie bardziej ozdobnych font\u00f3w w nag\u0142\u00f3wkach, a fonty bezszeryfowe w akapitach, aby ca\u0142o\u015b\u0107 dobrze si\u0119 prezentowa\u0142a.<\/p>\n Dob\u00f3r kolor\u00f3w jest kwestia mocno indywidualna. Ka\u017cda firma czy blog maj\u0105 swoj\u0105 ksi\u0119g\u0119 znaku, brandbook czy chocia\u017cby kolory okre\u015blone w logo. G\u0142\u00f3wnie od tego b\u0119dzie zale\u017ca\u0142o, jakie kolory zastana u\u017cyte w projekcie. Na przyk\u0142ad na <\/span>blogach kobiecych <\/span>przewa\u017caj\u0105 pastele. S\u0105 jednak trudne do wykorzystania, gdy\u017c nie zawsze blador\u00f3\u017cowy czy s\u0142omkowo-z\u0142oty nadadz\u0105 si\u0119 na kolor nag\u0142\u00f3wka.<\/p>\n Dob\u00f3r czerni w akapitach te\u017c nie powinien byc przypadkowy i zwykle dobrze jest ta czer\u0144 rozja\u015bni\u0107, zamiast stosowa\u0107 #000000, RGB (0,0,0). Trzeba tez pami\u0119ta\u0107 o tym, aby zbada\u0107 o kontrast mi\u0119dzy t\u0142em a tekstem. Czarnym t\u0142o z kolorowymi tekstami jest wonie kiepskim wyborem jak brak odpowiedniego kontrastu, gdy\u017c taka kombinacja meczy wzrok.<\/p>\n Kiedy si\u0119gamy po ksi\u0105\u017ck\u0119, tekst zazwyczaj jest wyjustowany, czyli wyr\u00f3wnany do obu margines\u00f3w, tworz\u0105c schludne bloki. W prezentacji mo\u017cemy zrobi\u0107 podobnie, wystarczy, \u017ce sprawdzimy, czy tekst \u0142adnie rozk\u0142ada si\u0119 w poszczeg\u00f3lnych akapitach. Gorzej sprawa wygl\u0105da w przypadku stron internetowych.<\/p>\n Blogi s\u0105 czytane na r\u00f3\u017cnych no\u015bnikach (telefonach, tabletach, monitorach panoramicznych) i w ka\u017cdym wypadku tekst mo\u017ce roz\u0142o\u017cy\u0107 si\u0119 inaczej. W tym wypadku justowanie akapit\u00f3w mo\u017ce spowodowa\u0107 irytacje czytelnik\u00f3w. Najlepiej jest u\u017cy\u0107 wyr\u00f3wnywania do lewej albo do \u015brodka (ostatnio jest to popularna opcja wykorzystywana na pojedynczych stronach sprzeda\u017cowych).<\/span><\/p>\n W przypadku wyr\u00f3wnywania tekstu istotn\u0105 rol\u0119 odgrywa liczba s\u0142\u00f3w w wierszu. Na monitorze komputera widzimy oko\u0142o 60-100 znak\u00f3w ze spacjami, kt\u00f3re po wyjustowaniu wygl\u0105daj\u0105 ca\u0142kiem klarownie, a przerwy mi\u0119dzy znakami nie s\u0105 denerwuj\u0105ce. Na urz\u0105dzeniach mobilnych znak\u00f3w jest mniej, co mo\u017ce powodowa\u0107 czasem rozci\u0105gniecie si\u0119 tekstu na ca\u0142\u0105 szeroko\u015b\u0107 ekranu.<\/p>\n Nale\u017cy te\u017c uwa\u017ca\u0107 na szablony przystosowane do \u015bciskania tekstu, gdzie w kolumnie mie\u015bci si\u0119 wi\u0119cej ni\u017c 120 znak\u00f3w. W tym przypadku, po przeczytaniu ostatniego s\u0142owa w linii, ci\u0119\u017cko znale\u017a\u0107 wzrokiem pocz\u0105tek kolejnego wiersza.<\/p>\n GITGUB <\/a><\/strong>\u2013 przejrzysta strona, gdzie mo\u017cesz zobaczy\u0107 gotowe projekty stron czy te\u017c materia\u0142\u00f3w graficznych z dobrze dobran\u0105 typografi\u0105. Przy ka\u017cdym z projekt\u00f3w opisane s\u0105 u\u017cyte fonty. Fonty pochodz\u0105 z bezp\u0142atnego zbioru Google Fonts.<\/p>\n TYP.IO<\/strong><\/a> \u2013 strona o podobnych funkcjonalno\u015bciach jak w przypadku Github. Tu te\u017c mo\u017cemy podejrze\u0107 fonty, kt\u00f3re doskonale do siebie pasuj\u0105. Obok ka\u017cdej z wizualizacji znajdziesz linki do u\u017cytych font\u00f3w oraz do konkretnych stron stosuj\u0105cych takie po\u0142\u0105czenie font\u00f3w.<\/p>\n FONT COMBINATIONS<\/strong><\/a> \u2013 jedna z funkcjonalno\u015bci dost\u0119pnych w ramach platformy Canva. Wybierz z listy font kt\u00f3ry Ci si\u0119 podoba, a narz\u0119dzie poka\u017ce Ci pasuj\u0105 do niego typografi\u0119 wraz z przyk\u0142adem.<\/p>\n GOOGLE FONTS <\/a><\/strong>\u2013 pozycja obowi\u0105zkowa dla ka\u017cdego mi\u0142o\u015bnika typografii, zw\u0142aszcza tej darmowej. Na stronie mo\u017cecie szybko podejrze\u0107 jak dany font b\u0119dzie wygl\u0105da\u0142 z Waszym tekstem, wystarczy klikn\u0105\u0107 na pr\u00f3bk\u0119 tekstu i wpisa\u0107 swoj\u0105 fraz\u0119.<\/p>\n FONTSQUIRREL<\/strong> <\/a>\u2013 przepastna baza font\u00f3w, jeden z najpopularniejszych agregat\u00f3w font\u00f3w. Bardzo intuicyjna i rozbudowana wyszukiwarka w kt\u00f3rej mo\u017cemy okre\u015bli\u0107 czego szukamy: font na licencji bezp\u0142atnej, komercyjnej, pisanka, a mo\u017ce bogata rodzina?<\/p>\n BEHANCE <\/a><\/strong>\u2013 idealne miejsce do szukania inspiracji, ale te\u017c darmowych font\u00f3w. To co mi si\u0119 tu podoba, to ciekawa prezentacja poszczeg\u00f3lnych prac. Idealne miejsce dla os\u00f3b, kt\u00f3re maj\u0105 trudno\u015b\u0107 z wyobra\u017ceniem sobie jak mo\u017cna dany font wykorzysta\u0107 w praktyce np. w projekcie prezentacji czy ulotki.<\/p>\n ADOBE TYPEKIT<\/strong><\/a> \u2013 chc\u0119 by\u0107 wobec Was uczciwa i musz\u0119 wspomnie\u0107 o p\u0142atnym narz\u0119dziu z kt\u00f3rego korzystam na co dzie\u0144. Jako posiadacz licencji na produkty Adobe mam automatycznie dost\u0119p do gigantycznej bazy font\u00f3w. Wada \u2013 niestety jest to p\u0142atna biblioteka, co wi\u0119cej, nie wszystkie fonty s\u0105 tu za darmo.<\/p>\n Kaligrafia jako sztuka: 40 darmowych font\u00f3w dla pisania kreatywnego<\/a><\/p>\n<\/figure>\nKolory font\u00f3w w projekcie<\/h2>\n
Wyr\u00f3wnywanie tekstu i szata graficzna<\/h2>\n
<\/figure>\nAplikacje, kt\u00f3re pomog\u0105 dobra\u0107 pasuj\u0105ce fonty<\/h2>\n
Aplikacje i narz\u0119dzia do pobieranie font\u00f3w<\/h2>\n
Czytaj tak\u017ce:<\/h2>\n