7 prostych reguł dla typografii mobilnej
Zapewne słyszałeś, że dobra typografia jest niewidoczna, ale dokładniej jest powiedzieć, że dobra typografia sprawia, że czytanie jest łatwe.
Kiedy oko wędruje wzdłuż linii tekstu, robi to w skokach, zwanych sakwami; nie czytasz liter, a nawet słów, czytasz migawki części słów, a mózg wypełnia to, czego oczekuje. Jeśli mózg jest zaskoczony, wysyła oczy z powrotem, aby sprawdzić, czy jego założenie było prawidłowe. Dobra typografia minimalizuje pracę, którą muszą wykonać twoje oczy, tworząc płynny przepływ wzdłuż linii.
Urządzenia mobilne stanowią nieodłączne wyzwanie dla każdego typografa: przestrzeń jest ograniczona, a światło otoczenia często jest słabe. Ale dzięki prostym dostosowaniom do technik, które już używamy w Internecie, możemy poprawić czytelność na urządzeniach mobilnych.
1. Daj sobie przestrzeń
Wbrew powszechnej opinii, typografia nie polega na rozmieszczeniu małych falistych linii na ekranie; typografia w dużej mierze dotyczy przestrzeni wewnątrz i wokół nich.
Typografia wiele zawdzięcza samemu kształtowi litery, niż przestrzeni, którą tworzą
Aby to zrozumieć, pomaga zrozumieć, skąd pochodzą czcionki: dziura w środku "o" (i "b", "c", "p" itp.) Nazywa się "licznikiem". Gdy czcionki zostały wyrzeźbione z metalu do użytku w oryginalnych prasach drukarskich, te liczniki zostały stworzone przez uderzenie metalu, które zostało wyrzeźbione, a następnie wbite w talerz. Pierwsi projektanci pracowali z kształtami, które nie były drukowane. Typografia wiele zawdzięcza samemu kształtowi litery, niż przestrzeni, którą tworzą.
Kiedy mówimy o hierarchii, zwykle mamy na myśli
do
i ewentualnie do
. Ale istnieje dodatkowa hierarchia, która wpływa na przepływ linii lub akapitu, a to jest hierarchia przestrzenna: przestrzeń między literami jest mniejsza niż przestrzeń między wyrazami, przestrzeń między słowami jest mniejsza niż przestrzeń między wierszami i dalej.
Aby zapewnić optymalną czytelność na urządzeniach przenośnych, należy zwrócić szczególną uwagę na hierarchię przestrzenną, w przypadku grupowania znaków w słowa, linie i paragrafy w stylu gestal tym bardziej istotne jest naturalne światło.
2. Zdobądź miarę
Measure to długość linii tekstu. Lub, dokładniej, jest to idealna długość dla linii tekstu, ponieważ rzadko się zdarza, aby każda linia dokładnie pasowała.
Ogólnie przyjętym, idealnym środkiem do wygodnego czytania jest około 65 znaków. Fizyczna długość miary zależy od projektu kroju pisma, śledzenia (patrz poniżej) i dokładnego tekstu, którego używasz. Pierwsze 65 znaków tego artykułu, ustawione w PT Serif, ma szerokość 26.875em, w Open Sans, 28.4375em, w Ubuntu, 27.3125em; gdybym dodał kursywę, małe litery lub tuzin innych szczegółów typograficznych, byłby on jeszcze bardziej zróżnicowany.
Rzadko się 65 znaków rozszerza do krawędzi przeglądarki na komputerze, ale na większości urządzeń mobilnych 65 znaków (jeśli są wystarczająco duże, aby były czytelne) wykracza poza granice przeglądarki. W związku z tym, w przypadku urządzeń mobilnych, jesteś zmuszony zmniejszyć swoją miarę.
Nie ma powszechnie akceptowanego standardu pomiaru na ekranie mobilnym, jednak tradycyjnie wąskie kolumny tekstu w gazetach lub czasopismach mają 39 znaków. Ponieważ ta idealna miara była testowana przez wieki, służy nam dobrze w przypadku typografii mobilnej.
3. Poluzuj, a następnie dokręć prowadnicę
Prowadzenie jest przestrzenią między liniami, a gdy jest ustawione zbyt ciasno, powoduje skok skakania od końca jednej linii do początku następnego trudnego do naśladowania. Po ustawieniu zbyt luźnym odstępy między wyrazami zaczną się ustawiać w linii, tworząc tzw. Rzeki, przerywając płynny przepływ linii.
l-r: idealne prowadzenie, zbyt ciasne, zbyt luźne.
Standardowym standardem dla wiodących jest około 1,4em, jednak z mojego doświadczenia wynika, że jest zbyt ciasny dla ekranów: jedną z kluczowych cech kroju, który dobrze działa na ekranie, są duże liczniki, a duże liczniki wymagają trochę dodatkowego prowadzenia, aby utrzymać hierarchię przestrzenną .
Odwrócenie tej zasady, krótszy środek wymaga mniej wiodących. Tak więc, chociaż prawdopodobnie ustawisz nieco mniejszą przewagę w stylach komputerów stacjonarnych, pamiętaj o dokręceniu go do ekranów mobilnych.
4. Znajdź słodki punkt
Wszystkie czcionki mają co najmniej jedno słodkie miejsce; kombinacja wielkości, w której najlepiej reprodukują się na ekranie, oraz punktu, w którym antyaliasing zastosowany w przeglądarce zniekształca projekt kroju pisma w jak najmniejszym stopniu.
Najsłodsza plamka jest zwykle punktem, w którym większość kresek pasuje do siatki pikseli - pikselowe czcionki, o ile je pamiętasz, działały tylko wtedy, gdy zostały dopasowane do ich słodkich miejsc.
Ustawienie czcionki w jej słodkim miejscu powoduje większy kontrast. Kontrast jest szczególnie ważny przy projektowaniu na urządzenia mobilne ze względu na możliwość rozpraszania odblasków na zewnątrz subtelnie oświetlonego laboratorium urządzenia.
Przekonasz się, że drobne korekty prowadzące będą naciskać i ciągnąć linie od całych pikseli. Moim zdaniem, ataki kontrastowe prowadzą do ekranów mobilnych, więc jeśli musisz iść na kompromis, prowadząc do utrzymania linii na całym pikselach, zrób to.
Standardowym podejściem dla projektantów jest ułożenie typu przy użyciu siatki bazowej, ale w przypadku urządzeń mobilnych musimy użyć wysokości x (wysokość x to dosłownie wysokość małej litery "x"). Wiemy z badań czytelności, że mózg rozpoznaje górę słów, a nie dno, więc aby uzyskać większy przepływ sakkady, musimy zapewnić, że wierzch naszych postaci jest najbardziej dopasowany do pikseli.
5. Nie zgub swojej szmatki
Szmata jest krawędzią bloku tekstu. Większość tego, co czytasz, jest wyrównana do lewej (przynajmniej dla języków z alfabetem łacińskim), co powoduje nierówne prawe krawędzie.
Kiedy twoje oczy przeskakują od jednego końca linii do następnego, mózg jest w stanie lepiej ocenić kąt i odległość następnego skoku, jeśli wszystkie skoki są spójne - pomyśl o tym, jak biegasz po kamieniach, to dużo szybciej, jeśli są rozmieszczone konsekwentnie. Z tego powodu lewa krawędź tekstu powinna być płaska, a każda linia musi zaczynać się w tym samym miejscu (dokładnie odwrotnie, w przypadku języków od prawej do lewej).
W rezultacie nigdy nie należy wyśrodkować wyrównania więcej niż dwóch lub trzech linii tekstu.
Często tekst jest uzasadniony, co oznacza, że słowa na linii są równomiernie rozłożone, tak że po obu stronach nie ma szmaty. (Podejrzewam, że usprawiedliwiony tekst jest modny, ponieważ projektowanie responsywne nauczyło projektantów myślenia w blokach.) Ulepszony tekst powoduje niespójne białe znaki, aw najgorszym przypadku prowadzi do kilku słów na linii, która jest poważnie szarpiąca. Problem z usprawiedliwionym tekstem potęgowany jest przez krótszy pomiar, więc tekst z uzasadnionym tekstem może być nieczytelny na urządzeniach mobilnych.
l-r: wyrównane do lewej, wyśrodkowane, uzasadnione.
Jeśli czystość jest dla Ciebie naprawdę ważna, podziel tekst, aby zmiękczyć szmatę, ale nigdy nie usprawiedliwiaj tekstu na telefonie komórkowym.
Ragged right text ma dodatkową zaletę dla urządzeń mobilnych: tekst jest często czytany w rozpraszających sytuacjach, a czytelnicy często odwracają wzrok od tekstu - aby sprawdzić nazwę stacji lub odebrać połączenie. Szmata tworzy losowy kształt w prawej kolumnie, która pomaga oko przenieść swoją ostatnią pozycję, przy minimalnym ponownym czytaniu.
6. Zmniejsz kontrast
Chcąc zachęcić do kontrastowania tekstu i tła, chcemy go zmniejszyć na różnych poziomach.
W przypadku urządzeń mobilnych widocznych jest znacznie mniej tekstu, przez co kontrast zostaje wyolbrzymiony
Powodem tego jest to, że nasze mózgi oceniają znaczenie w oparciu o kontekst. Twoje nagłówki mogą być dwa, a nawet trzy razy większe niż rozmiar tekstu na pulpicie, a to działa, ponieważ więcej tekstu jest na ekranie. W przypadku urządzeń mobilnych widocznych jest znacznie mniej tekstu, przez co kontrast zostaje wyolbrzymiony.
Większość projektantów używa pewnego rodzaju sekwencji Fibonacciego do rozmiaru tekstu. W przypadku urządzeń mobilnych należy dokręcić przełożenia w celu zmniejszenia kontrastu rozmiarów. Na przykład, jeśli używasz złotej proporcji do zwiększenia rozmiaru, mnożysz przez 1,618. W przypadku urządzeń mobilnych należy wziąć mniejszy udział i pomnożyć przez 1,382.
Ekrany pulpitu tolerują bardziej ekstremalne skale typograficzne niż ekrany mobilne.
7. Dostosuj śledzenie do skali
Gdy dostosowujemy rozmiary czcionek do urządzeń mobilnych, musimy pamiętać o koniecznych zmianach w śledzeniu.
(Powiem, że nie powinieneś dostosowywać kerningu Kerning jest odstępem dwóch par liter, tak aby przestrzeń między nimi była optycznie spójna z przestrzenią między innymi postaciami Kerning został dodany do czcionki po jej zbudowaniu i prawdopodobnie zajęło to miesiące.Jeśli wybrałeś profesjonalnie zbudowaną czcionkę, to zrobiono to poprawnie, a jeśli uważasz, że nie została ona wykonana poprawnie, znajdź inną czcionkę.)
Śledzenie nie jest kerningiem. Śledzenie to odstępy między literami zastosowane do wszystkich znaków w czcionce. Zwykle nie należy również dostosowywać śledzenia.
Wyjątki od tej reguły dotyczą tekstu dużego, takiego jak nagłówki i mały tekst, na przykład przypisów. Większy tekst wymaga mniej śledzenia, a mniejszy tekst wymaga więcej śledzenia. Ten pierwszy jest wynikiem grupowania, a drugi ma przynieść korzyść kontrastowi. Jeśli wprowadziłeś zmiany w nagłówkach lub używasz czcionek wyświetlanych, które zazwyczaj mają ściślejsze śledzenie, możesz trochę poluzować śledzenie podczas zmniejszania skali.
Podsumowanie
Typografia to rzemiosło, w którym projektanci spędzają całe życie na szlifowaniu, właśnie dlatego, że każdy tekst, każdy krój pisma i każda technologia przynoszą nowe wyzwania. Nie ma sztywnych reguł, które zawsze będą działać w każdej sytuacji.
Kiedy dążysz do czytelności, musisz pamiętać o trzech zasadach: płynny przepływ wzdłuż linii, przejrzysta hierarchia przestrzenna i odpowiedni kontrast. Dotyczy to zwłaszcza sieci mobilnej.
Nie ma żadnej zasady, która nie może być odrzucona na podstawie dowodów na własne oczy, ale wytyczne tutaj będą służyć jako idealny punkt wyjścia dla pięknie rozplanowanego tekstu na urządzeniach mobilnych.