\n Tutaj omawiamy tylko zwi\u0105zek UX i typografii, nie wspominaj\u0105c o roli typografii w kszta\u0142towaniu osobowo\u015bci wizualnej strony, definiowaniu Twojej marki i przyci\u0105ganiu uwagi czytelnika. Sprawd\u017a ten artyku\u0142<\/a>, aby dowiedzie\u0107 si\u0119 wi\u0119cej.\n<\/p>\n \n Wyb\u00f3r typografii dla tej strony ko\u015bcio\u0142a nie tylko poprawia UX na stronie, ale tak\u017ce pomaga kszta\u0142towa\u0107 identyfikacj\u0119 wizualn\u0105 marki).\n<\/p>\n \n Jak zwi\u0119kszy\u0107 UX w swojej witrynie poprzez optymalizacj\u0119 typografii?\n<\/p>\n \n Istnieje wiele sposob\u00f3w na popraw\u0119 UX w witrynie poprzez optymalizacj\u0119 typografii. Poniewa\u017c UX i typografia s\u0105 ze sob\u0105 \u015bci\u015ble powi\u0105zane, optymalizuj\u0105c typografi\u0119, optymalizujesz r\u00f3wnie\u017c czytelno\u015b\u0107 tekstu, a tym samym zwi\u0119kszasz og\u00f3lny UX w swojej witrynie. Zobaczmy, jakie s\u0105 zasady optymalizacji typografii:\n<\/p>\n \n Je\u015bli chcesz, aby Twoja strona wygl\u0105da\u0142a sp\u00f3jnie i profesjonalnie, u\u017cyj maksymalnie trzech czcionek (nie wi\u0119cej). R\u00f3\u017cne czcionki na jednej stronie koliduj\u0105 ze sob\u0105 i odwracaj\u0105 uwag\u0119 u\u017cytkownika od czytania tekstu. Zastosowanie kilku podobnie wygl\u0105daj\u0105cych czcionek pomaga stworzy\u0107 sp\u00f3jno\u015b\u0107 UX na wszystkich stronach witryny i uwalnia u\u017cytkownik\u00f3w od konieczno\u015bci dostosowywania si\u0119 do cz\u0119stych zmian styl\u00f3w.\n<\/p>\n \n W\u0142a\u015bnie tego powiniene\u015b unika\u0107 na swojej stronie internetowej.\n<\/p>\n \n Cz\u0119sto wystarczy zastosowanie tylko jednej czcionki. Je\u015bli nadal uwa\u017casz, \u017ce potrzebujesz kilku czcionek, wybierz czcionki o tej samej szeroko\u015bci znak\u00f3w. W tym przypadku czcionki nie b\u0119d\u0105 si\u0119 zbytnio od siebie r\u00f3\u017cni\u0107 i rozprasza\u0107 czytelnika.\n<\/p>\n \n Ta witryna przebudowy wykorzystuje niekonwencjonaln\u0105 czcionk\u0119 Six Caps, aby poprawi\u0107 identyfikacj\u0119 wizualn\u0105 witryny. Ta czcionka jest po\u0142\u0105czona z Roboto Condensed, aby mie\u0107 dwie czcionki, kt\u00f3rych szeroko\u015bci znak\u00f3w s\u0105 takie same.\n<\/p>\n \n Jeszcze jednym \u015bwietnym pomys\u0142em na \u0142\u0105czenie kilku czcionek jest po\u0142\u0105czenie czcionek imituj\u0105cych pismo odr\u0119czne ze zwyk\u0142ymi. Odr\u0119czna typografia nadaje osobisty charakter og\u00f3lnemu projektowi witryny i rozwija jej wizualny charakter.\n<\/p>\n \n Ta strona internetowa jest mi\u0119kka i kobieca dzi\u0119ki czcionce Caveat Handwriting.\n<\/p>\n \n Szeryfy to ma\u0142e linie na ko\u0144cach kresek literowych. W typografii drukowanej szeryfy pomagaj\u0105 ludziom szybciej i skuteczniej rozpoznawa\u0107 drukowane litery. Jednak na ekranie, zw\u0142aszcza bez Retiny, szeryfy nie s\u0105 tak dobrze zarysowane jak na papierze, co cz\u0119\u015bciowo utrudnia czytanie.\n<\/p>\n \n Opr\u00f3cz zapewnienia lepszej czytelno\u015bci, czcionki bezszeryfowe przemawiaj\u0105 w odwa\u017cniejszy, bardziej minimalistyczny spos\u00f3b.\n<\/p>\n \n Tutaj nie twierdz\u0119, \u017ce powiniene\u015b ca\u0142kowicie zrezygnowa\u0107 z czcionek szeryfowych. Lepsz\u0105 rad\u0105 by\u0142oby by\u0107 z nimi bardziej ostro\u017cnym i u\u017cywa\u0107 tych, kt\u00f3re s\u0105 czyste i precyzyjne.\n<\/p>\n \n Na przyk\u0142ad ta witryna z kreatywnymi fotografiami wykorzystuje bezszeryfow\u0105 czcionk\u0119 Open Sans, kt\u00f3ra pomaga stronie internetowej w odwa\u017cnej, stylowej i zdecydowanej wypowiedzi.\n<\/p>\n \n Przestrze\u0144 w Internecie jest nieograniczona. Dlatego nie ma potrzeby zapisywania go i wybierania ma\u0142ych rozmiar\u00f3w czcionek, kt\u00f3re dodatkowo m\u0119cz\u0105 wzrok u\u017cytkownik\u00f3w. Czytelnicy z wadami wzroku mog\u0105 mie\u0107 trudno\u015bci z odczytaniem ma\u0142ego tekstu, a nawet czytelnicy z dobrym wzrokiem odczuwaj\u0105 zm\u0119czenie i musz\u0105 robi\u0107 przerwy, aby dotrze\u0107 do ko\u0144ca, powiedzmy, 10-punktowego tekstu.\n<\/p>\n \n Je\u015bli nie chcesz, aby u\u017cytkownicy mieli trudno\u015bci z czytaniem prezentowanego tekstu lub powi\u0119kszaniem go, wybierz rozmiar czcionki 16 punkt\u00f3w +. Takie rozmiary czcionek minimalizuj\u0105 zm\u0119czenie oczu i pomagaj\u0105 u\u017cytkownikom osi\u0105gn\u0105\u0107 cel w Twojej witrynie bez zm\u0119czenia wizualnego.\n<\/p>\n \n Witryna Malcolmy u\u017cywa czytelnej 16-punktowej typografii na swoich stronach domowych i blogach.\n<\/p>\n \n Na swojej stronie internetowej nie powiniene\u015b wype\u0142nia\u0107 tekstu ca\u0142\u0105 dost\u0119pn\u0105 przestrzeni\u0105. Dbaj\u0105c o optymaln\u0105 d\u0142ugo\u015b\u0107 linii, trzymasz si\u0119 wysokich standard\u00f3w czytania. Je\u015bli linijki s\u0105 zbyt kr\u00f3tkie, oczy czytelnika musz\u0105 porusza\u0107 si\u0119 w prz\u00f3d iw ty\u0142 podczas czytania tekstu, co dodatkowo m\u0119czy wzrok. Je\u015bli wiersze s\u0105 zbyt d\u0142ugie, zbyt trudno jest skoncentrowa\u0107 si\u0119 na dok\u0142adnie czytanym s\u0142owie i zbyt \u0142atwo si\u0119 zgubi\u0107.\n<\/p>\n \n Aby unikn\u0105\u0107 obu niekorzystnych sytuacji, trzymaj si\u0119 60 znak\u00f3w w linii (dla ekran\u00f3w tablet\u00f3w\/komputer\u00f3w).\n<\/p>\n \n Ten obraz ilustruje, \u017ce teksty ze zbyt kr\u00f3tkimi lub zbyt d\u0142ugimi wierszami s\u0105 trudniejsze do odczytania ni\u017c teksty, kt\u00f3re trzymaj\u0105 si\u0119 \u201ez\u0142otego \u015brodka” o d\u0142ugo\u015bci ~ 60 pkt.\n<\/p>\n \n Optymalna d\u0142ugo\u015b\u0107 linii dla urz\u0105dze\u0144 mobilnych (np. smartfon\u00f3w) jest kr\u00f3tsza. Aby tekst by\u0142 czytelny na ma\u0142ych ekranach, linia powinna zawiera\u0107 oko\u0142o 30 \u2013 40 znak\u00f3w.\n<\/p>\n \n Jak wiesz, rozmiar liter w nag\u0142\u00f3wkach jest zwykle wi\u0119kszy ni\u017c w tek\u015bcie g\u0142\u00f3wnym. Nag\u0142\u00f3wki r\u00f3\u017cni\u0105 si\u0119 r\u00f3wnie\u017c rozmiarem, od najmniejszego do najwi\u0119kszego. Na swojej stronie b\u0119dziesz musia\u0142 wybra\u0107 r\u00f3\u017cne rozmiary czcionek dla r\u00f3\u017cnych element\u00f3w (np. przycisk\u00f3w, podpis\u00f3w, element\u00f3w nawigacyjnych itp.), a tak\u017ce r\u00f3\u017cne grubo\u015bci czcionek dla podkre\u015blenia.\n<\/p>\n \n Aby zapewni\u0107 rozpoznawalno\u015b\u0107 element\u00f3w witryny, wybierz czcionk\u0119 o r\u00f3\u017cnych rozmiarach i gramaturach. Je\u015bli wybierzesz jedn\u0105 ze standardowych czcionek, np. czcionk\u0119 Google Fonts Roboto, zobaczysz wszystkie jej odmiany. Niekt\u00f3re czcionki wyst\u0119puj\u0105 w ponad 10 odmianach, inne maj\u0105 tylko kilka. Wybierz czcionk\u0119, kt\u00f3ra ma bogaty zestaw odmian, aby zapewni\u0107 zr\u00f3\u017cnicowan\u0105 reprezentacj\u0119 tre\u015bci w Twojej witrynie.\n<\/p>\n \n R\u00f3\u017cne style czcionek czcionki Roboto Google.\n<\/p>\n \n Czasy wielobarwnych, krzycz\u0105cych stron internetowych min\u0119\u0142y. Teraz czytelno\u015b\u0107 i kontrast to si\u0142y decyduj\u0105ce o wyborze kolor\u00f3w. Przede wszystkim tre\u015b\u0107 powinna by\u0107 czytelna, a po\u0142\u0105czeniem, kt\u00f3re przez wiele lat uwa\u017cano za najlepsze, jest czarny tekst na bia\u0142ym tle. Takie po\u0142\u0105czenie zapewnia maksymalny kontrast i si\u0119ga czas\u00f3w klasycznej typografii.\n<\/p>\n \n Jednak ostatnio cz\u0119sto m\u00f3wi si\u0119, \u017ce czarny kolor bardziej m\u0119czy oczy ni\u017c ciemnoszary. Odcienie ciemnej szaro\u015bci r\u00f3wnie\u017c dobrze kontrastuj\u0105 z bia\u0142ym t\u0142em, ale s\u0105 nieco mniej nasycone i zapewniaj\u0105 wi\u0119kszy komfort czytania.\n<\/p>\n \n To odcienie szaro\u015bci, kt\u00f3re przewy\u017cszaj\u0105 czer\u0144 w zapewnieniu komfortu czytania.\n<\/p>\n \n Strona internetowa wykorzystuj\u0105ca ciemnoszary kolor tekstu suwaka.\n<\/p>\n \n Dokonuj\u0105c wyboru koloru, upewnij si\u0119, \u017ce przetestujesz go na r\u00f3\u017cnych urz\u0105dzeniach iw r\u00f3\u017cnych \u015brodowiskach. Tekst, kt\u00f3ry dobrze si\u0119 czyta w typowym \u015brodowisku biurowym, mo\u017ce by\u0107 trudny do odr\u00f3\u017cnienia na smartfonie, zw\u0142aszcza gdy jest u\u017cywany na zewn\u0105trz. Trudno jest uwzgl\u0119dni\u0107 wszystkie czynniki, ale Twoim celem powinno by\u0107 uwzgl\u0119dnienie wi\u0119kszo\u015bci \u015brodowisk i zapewnienie r\u00f3\u017cnym grupom u\u017cytkownik\u00f3w wygodnego przegl\u0105dania.\n<\/p>\n \n Minimalizowanie wysoko\u015bci linii, aby zmie\u015bci\u0107 wi\u0119cej tre\u015bci, nie jest dobr\u0105 praktyk\u0105. Je\u015bli linie s\u0105 zbyt blisko siebie, czytelnik jest bardziej sk\u0142onny do przeskoczenia do poprzedniej lub nast\u0119pnej linii i utkni\u0119cia. Odst\u0119p mi\u0119dzy wierszami (wiod\u0105cymi) powinien by\u0107 o 30% wi\u0119kszy ni\u017c wysoko\u015b\u0107 u\u017cytych znak\u00f3w. Takie prowadzenie zapewnia najlepsz\u0105 czytelno\u015b\u0107 tre\u015bci i jej wyra\u017any odbi\u00f3r wizualny.\n<\/p>\n\n 1: Zminimalizuj liczb\u0119 u\u017cywanych czcionek
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: Wybierz czcionki Sans Serif, aby poprawi\u0107 czytelno\u015b\u0107
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Umys\u0142 przyzwoity rozmiar czcionki
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Przestrzegaj optymalnej d\u0142ugo\u015bci linii
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: Wybierz kroje pisma, kt\u00f3re dzia\u0142aj\u0105 dobrze w r\u00f3\u017cnych rozmiarach
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: Dokonuj inteligentnych wybor\u00f3w kolor\u00f3w
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: Nie eksperymentuj z wysoko\u015bci\u0105 linii
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n