Typografia gra kluczowa rola Według statystyk w projektowaniu stron internetowych 95% treści stron internetowych to treści tekstowe. Projekt czcionki kontroluje nastrój i tworzy określoną atmosferę podczas czytania treści tekstowych stron internetowych.

Nowoczesna typografia internetowa opiera się na stylach CSS. Zmieniając domyślne ustawienia stylu przeglądarki, możesz uatrakcyjnić treść tekstową.

W tym artykule omówimy główne aspekty współczesnej typografii internetowej, które pomogą Ci podjąć decyzję o wyborze czcionki i sposobie zaprojektowania tekstu.

Właściwości CSS dla prawidłowej typografii internetowej

1. Rodzina czcionek (właściwość rodziny czcionek)

Wybór czcionki rozpoczyna się od wyboru kroju czcionki.

Zestaw słuchawkowy- czcionka lub kilka czcionek, które mają stylistyczną jedność stylu. Składa się z zestawu znaków (zwykle cyfr, liter, znaków interpunkcyjnych, znaków specjalnych, ale może również składać się wyłącznie ze znaków innych niż alfabetyczne). Na przykład krój pisma Times New Roman składa się ze zwykłych czcionek, kursywy, pogrubień i wielu innych czcionek z tej rodziny.

Zestawy słuchawkowe można podzielić na dwie główne kategorie: szeryf(czcionki antyczne i płytowe) oraz bezszeryfowy(groteski).

Czcionki bezszeryfowe są proste i przejrzyste wygląd. Z kolei czcionki szeryfowe nadają bardziej poważny i formalny ton.

W trakcie czytania oczy przyzwyczajają się do czcionki głównej i męczą się, gdy nagłówki, spis treści i tekst dodatkowy są pisane czcionkami o różnych krojach, które nie współgrają z czcionką główną. Dlatego przy wyborze czcionek wystarczy skupić się na jednej lub dwóch czcionkach i położyć nacisk na rozmiar, kolor, styl itp.

Kiedy można używać wielu czcionek?

Nie ma specjalnych stylów kroju pisma (pogrubiony, półpogrubiony, kursywa);
konieczne jest osiągnięcie podobieństwa z określoną epoką;
do wizualnego oddzielania tekstów kilku typów (na przykład komentarzy w tekście, linii kodu, formuł, tekstów w innym języku);
ze względów estetycznych.

Usługa TypeTester do wyboru czcionki

2. Połączenie czcionek szeryfowych i bezszeryfowych

W zaleceniach dotyczących łączenia czcionek obowiązuje niepisana zasada: w nagłówkach wybierana jest czcionka bezszeryfowa, a w tekście głównym czcionka szeryfowa. Jednak to podejście nie jest tak popularne, jak mogłoby się wydawać.

Tak naprawdę zasada ta dotyczy przede wszystkim publikacji drukowanych i druku książek. Wynika to z faktu, że czcionka z szeryfami (małe kreski na końcach głównych kresek) płynnie układa się w jednej linii, dzięki czemu tekst jest łatwiejszy do zauważenia i czyni go bardziej czytelnym.

Inaczej wygląda sytuacja w przypadku wyświetlania tekstu na wyświetlaczach. różne urządzenia. Jest problem wygładzenia i nierównych szeryfów. Dlatego czcionka bezszeryfowa z nieco zwiększoną wysokością małych liter lepiej nadaje się do tekstu podstawowego.

3. Kolor czcionki (właściwość koloru)

Kolor nadaje tekstowi wyrazistość i wyrazistość. Kolorowe nagłówki i małe akcenty w tekście mogą przyciągnąć więcej uwagi niż czarny tekst.

Nie powinniśmy jednak zapominać, że każdy kolor niesie ze sobą swój nastrój, a każda osoba ma osobiste uczucia, które wywołuje w niej ten lub inny kolor.

Ciepły kolor aktywnie przyciąga uwagę do tekstu, sprawiając, że jest on wizualnie większy niż czcionki o podobnej wielkości w chłodnych odcieniach. W przypadku małych elementów tekstowych odpowiednie są jaśniejsze kolory, boczną treść strony można podkreślić kolorem o 20-30% jaśniejszym niż kolor tekstu głównej treści strony internetowej.

Wybierając ilość kolorów tekstu, warto ograniczyć się do dwóch dość kontrastujących kolorów (nie licząc czarnego i biały). Czarny tekst na białym tle to klasyka, dość kontrastowa.

4. Rozmiar czcionki (właściwość rozmiaru czcionki)

Bazowy rozmiar czcionki w przeglądarce wynosi 16px, a wielkość nagłówków ustalana jest proporcjonalnie do bazowego rozmiaru czcionki (h1 – 2em, h2 – 1,5em, h3 – 1,17em itd.).

Zmieniając rozmiar czcionki, możesz nadać tekstowi znaczenie wizualne i zwrócić uwagę odwiedzających na najważniejsze części tekstu. Z reguły im większy element, tym jest ważniejszy.

Na wielkość tekstu w oknie przeglądarki wpływa rozdzielczość monitora użytkownika: tekst o tym samym rozmiarze na monitorze z wysoka rozdzielczość wydaje się mniejszy niż tekst o tym samym rozmiarze na monitorze o niższej rozdzielczości.

Czcionki z różnych rodzin tego samego rozmiaru mogą mieć różne rzeczywiste rozmiary.

Wraz ze wzrostem rozdzielczości ekranu i rozmiarów monitorów konieczne jest ponowne rozważenie zwykłego rozmiaru tekstu wynoszącego 12–14 pikseli. W przypadku zwykłego tekstu powszechnie stosuje się już czcionkę o rozmiarze 14–18 pikseli. Ustawiając rozmiar czcionki nie można zapominać o możliwości adaptacji, tj. Rozmiar czcionki powinien zmieniać się w zależności od rozmiaru ekranu.

5. Wyrównanie tekstu (właściwość wyrównania tekstu)

Wyjustowany tekst dobrze wygląda na wydrukowanej stronie, ponieważ słowa są równomiernie rozmieszczone w wierszach. Podobne formatowanie stron internetowych za pomocą CSS jest niemożliwe, a justowanie tekstu tworzy duże, nieprzyjemne odstępy między wyrazami. Dlatego wyrównanie do lewej jest powszechnie stosowane w typografii internetowej.

6. Odstępy między literami i znakami (właściwości dotyczące odstępów między wyrazami i odstępami między literami)

Odstępy między literami wpływają na czytelność tekstu. Zróżnicowanie gęstości tekstu (tekst skondensowany i rzadki) pozwoli na zróżnicowanie tempa percepcji, osiągając równowagę w kompozycji tekstowej serwisu.

Czcionki szeryfowe wyglądają bardziej wyraziście dzięki zmniejszonej wartości odstępów między literami.

7. Odstępy między wierszami (właściwość wysokości linii)

Optymalna wartość odstępu między wierszami wynosi 1,4 - 1,6 razy większy rozmiar czcionka.

Także nie duże wcięcia pomiędzy nagłówkami i powiązanym z nimi akapitem.

8. Długość linii

Wiersz do czytania ciągłego powinien zawierać od 30 do 75 znaków (około 7-10 słów w jednym wierszu). Im szersza linia tekstu, tym większa powinna być odstępy między wierszami. Odstępy między wierszami nie powinny być mniejsze niż odstępy między wyrazami.

9. Styl czcionki (właściwość stylu czcionki)

Możesz stworzyć piękną typografię, kontrolując styl czcionki. Na przykład kursywa nadaje tekstowi pewną powagę. Odważny styl plus zwiększony rozmiar czcionki pozwala wyróżnić żądaną treść, ale tylko wtedy, gdy taki tekst będzie wyróżniał się na tle pobliskich obiektów.

Właściwość wariant czcionki: kapitaliki; dodaje wyrafinowania typograficznego do tekstu, przekształcając tekst tak, aby wszystkie litery były pisane małymi literami. Ta technika Odpowiednie dla małych fragmentów tekstu.

10. Struktura tekstu i hierarchia wizualna

W strukturze strony znajdują się następujące obiekty:
logo/nazwa strony;
tytuły/tytuły;
nagłówki tła;
tekst główny;
nawigacja;
linki hipertekstowe;
długie cytaty;
panele boczne;
podpisy/inskrypcje w tabelach, rycinach.

Każdy element listy stanowi zasadniczą część witryny, co uzasadnia potrzebę jego wyróżnienia.

W HTML istnieje sześć poziomów nagłówków, zaczynając od najważniejszego

i kończąc na mniej znaczących

. Nagłówek

powinien znajdować się na pierwszym miejscu w strukturze dokumentu i nagłówkach niższe poziomy musi go śledzić i szczegółowo przekazywać informacje. Aby wyróżnić nagłówki, możesz zastosować technikę podświetlania części nagłówka kolorem.

Dla łatwiejszego przyswojenia tekst należy podzielić na części i dla każdej sekcji oznaczyć nagłówek odpowiedniego poziomu. Im wyższy poziom nagłówka, tym bardziej istotna powinna być treść sekcji.

W ogólnej strukturze tekstu szczególną uwagę należy zwrócić na linki, które powinny łatwo wyróżniać się na tle otaczającej treści.

Na stronie ustalana jest hierarchia wizualna prawidłowa struktura, dzięki czemu tekst będzie łatwiejszy do zrozumienia i przeczytania. W większości tekstów występuje podział tekstu ze względu na znaczenie. Sposobów jest kilka, najprostszym jest podzielenie tekstu na akapity.
kapitał;
kursywa;
odważny/odważny styl;
rozmiar;
kolor;
zmiana zestawu słuchawkowego;
zmiana położenia znaków na pasku tekstu (wielkie i małe litery, wcięcia);
podświetlanie znaków za pomocą elementy graficzne— wskaźniki, ramki, ikony itp.

Zbyt duży nacisk nie tylko kładzie zbyt duży nacisk na konkretny fragment, ale także utrudnia jego czytanie.

11. Bezpieczne czcionki

Czcionki Windows/Czcionki Mac/ Rodzina czcionek

Arial, Arial, Helvetica, bezszeryfowy

bezszeryfowy

kursywny

jednoprzestrzenna

Gruzja 1, Gruzja, szeryf

bezszeryfowy

Konsola Lucida, Monako 5, jednoprzestrzenna

bezszeryfowy

szeryf

Tahoma, Genewa, bezszeryfowy

Times New Roman, Times, szeryf

Trebuchet MS 1, Helvetica, bezszeryfowy

Verdana, Verdana, Genewa, bezszeryfowy

Symbol, symbol (Symbol 2, Symbol 2)

Sieci, sieciówki (Pasy 2, Paski 2)

Wingdingi, Zapf Dingbats

MS Sans Serif 4, Genewa, bezszeryfowy

MS Serif 4, Nowy Jork 6, szeryf

Arial, Arial, Helvetica, bezszeryfowy

Arial Czarny, Arial Czarny, Gadżet, bezszeryfowy

Komiks bez MS, Komiks bez MS 5, kursywny

Kurier Nowy, Kurier Nowy, Kurier 6, jednoprzestrzenna

Gruzja 1, Gruzja, szeryf

Uderzenie, Uderzenie 5, Węgiel 6, bezszeryfowy

Konsola Lucida, Monako 5, jednoprzestrzenna

Lucida bez Unicode, Lucida Grande, bezszeryfowy

Palatino Linotype, Book Antiqua 3, Palatino 6, szeryf

Tahoma, Genewa, bezszeryfowy

Times New Roman, Times, szeryf

Trebuchet MS 1, Helvetica, bezszeryfowy

Verdana, Verdana, Genewa, bezszeryfowy

Symbol, symbol (Symbol 2, Symbol 2)

Sieci, sieciówki (Pasy 2, Paski 2)

Wingdingi, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4, Genewa, bezszeryfowy

MS Serif 4, Nowy Jork 6, szeryf

My, jako projektanci, musimy nie tylko zrozumieć i uchwycić znaczenie tekstu, ale musimy go zobaczyć. To znaczy rozpoznać, jakim krojem pisma został napisany tekst i w jakim stylu został użyty. Aby wybrać odpowiednie czcionki dla stron internetowych lub aplikacje mobilne Musisz przynajmniej zrozumieć typografię poziom wejścia. W tym artykule wyjaśnię podstawowe zasady i koncepcje typografii, które pomogą początkującemu projektantowi stron internetowych, jeśli po raz pierwszy słyszysz o pojęciu typografii.

Zacznijmy od przykładów typografii.

Typografia to wykorzystanie odpowiednich czcionek nie tylko przy projektowaniu książek i czasopism, ale także stron internetowych czy aplikacji na urządzenie mobilne.

Nie ma potrzeby tego robić

Często tego typu typografię można spotkać w reklamach na słupach czy w metrze.
Aby zrozumieć różnicę między pierwszymi przykładami a drugim, trzeba znać podstawowe zasady i definicje, trzeba rozumieć i czuć czcionki. Teoria jest ważna, jeśli chcesz szybko i skutecznie zacząć w niszy projektowania stron internetowych.

Spróbuj przeczytać ten tekst w 20 sekund.

W każdym słowie w tym tekście jest błąd. Ponieważ jesteśmy ludźmi piśmiennymi, jesteśmy przyzwyczajeni do oglądania tego, co chcemy widzieć. Nawet taki tekst, bez wnikania w symbole, z łatwością możemy przeczytać i zrozumieć. Jest to normalne, większość piśmiennych ludzi tak robi, to znaczy nie zauważa literówek, ponieważ chcą zobaczyć, co tu jest napisane (zrozumieć znaczenie tekstu), a nie widzieć abra-kadabry. Dlatego też, jeśli czcionki zostaną wybrane prawidłowo, odczytanie nawet tekstu nie będzie dla Ciebie trudne duża ilość literówki.

Typografia

Definicja typografii to projektowanie tekstu za pomocą narzędzi do pisania i układu. Pojęcie „typografii” wywodzi się z druku.
Na zdjęciu litera jest metalowym blokiem, na którym drukowane są elementy przestrzenne, które powodują odciśnięcie na papierze i uzyskuje się odpowiednią literę. Dlatego w definicji „typografii” pojawiają się takie słowa, jak „pisanie na maszynie” i „układ”, które wywodzą się z druku.

Podstawowe definicje w typografii

Przykład kaligrafii

Kaligrafia- sztuka ładny list. Weź szeroki długopis, pędzel lub kawałek linijki i użyj tych narzędzi, aby stworzyć takie dzieła.

Tworzenie czcionek dekoracyjnych. Zwykle rysuje się szkic w notatniku, następnie przenosi do programu Illustrator, czcionkę obrysowuje się za pomocą krzywych Beziera, po czym uzyskuje się zgrabny napis.

Napis na logo

Różnica między kaligrafią a liternictwem. Kaligrafia polega na tym, że bierzesz długopis, marker lub cokolwiek innego i rysujesz w dowolnym miejscu. Liternictwo - gdy narysujesz szkic, przenieś go do edytora graficznego, prześledź i uzyskaj piękne litery, które można wykorzystać w logo lub gdziekolwiek indziej.

Podstawowe zasady typografii

Czcionka małych i wielkich liter

Małe litery- litery akceptowane do ciągłego pisania.
Duże litery(wielkie litery, popularnie „duże”) litery służą do oznaczania wielkich liter; od nich zaczyna się zdanie lub nazwa własna.

Łącznik i myślnik
Ważna funkcja, której brakuje początkującym. Myślnik i myślnik — różne znaki, warto to wiedzieć.
Łącznik- krótka kreska oddzielająca słowa i łączniki. Nic nie przebije słów. Spacji NIE stawia się przed ani po nim.
W myśleniu służy do wskazania zakresów liczbowych, zwykle również nieoddzielonych spacjami.
To kreska- Jest to znak interpunkcyjny używany w zdaniach i oddzielany spacjami.
Łącznik, myślnik i kreska różnią się długością samego znaku. Jest też znak minus, jest najkrótszy ze wszystkich. Oto mała podpowiedź. Zapisz zdjęcie dla siebie, aby zapamiętać, co jest co.


Aby wpisać myślnik na komputerze, przytrzymaj klawisz Alt i na dodatkowym klawiatura numeryczna(masz blok po prawej stronie) wybierz 0151, pojawi się myślnik. W myślniku: alt + 0150.
Jeśli zapomnisz kombinacji, wpisz „em myślnik” w wyszukiwarce, znajdź artykuł w Wikipedii i skopiuj stamtąd myślnik.

cytaty
Należy pamiętać, że w Rosji zwyczajowo się go używa Cytaty z choinek„”. Aby je wpisać, użyj alt + 0187. Niektórzy używają znaku podwójnej minuty „ jako cudzysłowu, ale lepiej jest użyć cudzysłów„ ”: alt + 0147.
Połączenie Klawisze Shift+ 2 w układzie klawiatury cyrylicy wywołuje znajomy „znak” na ekranie. Nie oznacza to w ogóle cudzysłowu (jak się powszechnie uważa), ale sekundy: 68° 13′ 22″ lub cale: monitor o przekątnej 17″.
W publikacji należy zastosować jeden wzór cytatu, z wyjątkiem „przypadków „cytat w cytacie”.

Czcionki

Uporządkowaliśmy znaki, teraz o koncepcji czcionki. Tutaj podam jedynie podstawowe definicje prawidłowego używania czcionek, przeczytaj.
Czcionka- zestaw liter przeznaczonych do wpisywania tekstu. List to to, o czym mówiłem powyżej, metalowy blok z literą. Z grubsza mówiąc, czcionka to zestaw metalowych liter przeznaczonych do tekstu.

Zestaw słuchawkowy- zestaw czcionek, które posiadają jednolity styl i projekt. Naturalnie powinny mieć podobny styl. Na przykład krój pisma PT Sans składa się z różnych stylów czcionek: pogrubionej, kursywy i innych. Wszystkie style razem dają nam krój pisma PT Sans.

Style czcionek to graficzny rodzaj czcionki w obrębie tego samego kroju pisma. Na przykład PT Sans ma cienkie, odważne, odważne i inne style. Zwykle w Photoshopie jest napisany w języku angielskim.

- odległość pomiędzy wartości bazowe sąsiednie linie.

Dostosowanie (dostosowanie w życiu)- sposób pozycjonowania niekompletnej linii maszynowej względem pionowych granic paska wybierania. Prawdopodobnie widziałeś takie przyciski w MS Word (znajdź obrazek, wyrównaj). Nazywa się to przełącznikiem, ponieważ gdy konieczne było prawidłowe ułożenie metalowych liter, umieszczano w nich kosmiczne metalowe bloki, aby je wyłączyć. Dlatego nazywa się to „wyłączeniem”.

Wyrównanie lub justowanie tekstu

Kerning i śledzenie
Kerning- selektywna zmiana odstępów między literami w zależności od ich kształtu. Gdy wiele (różnych) znaków jest wyrównanych. Wizualnie niektóre kombinacje liter są bardzo blisko siebie; gdyby między wszystkimi znakami była taka sama odległość, wizualnie wyglądałoby to inaczej. Dlatego podczas tworzenia czcionek korzystają z tabel, w których ściśle zapisana jest kombinacja liter i odległość między nimi. W dobre słuchawki jest to już domyślnie określone, ale można je dostosować edytor graficzny, z którego korzystasz (na przykład Photoshop).

Śledzenie- odległość między znakami w słowie lub zdaniu.
Używanie śledzenia ma sens, jeśli używasz wielkich liter, ma sens śledzenie, aby odległość między nimi była większa, były łatwiejsze i lepiej czytelne.

Jeśli używasz Photoshopa do tworzenia układu strony internetowej, radzę ustawić kerning na „automatyczny” i w ogóle nie włączać śledzenia. Czasami, aby czcionki w efekcie końcowym wyglądały tak samo jak w layoucie, trzeba porozumieć się z projektantem układu.

Antykwa- czcionki szeryfowe. Szeryfy to poziome paski u góry i u dołu liter. Pochodziły ze starych czcionek, które sięgają czasów pisania na kamieniu. W książkach łatwiej jest czytać szeryfy; szeryfy tworzą linie poziome, które wydają się wspierać czcionkę na linii bazowej i ułatwiają nam bieganie oczami, aby przeczytać zdania.
Groteska, czyli czcionka bezszeryfowa, pojawiła się niedawno, w związku z tzw. rewolucją czcionek, kiedy szeryfy nie były już potrzebne. Groteska jest często używana w czcionkach internetowych i elementach ekranowych (na przykład w telefonach). Jest prostszy ze względu na brak szeryfów, dobrze nadaje się do ciągłego składu w Internecie. W projektach możesz używać dowolnej opcji; nie ma dobrej ani złej opcji. Musisz przyjrzeć się sytuacji, jaki rodzaj projektu realizujesz i co jest dla niego bardziej istotne.
To kończy kurs wprowadzający z typografii dla projektanta stron internetowych :)
Pamiętając jedynie o Antiquze i Grotesce, wyprzedzisz już wielu projektantów pod względem wiedzy. Nie stój w miejscu, zajmij się typografią, to ciekawe i pomoże Ci stworzyć fajne i schludne projekty.
Napisz w komentarzach, czego nowego dowiedziałeś się z tego artykułu.

Komunikacja odgrywa ogromną rolę w projektowaniu. Bardzo ważne jest, aby stworzyć silną więź pomiędzy serwisem a samym użytkownikiem, a następnie pomóc mu w osiągnięciu jego celów. Kiedy mówimy o komunikacji w kontekście projektowania stron internetowych, zwykle mamy na myśli tekst. Typografia jest integralną częścią tego procesu:

Ponad 95% informacji w Internecie jest przechowywanych w formie pisemnej.

Dobra typografia sprawia, że ​​informacje są łatwo dostępne, natomiast zła typografia wymaga wysiłku, aby zrozumieć tekst. Jak zauważa Oliver Reichenstein w artykule „Projektowanie stron internetowych to w 95% typografia”:

Optymalizacja typografii polega na optymalizacji czytelności, dostępności, użyteczności (!) i osiągalności balans graficzny ogólnie.

1. Użyj minimalnej liczby czcionek

W przypadku użycia więcej niż 3 różne czcionki Twoja witryna traci strukturę i wygląda nieprofesjonalnie. Pamiętaj, że nadużywanie rozmiaru i stylu czcionki może zrujnować każdy układ.

Aby zapobiec takiej sytuacji, staraj się ograniczyć liczbę używanych czcionek do minimum.

Ogólnie rzecz biorąc, ogranicz liczbę czcionek do minimum (dwie to więcej niż wystarcza, jedna często wystarczy) i trzymaj się tych samych czcionek w całej witrynie. Jeśli zdecydujesz się na pracę z więcej niż jedną czcionką, upewnij się, że rodziny czcionek pasują do siebie pod względem szerokości liter. Spójrz na poniższy przykład. Połączenie Gruzji i Verdany (po lewej) ma Ogólna charakterystyka co pozwala im harmonijnie łączyć się ze sobą. Dla porównania weźmy kombinację Baskerville i Impact (po prawej). „Ciężki” Uderzenie tłumi swojego „wycięcia” partnera.

Upewnij się, że rodziny czcionek pasują do siebie pod względem szerokości liter

2. Spróbuj użyć standardowych czcionek

W usługach czcionek (na przykład Google Web Fonts lub Typekit) możesz znaleźć wiele interesujących, które dodadzą coś nowego i niezwykłego do Twojego projektu. Ponadto są bardzo łatwe w użyciu. Weźmy na przykład Google:

1. Wybierz dowolną czcionkę. Powiedzmy Open Sans.
2. Wygeneruj kod i wklej go

Twój kod HTML.
3. Gotowe!

Ale co może pójść nie tak?

Tak naprawdę metoda ta ma jeden poważny problem – użytkownicy przyzwyczajają się do standardowych czcionek i szybciej czytają tekst napisany takimi czcionkami.

Zwykle najlepszym rozwiązaniem jest użycie czcionki systemowe(Arial, Calibri, Trebuchet itp.). Wyjątkiem może być konieczność trzymania się czcionek, które sam Klient określił: na przykład w celu brandingu lub stworzenia czegoś zapadającego w pamięć. Pamiętaj, że dobra typografia wpływa na odczytanie tekstu, a nie na jego treść percepcja wzrokowa czcionka.

3. Ogranicz długość linii

Prawidłowa liczba znaków w jednej linii jest kluczem do tego, aby tekst był łatwy do odczytania. Wybierając szerokość tekstu, należy skupić się nie na swoim projekcie, ale na przejrzystości i precyzji pisanego tekstu. Rozważ następującą radę Instytutu Baymarda:

„Jeśli chcesz, aby Twój czytelnik czuł się komfortowo, każda linijka nie powinna zawierać więcej niż 60 znaków. Posiadanie odpowiedniej liczby znaków w jednym wierszu jest kluczem do zapewnienia łatwego odczytania tekstu.

Jeśli linia jest zbyt krótka, Twoje oczy będą musiały często zmieniać ostrość, co zakłóci tempo czytania. Jeśli wiersz będzie zbyt długi, wzrok czytelnika, wręcz przeciwnie, będzie musiał przez długi czas skupiać się na tym, co jest napisane. Zdjęcie: Projektowanie materiałów

W przypadku urządzeń mobilnych trzymaj się 30–40 znaków w wierszu. Poniżej znajduje się przykład dwóch witryn otwartych w dniu urządzenia mobilne. W jednym wierszu zawiera od 50 do 75 znaków ( najlepsza ilość znaków w wierszu dla tekstu drukowanego i rozdzielczości komputera), a na drugim widzimy optymalne 30-40 znaków.

W projektowaniu stron internetowych można osiągnąć wymaganą liczbę znaków, zmniejszając szerokość bloków tekstu za pomocą ems lub pikseli.

4. Wybierz kroje pisma, które są łatwe do odczytania w dowolnym rozmiarze

Użytkownicy będą uzyskiwać dostęp do Twojej witryny z różnych urządzeń, które w związku z tym mają różne rozmiary i rozdzielczości. Większość interfejsy użytkownika używaj elementów tekstowych o różnej wielkości (przycisk kopiuj, etykiety pól, nagłówki sekcji itp.). Musisz wybrać krój pisma, który będzie dobrze wyglądał i pozostał czytelny niezależnie od rozmiaru.

Roboto od Google

Upewnij się, że wybrany krój pisma jest czytelny na małych ekranach! Unikaj używania czcionek kursywnych, takich jak Vivaldi (na zdjęciu poniżej): chociaż wyglądają pięknie, czasami mogą być trudne do zrozumienia.

Stosowanie Czcionka Vivaldiego utrudnia czytanie tekstu na małym ekranie

5. Używaj czcionek z wyraźnymi literami

Wiele krojów pisma zaprojektowano w taki sposób, że czasami bardzo łatwo je pomylić podobne litery, zwłaszcza „I” i „L” zapisane alfabetem łacińskim (jak na obrazku poniżej). W niektórych literach znajdują się tak blisko siebie, że kombinację „r” i „n” można pomylić z literą „m”. Dlatego wybierając czcionkę, przetestuj ją w różnych kontekstach. W ten sposób możesz mieć pewność, że czytelnik nie będzie miał problemów ze zrozumieniem tekstu ze względu na krój czcionki.

6. Unikaj czapek

Tekst pisany wielkimi literami - lub samodzielnie wielkimi literami- nadaje się do sytuacji, w których użytkownik nie jest zaangażowany w proces czytania (na przykład w skrótach lub logo). Ale w innych przypadkach nie zmuszaj czytelników do używania tekstu pisanego wielkimi literami. Jak zauważa Miles Tinker w swoim słynne dzieło„Czytelność druku”, taki tekst czyta się znacznie wolniej niż tekst pisany małymi literami.

7. Zachowaj minimalne odstępy między wierszami.

W typografii istnieje specjalne określenie odległości między liniami - interlinia (lub odstęp między liniami). Zwiększając interlinię, zwiększasz pionowy odstęp między liniami, poprawiając w ten sposób czytelność tekstu na ekranie. Zgodnie z przepisami, aby zapewnić czytelność tekstu, interlinia powinna być o około 30% większa niż wysokość znaku.

Prawidłowy odstępy między wierszami zapewnia lepszą czytelność tekstu. Zdjęcie: Microsoft

Według Dmitrija Fadejewa prawidłowo dobrana odległość między akapitami zwiększa umiejętność czytania ze zrozumieniem o 20%. Umiejętność projektanta pracy z białą przestrzenią pozwala użytkownikom wchłonąć całą treść tekstu, nie tracąc żadnego szczegółu.

Po lewej: Tekst jest napisany prawie równo. Po prawej: Właściwe odstępy między wierszami poprawiają czytelność tekstu. Zdjęcie: Jabłko

8. Upewnij się, że masz dobry kontrast kolorów

Nie używaj tych samych lub podobnych kolorów tekstu i tła. Im lepiej widoczny jest tekst, tym szybsi użytkownicy będę w stanie go przeczytać i wyłapać główne punkty. Konsorcjum Sieć WWW zaleca stosowanie następujących proporcji tekstu podstawowego i tekstu obrazu:

• Małe teksty powinny mieć współczynnik kontrastu co najmniej 4,5:1 w stosunku do tła.
• Duże teksty (od rozmiaru 14 pogrubioną czcionką / od rozmiaru 18 wzwyż standardowa czcionka) musi mieć współczynnik kontrastu co najmniej 3:1 w stosunku do tła.

Ten tekst nie jest zgodny ze standardem kontrast kolorów, więc trudno odróżnić ją od tła.

Ten tekst jest zgodny ze standardem kontrastu kolorów, dzięki czemu jest łatwy do odczytania.

Kiedy odebrałeś schemat kolorów, musisz dać swój tekst do przeczytania prawdziwi użytkownicy a najlepiej na kilku różne urządzenia. Jeśli badanie wykaże jakiekolwiek trudności z rozpoznawaniem tekstu, możesz być pewien, że wielu użytkowników może spotkać się z tym samym problemem w przyszłości.

9. Unikaj używania koloru czerwonego lub zielonego w swoim tekście.

Daltonizm jest zjawiskiem dość powszechnym, szczególnie wśród mężczyzn (8% męskiej populacji to daltonista). Dlatego oprócz koloru zaleca się użycie innych znaków w celu podkreślenia ważna informacja. Staraj się także unikać używania czerwieni i zieleni, ponieważ są to kolory najczęściej nierozpoznawane przez osoby niewidome na kolory.

10. Unikaj używania migoczącego tekstu

Informacje, które migają lub migoczą, mogą powodować dyskomfort u podatnych użytkowników. Oprócz tego, że czujesz się chory, u wielu czytelników może to również powodować irytację, ponieważ odrywa ich od procesu czytania.

Nie używaj migoczącego tekstu!

Wniosek

Typografia jest bardzo ważną rzeczą. Dokonując właściwych wyborów, nadajesz swojej witrynie przejrzystość i przejrzystość. Jednocześnie zły wybór może prowadzić do nieuważnego czytania tekstu, ponieważ odwraca całą uwagę od siebie. Typografia powinna być czytelna, przejrzysta i zrozumiała.

Typografia powinna szanować treść

Oznacza to, że czytelnik nigdy nie powinien czuć się nieswojo podczas czytania tekstu.

Prawidłowa interakcja z typografią jest ważna dla każdego projektanta stron internetowych. W końcu treść tekstowa stanowi około 90% całkowitej zawartości witryny. Tekst kontroluje uwagę użytkowników, niosąc ze sobą nie tylko ładunek informacyjny, ale i estetyczny. Dlatego warto poświęcić odpowiednią ilość czasu na główne aspekty współczesnej typografii internetowej, czyli zapożyczanie najlepsze pomysły stosując je w praktyce.

Czcionki

Typografia w projektowaniu stron internetowych podlega pewnym prawom i zasadom. Wiele z nich dotyczy czcionek jako podstawy do tworzenia dowolnych treść tekstu. Właściwy wybór V w tym przypadku determinuje koncepcję projektu jako całości i wpływa na postrzeganie zasobu przez użytkowników.

Jeszcze nie tak dawno temu projektanci mieli do dyspozycji tylko kilka rodzajów czcionek, które służyły do ​​ładowania system operacyjny. Cała reszta była w formacie flash lub obrazu. Istniały pewne obejścia tej kwestii. Przysporzyły one jednak sporo bólu głowy.

Nowa era w projektowaniu stron internetowych rozpoczęła się wraz z pojawieniem się reguły @font-face. W istocie dało to projektantom wolną rękę, zapewniając niemal nieograniczone pole działania. Jednak nie wszystkie czcionki warto stosować w projektowaniu stron internetowych. Niektóre ze względu na słabą czytelność, inne z powodu ciężkości.

Wyrównanie

Najgorsze przykłady to wyrównanie wyjustowane, wyśrodkowane i do prawej. W pierwszym przypadku między wyrazami powstają nierówne odstępy, w drugim i trzecim przypadku poszarpana, nierówna krawędź czołowa pogarsza czytelność. Wzrok nie ma punktu odniesienia, a gdy jest rozproszony, informacja jest słabo odbierana.

Dobrą opcją wyrównania jest zorientowanie tekstu w lewo. Ten format jest odpowiedni w 99% przypadków.

Makro i mikrografia

Za to odpowiedzialny jest poziom makro struktura ogólna tekst w witrynie, lokalizacja względem innych elementów projektu. Jego cele są globalne – uczynić tekst całościowym, harmonijnym, a jednocześnie „żywym”.

Za obszar odpowiada poziom mikro najdrobniejsze szczegóły: odstępy, spacje, wcięcia itp. Tworzy takie pojęcie jak czytelność. Wyeliminuj go, a tekst zamieni się w ciągłe płótno liter i znaków interpunkcyjnych.

Aby oznaczyć czcionki w projektowaniu stron internetowych, lepiej jest używać wartości względnych „em” lub%. Pozwala to na dostosowanie treści do potrzeb i elastyczności. Zaleca się stosowanie pikseli w stosunku do kontenerów nieadaptacyjnych, gdy przy zmianie rozmiaru ekranu bloki się przesuwają, a czcionka się nie zmienia.

Bloki tekstu

Akapity i bloki długich zdań utrudniają zrozumienie informacji. Dużo wygodniej jest, gdy linia zawiera nie więcej niż 70 znaków, ale nie mniej niż 30. Odstępy między wierszami różnią się w zależności od szerokości linii tekstu. Dla wygody użytkowników nie powinien być mniejszy niż odstęp między wyrazami.

Krój pisma

Pracując nad typografią, nie można obejść się bez zmian w stylu liter. Umiejętnie wykorzystana umiejętność ta zamienia się w potężną broń akcentującą. Na przykład kursywa nadaje tekstowi pewną powagę, pogrubiony kontur wskazuje na wagę informacji, a właściwość czcionki: small-caps nadaje pewne wyrafinowanie.

Szeryf lub bezszeryf

Wielu projektantów uważa czcionki bezszeryfowe za idealne do nagłówków i podtytułów. Natomiast część główna powinna być uformowana czcionką szeryfową. Jest to niepisana zasada, której znaczenie już się wyczerpało.

Należy pamiętać, że użycie czcionki bezszeryfowej jest nadal uzasadnione:

• Kiedy czytelnikami są dzieci.
• Z jasną paletą kolorów akcentujących.
• Jeśli tekst jest wąski lub za mały.

Świat projektowania stron internetowych przeszedł długi proces wprowadzania efektów typograficznych do stron internetowych. Takie efekty jeszcze kilka lat temu były albo niemożliwe, albo obsługiwane przez jedną lub dwie przeglądarki. Na szczęście to się zmieniło i możemy cieszyć się twórczą eksplozją wykorzystania typografii na stronach internetowych. W takim przypadku zasoby pozostają dostępne i są wyświetlane poprawnie. W ciągu ostatnich kilku lat w tekście pojawiło się więcej czcionek, stylów projektowania, efektów nakładek, ikon i emoji, dzięki czemu tekst jest bardziej zróżnicowany, bogatszy i bardziej wyrazisty.

Duże czcionki

Stosowanie dużych pogrubione czcionki- tendencja. Nadaje tekstowi osobowość i stopniowo wypiera obrazy z głównych pozycji. Typografia odgrywa wiodącą rolę, zastępując obrazy i filmy, które na ekranach urządzeń mobilnych tracą wiele ze swojej efektywności.

Seryfy wracają

Czcionki szeryfowe to dobrze zapomniana stara rzecz Ostatnio stał się tak popularny, że stał się czymś zupełnie nowym. Duże czcionki szeryfowe to symbol roku 2018! Więc zdejmij zapomniany Clarendon z półki, będzie Ci znowu potrzebny!

Typografia wykraczająca poza standardowe układy

Trendy sugerują, że czcionki rysowane pędzlem tracą na popularności. Świat sieci podbijają style 3D, ilustrowane czcionki, animowane, żywsze litery. Projektanci bez wahania rezygnują z klasycznych układów kratek. Teksty na stronach internetowych coraz bardziej przypominają typografię w projektowaniu wydawniczym. Powiedzmy „Dziękuję!” postępująca standaryzacja Flexbox i CSS Grids oraz wprowadzenie zmiennych czcionek.

Pierwsze role w tekście

Teksty znajdujące się na stronie pełnią nie tylko funkcję estetyczną. Typografia to sposób na wyrażenie osobowości produktu, jego głosu i intonacji. Aby wzmocnić ten efekt, stosuje się wszelkie możliwe narzędzia: ikony, emoji, piktogramy, nakładki audio i obrazowe. Tekst jest teraz tak szanowany, że zwykły akapit tekstowy może być jednym z głównych elementów, czasem nawet rywalizującym z nagłówkiem.

Ozdoba tekstowa

Istnieje wiele typowych (i zupełnie nietypowych) sposobów formatowania tekstu. Klasyczne podkreślenie i kursywę potrafię połączyć w jednym akapicie różne rozmiary. W ten sposób kładziemy nacisk i wzmacniamy przekaz. W całym tekście rozproszone są różne efekty najechania myszką, kolorowe efekty podkreślenia, obrysowane czcionki, zmiany typografii, przełączanie między czcionkami szeryfowymi i bezszeryfowymi (czasami w tym samym zdaniu), ikony, emoji. Wszystko to ma zarówno charakter dekoracyjny, jak i cele semantyczne. A główne zadanie— postaraj się, aby tekst był jak najbardziej dynamiczny. Kombinacji metod projektowania nie ma końca, a wiele z nich jest wynikiem eksperymentów z modnymi dziś trendami – brutalizmem i maksymalizmem.

Ewolucja akapitu

Rozmiary czcionek i długość akapitów rosną ostatnio zaskakująco szybko. Autorzy artykułu nie mogli się powstrzymać i stworzyli mały wykres przedstawiający rozwój akapitów w historii projektowania stron internetowych.

Trendy typograficzne 2018

Oto trochę o tym, jakie trendy typograficzne królują w 2018 roku: