6.typografia

Typografia stała się ostatnio modna. Dobrze jest mieć ulubiony font, zrobić plakat złożony dużym stopniem, zaprojektować stronę z fikuśną kursywą lub wytresować glify tak, aby podskakiwały do rytmu electro jako type motion. Niestety na fali popularności często pomijana jest istota typografii, czyli szacunek dla czytelnika, dbałość o szczegóły i przestrzeganie zasad, których łamanie niszczy doświadczenie użytkownika. Ograniczona dowolność (co się obecnie zmienia) w wyborze fontów nie przeszkadza w innych aspektach dobrego projektowania typografii dla stron – a właśnie na stronach się w tym artykule skupimy. Artykuł ten jest raczej krótkim przewodnikiem, a wiele konceptów można realizować w odmienny sposób, jednak ogólne założenia pozostają prawdziwe.

Tak, żeby nikt nie zauważył

Typografia jest jedną z dziedzin, której zadaniem jest ciągłe ukrywanie się w cieniu. Czytając artykuły, skanując strony i szukając informacji użytkownicy nie muszą zwracać uwagi na fonty, interlinie czy równanie tekstu. Nie powinni musieć powiększać ani pomniejszać fontu. Z dobrze zaprojektowanymi książkami jest tak, że zawsze, kiedy skład tekstu jest tematem rozmowy, dotyczy za małych liter, złych marginesów, niewygodnego do czytania fontu, lub nieporęcznego formatu. Niestety konieczność usuwania się ze świadomości, powoduje również trudności w zrozumieniu istotności danej dziedziny.

Podstawy

Typografia to glify (litery, cyfry, znaki), wyrazy, zdania, linie, akapity, kolumny i białe coś (whitespace). Wszystkie te coraz to większe jednostki trzeba brać pod uwagę jako osobne rzeczy, które mają tworzyć jedną harmonijną całość, powiązaną i służącą tekstowi i użytkownikowi.

Różne rodzaje fontów. Szeryfy wymyślono by ułatwiały czytanie tekstu – poziome kreski tworzą linie, które ułatwiają podążanie wzrokiem wzdłuż linii.

Rysunek poniżej skrótowo wyjaśnia, co jest czym. Warto znać podstawy, ale o neoklasycystycznym stylu fontów można poczytać w książkach.

Podstawowe pojęcia typografii.

Dlaczego detale są istotne

Pomimo, że przeczytanie długiego tekstu zwykle bywa czasochłonnym zadaniem, to sam proces czytania jest bardzo szybką czynnością, która wymyka się naszej świadomości.

Oglądając badania eyetrackingowe łatwo uświadomić sobie, z jakimi przedziałami czasu należy się zmierzyć wybierając stopień fontu, wielkości boksów i rozmieszczenie elementów na stronie. Każde ułatwienie użytkownikowi skanowania strony pozwala na trafniejsze dotarcie do jego świadomości i pomaga osiągnąć zamierzone cele. Typografia jest nieodłączną częścią designu. Pozwala uporządkować proces zdobywania informacji przez użytkowników (przynajmniej w perspektywie aplikacji internetowych zorientowanych na osiąganie celów handlowych i marketingowych).

Jeden z detali, który w typografii robi ogromne znaczenie, a nie jest zauważalny na pierwszy rzut oka.

HTML-ową pochodną architektury informacji jest kod, oparty o odpowiednie dla swojej roli tagi (nagłówki, paragrafy, wyróżnienia). Dobrze zbudowana hierarchia jest konieczna aby ułatwić użytkownikom przyswajanie tekstu. Warto więc nie zapominać o tagach <h6>.

Strony WWW, to nie książki, ani plakaty

Projektowanie typografii dla strony internetowej nie odbywa się tak samo jak skład tekstów ciągłych (np. książek), plakatów ani DTP. Dobrą typografię na stronie internetowej można zaprojektować tylko z wykorzystaniem HTMLa i CSSa (no chyba, że strona jest wykonana w innej technologii, jak np. Flash). InDesign, Photoshop, Illustrator ani Word nie zastąpią przemyślanych stylów dla elementów strony, nie zapewnią spójności pomiędzy elementami a efekty projektowania nie mogą być testowane na różnych przeglądarkach.

Typografia zawsze pracuje w obrębie tekstu, więc dobrze dobrane treści są potrzebne, aby typografia nie była jedynie ozdobnikiem. W takim ujęciu typografia nieodłącznie wiąże się z copywritem. Od typu przekazywanych informacji i ich treści, a także grupy docelowej powinien zależeć dobór fontów czy marginesów.

Reset stylów

Właściwości i sposób wyświetlania większości elementów HTML jest w CSSie rekomendowana dla twórców przeglądarek, jednak każdy arkusz podstawowych stylów, w zależności od przeglądarki, jest od siebie różny. Takie początkowe nieścisłości w wyświetlaniu elementów powodują problemy z kodowaniem layoutów (oraz dobrej typografii) już na samym początku. Na szczęście kilka osób wpadło na pomysł, aby resetować te różnice, używając własnych arkuszy. Poniżej krótka lista najpopularniejszych resetów.

Layout i grid

Na początku projektowania należy wybrać, czy layout ma być płynny (fluid layout), na sztywno (fixed layout) czy mieszany. Potem należy wybrać szerokość zawartości (lub minimalne i maksymalne jej zakresy), co jest podstawą do dalszych obliczeń i podejmowanych decyzji.

Framework Blueprint CSS i połączenie gridu z rytmem.

Możemy sobie nie zdawać sprawy z zależności istniejących w otaczających nas przedmiotach, jednak nasz mózg potrafi precyzyjnie interpretować i oceniać otaczający nas świat, w oparciu o kilka podstawowych proporcji i zależnościach. Proporcje doskonale znane matematykom można odnaleźć w organizmach żywych. Muzyka, chociaż może być skomplikowana i wyrażana w różnych stylach, jest oparta o zaledwie kilka wymiarów. Architektura bez matematycznych zależności nie istnieje, a atrakcyjność spotykanych osób opieramy o proporcję i symetrię zapisaną w ich twarzach oraz budowie ciała.

Najbardziej uznaną i najczęściej występującą proporcją w typografii jest złoty podział (golden ratio), który w przybliżeniu jest wyrażony poprzez taki, nieskomplikowany wzór: a : b = b : ( a + b ).

Grid, czyli siatka jest określonym, powtarzalnym metrum, które wyznacza wielkość i pozycję poszczególnych elementów. Grid ma wymiar pionowy i poziomy. Poziomy nazywany jest również rytmem i jest ściśle związany ze stopniem pisma i interlinią (wysokością wiersza). Pionowy zależny jest od szerokości strony i wyznacza szerokości elementów i boksów na stronie. Marginesy i dopełnienia powinny być zależne od gridu.

Grid i rytm w pełnej krasie.

Opinie na temat wpływu długości wiersza na prędkość czytania i rozumienie tekstu są podzielone (szczególnie, jeżeli chodzi o strony internetowe), jednak generalna zasada, którą należy przyjąć za fakt mówi, że długie linie czytamy szybciej, ale więcej zapamiętujemy i rozumiemy z tekstów, w których w wierszu mieści się 40 do 85 znaków (optymalnie 65).

Rytm

Mózg lubi harmonię, a oko łatwiej porusza się po tekście, jeżeli tekst ma odpowiednią ilość miejsca dla siebie, a kolejne linie pojawiają się w przewidywalnych miejscach. Rytm strony najłatwiej osiągnąć poprzez odpowiednie dobranie wysokości linii (line-height) i stopnia pisma (font-size) oraz marginesy i dopełnienia kontynuujące tę logikę.

Definiowanie wysokości linii jest mniej wyrafinowaną metodą niż równanie tekstu do linii podstawowej (baseline), ale doskonale spełnia swoje zadanie, a przy tym jest łatwe do zakodowania i utrzymania.

Line-height w użyciu. Wszystkie kolejne linie powtarzają ten sam rytm, tak samo jak i pozostałe elementy na stronie.

Dobór wysokości linii zależy od stopnia pisma i wybranego fontu. Im większy stopień, tym wysokość linii powinna być większa. Tradycyjnie określa się, że optymalny stosunek wysokości do wielkości to od 1,3 do 2 (lub nawet więcej dla szczególnych przypadków). Dobór wysokości linii wpływa na dopełnienia i marginesy, które powinniśmy stosować. Bardzo pomocne w prawidłowym rozkładaniu elementów i kodowaniu odległości jest podłożenie obrazka z poziomymi liniami (jak w zeszycie do polskiego) i staranie się, aby elementy zaczynały i kończyły się równo z liniami, a tekst znajdował się pomiędzy tymi ostatnimi.

Zbyt mała wysokość linii wpływa negatywnie na szybkość czytania i przejrzystość tekstu.

Asymetryczne marginesy mogą być używane dla nagłówków lub cytatów blokowych. Negatywny margines równa środek tekstu na liniach wyznaczających rytm, a nie pomiędzy nimi – jednak następujący po nim tekst (np. paragraf) powinien powrócić pomiędzy linie rytmu.

Frameworki CSS

Niepolecane osobom, które nie mają doświadczenia w kodowaniu, ale przydatne reszcie mogą okazać się frameworki CSS, które posiadają zdefiniowane gridy, rytm oraz proporcje. Poniżej prezentujemy kilka popularnych i dobrze napisanych, z wielu istniejących.

Baseline CSS nie tylko korzysta z gridów, ale również jest jedynym frameworkiem, który świetnie sobie radzi z prawdziwym równaniem tekstu do linii podstawowej.

Whitespace

Czyli miejsca, gdzie nic nie ma. Prawdopodobnie jest to najmniej zauważalny element typografii, który jednocześnie może najwięcej. Whitespace’y to nie tylko światło między wyrazowe, interlinia, ale również wszelkie odstępy pomiędzy elementami. Wykorzystywanie marginesów nie jest marnotrawieniem przestrzeni, ale wspomaganiem hierarchii. Odpowiedni dobór whitespace’ów może również określać charakter samego designu.

Wybór fontów

Przy doborze fontu należy pamiętać o kilku sprawach. Istnieje niewiele fontów zaprojektowanych z myślą o ekranach, a i wśród nich niewiele posiada odpowiedni hinting (właściwość pozwalająca na zachowanie czytelności, przy niskich rozdzielczościach). W przypadku użycia różnych rodzin fontów obok siebie, ich wysokości x należy dobrać w taki sposób, aby minuskuła (małe literki) miały taką samą wysokość względem siebie. Warto korzystać ze stosów fontów (font stack), czyli tak dobranych rodzin (font-family), które będą wyświetlane przez przeglądarkę w kolejności, od najbardziej do najmniej pożądanego przez designera. Zwykle używa się dwóch stosów – jeden dla fontów szeryfowych, drugi dla bezszeryfowych. Przykładowe  popularne stosy, to na przykład:

  • Arial, Helvetica, sans-serif
  • Cambria, Georgia, Times, serif
  • Consolas, 'Lucida Console', Monaco, monospace
  • Verdana, Geneva, Tahoma, sans-serif

Jeżeli chodzi o strony internetowe, Georgia jest klasą samą dla siebie. Posiada niesamowitą czytelność, hinitng jest idealny, a dokładność w jej projekcie wyrażają (rzadko spotykane) cyfry tekstowe.

Dobór wielkości fontów powinien być związany ze skalą typograficzną. Można stworzyć taką skalę na potrzeby projektu, ale wymaga to pewnych obliczeń, dlatego najbezpieczniejszym rozwiązaniem jest stosowanie tradycyjnej skali typograficznej, znanej z edytorów tekstu, gdzie kolejne wielkości, to:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

Odpowiedni dobór stopnia pisma, zaplanowana hierarchia, grid, przemyślane wyróżnienia oraz whitespace’y ułatwiają przeglądanie strony. Minimalistyczne środki wyrazu pozwalają się skupić na treści. Prawdopodobnie niewiele osób doceni nakład pracy konieczny do tak przemyślanego zaprojektowania typografii.

Font replacement i przyszłość typografii w przeglądarkach

Od lat designerzy ubolewali, że nie mogą korzystać z takich fontów, jakie wydają się im odpowiednie dla danego projektu. Zestaw fontów, które określa się jako web safe fonts nigdy nie był rozbudowanych zestawem opcji. Przez lata królowały podróbki (jak Arial) lub niedoróbki (jak Comic Sans albo Times). Tylko nieliczne fonty mają odpowiedni hinting i są na tyle rozpowszechnioną rodziną, aby używać ich bez obaw (np. Georgia, Verdana, Lucida).

Tekst jest na ogół drukowany w wysokich rozdzielczościach, przez co odwzorowanie wektorowych krzywizn jest dokładne. Ekrany wyświetlają fonty w niskich rozdzielczościach (np. 72 dpi), co wymaga odwzorowywania tych samych łuków za pomocą kilkunastu pikseli. Zły hinting powoduje rozmywanie krawędzi fontów.

Najprostszym sposobem na użycie nietypowego fontu jest użycie obrazka. Powoduje to jednak znaczne problemy z wydajnością, a kod staje się trudny w utrzymaniu. Dodatkowo, każdy pozycjoner rwie sobie włosy z głowy widząc takie rozwiązanie. Na szczęście istnieją lepsze alternatywy.

Techniki podmiany tekstu (font replacement techniques) polegają na dynamicznej zamianie standardowego tekstu, przez tekst, wygenerowany przez inną niż CSS technologię. Najpopularniejsze rozwiązania korzystają z Flasha, javascriptu, svg, vml lub elementu canvas. Wszystkie mają swoje wady i zalety, a poniżej krótka lista tych najpopularniejszych:

@font-face, to część CSSa, która pozwala na embedowanie (osadzanie, czyli dołączanie) dowolnych fontów, które można potem definiować w CSSie. Niestety starsze wersje Internet Explorera nie obsługują fontów w najpopularniejszych formatach (IE wymaga konwersji fontu TrueType do formatu EOT). Dodatkowym ograniczeniem są licencje twórców i dystrybutorów fontów (większość nie zezwala na osadzanie na stronach WWW). Darmowe albo tanie fanty zwykle nie są na tyle dobrze zaprojektowane, aby poradzić sobie na ekranie monitora.

Grid w połączeniu z dobrze dobranym fontem zachęca do czytania i ułatwia skanowanie strony wzrokiem.

Używanie @font-face jest tak samo łatwe jak całości CSSa. Parę linijek kodu i każdy może poczuć się jak prawdziwy typograf. Jedyne, co nam potrzeba, to plik fontu, którego licencja zezwala na osadzanie na stronach WWW.

@font-face {
  font-family: 'Anonymouse Pro';
  src: url('anonymousepro.otf');
  }

h3 {
  font-family: 'Anonymouse Pro';
  }

Bez wątpienia wraz z nowymi wersjami przeglądarek i nowymi silnikami wyświetlania fontów (jak np. Direct2D używany w IE9) @font-face stanie się błogosławieństwem dla designerów, więc już dziś warto trochę z tą właściwości poeksperymentować.

Dobre i złe praktyki typograficzne

Wąskie kolumny nie powinny być justowane, a i szerokość dobierana z rozwagą. Często używane   charakterze makiety lorem ipsum jest po łacinie, a języku Polskim słowa są statystycznie dłuższe, dlatego projektowanie wąskich kolumn powinno odbywać się na prawdziwym tekście (albo chociaż z wykorzystaniem makiet z polskimi zdaniami). Dzięki temu można uniknąć wielkich przerw międzywyrazowych i przez to trudnych w czytaniu tekstów.

Justowanie wąskich kolumn może psuć przepływ tekstu i niszczyć czytelność.

W języku polskim spójniki i przysłówki powinny być sklejone z wyrazami po nich następującymi. Do sklejania dwóch słów ze sobą służy spacja nierozdzielająca, a encja (encja &nbsp;). Np. i&nbsp;potem gwarantuje, że i oraz potem będą zawsze w tej samej linii, nawet jeżeli normalna spacja pozostawiłaby i na końcu linijki.

Pierwsza kolumna zawiera zbyt duże przerwy między wyrazowe. Druga została złożona w chorągiewkę, czyli tekst jest równany do lewej, co zapewnia czytelność. Trzecia kolumna, to ten sam tekst, jednak długość wiersza zapewnia równomierne rozłożenie przerw międzywyrazowych.

Zbyt małe fonty, chociaż często kojarzą się z  profesjonalnym designem, są zwykle trudne do odczytania, a co najmniej zmniejszają prędkość i łatwość czytania. Nie bez przyczyny, prawie wszystkie przeglądarki jako domyślą wielkość fontu przyjmują 16px. Zbyt duży font również nie jest dobry.

Ładny projekt graficzny, który jednak sprawia trudności przy czytaniu długich tekstów. Za małe literki i niski kontrast szybko męczą oczy.

Kontrast powinien być optymalny, a ludzie przyzwyczajeni są raczej do czytania na jasnym tle. Strony z dużą ilością tekstu powinny unikać ciemnych projektów graficznych.

Dwa fonty to dobrany zespół trzy to tłok. Przy rozważaniu fontów należy zachowywać się rozsądnie. W większości przypadków wybór dwóch fontów jest wystarczający do osiągnięcia wszystkich celów.

Linki powinny być łatwo identyfikowalne zarówno w tekście jak i poza nim.

Czytanie długich tekstów wymaga skupienia. Bardzo często uwaga użytkownika jest rozpraszana przez reklamy wypełniające kolumny po jednej lub po obu stronach tekstów. Jeżeli zależy nam, aby użytkownik czytał teksty w całości (np. artykuły lub wpisy na blogach), należy ograniczać ilość elementów, które mogą rozpraszać uwagę.

Dobrze zaprojektowane kolumny boczne pozwalają na dodatkowe treści, nie niszcząc i nie rozpraszając uwagi użytkownika.

Źle dobrane fonty poprzez @font-face, kiedy używają antialiasingu mogą być uciążliwe dla oka. Tak samo dzieje się, jeżeli niestarannie używa się fontów we Flashu. Rozmyte litery męczą wzrok i spowalniają czytanie.

Często bardzo dobrze zaprojektowana strona z przemyślaną typografią może ucierpieć z powodu słabej jakości fontu. Na powyższym przykładzie zły hinting powoduje rozmazywanie się liter.

Pogrubienia, kursywa, kapitaliki oraz inne wyróżnienia powinny być używane samodzielnie (pogrubiona kursywa to już za dużo). Już na początku należy się zastanowić, w jakich sytuacjach, które z rodzajów wyszczególnień będzie używane.

W języku polskim mamy kilka rodzajów kresek. Ta wpisywana z klawiatury jest minusem i nie może zastępować myślnika ani pauzy. Zamiast – należy stosować &ndash;

Znaki .,?!:; piszemy zawsze bezpośrednio po wyrazie (bez spacji), ale po nich stawiamy spację. Kolejne zdania zawsze oddzielamy tylko jedną spacją.

Przykłady dobrej i złej interpunkcji.

Pierwszy akapit w rozdziale lub sekcji rozpoczynamy od lewej krawędzi. Wcięcie ma za zadanie oznaczyć początek paragrafu, jeżeli nie wynika to z odstępów pomiędzy nimi. Pierwszy paragraf nie potrzebuje takich zabiegów, bo wiadomo, gdzie jest jego początek. Dla paragrafów, które posiadają dolny margines, również nie stosujemy wcięcia.

Akapity złożone kapitalikami, a co gorsza samymi wielkimi literami są trudniejsze do czytania.

Tajemne znaki w HTMLu i CSSie, czyli encje i tagi mocy

line-height
Wysokość linii. Ściśle powiązana ze stopniem pisma. Podstawowa właściwość do określania poziomego rytmu strony.
letter-spacing
Przerwy międzyliterowe. Można zwiększać wraz ze stopniem pisma, wysokością linii lub długością kolumny. Można nawet pokusić się o imitowanie kerning. Wystarczy opakować pierwszą literę z kernowanego członu i ustawić tę właściwość ujemną.
word-spacing
Przerwy międzywyrazowe. Można próbować, ale ostrożnie.
<blockqoute>
Komentarze blokowe stosujemy dla większych fragmentów cytowanych tekstów lub wypowiedzi.
<address>
Często zapomniany tag, którego zastosowanie nie powinno być tajemnicą.
<code>
Dla kodu inline.
<strong>
<b> jest niefajne, a i nie zawsze pogrubiać trzeba, żeby zaakcentować słowo albo zdanie.
<em>
Zamiast <i>, bo czasem nie musimy używać kursywy dla wyróżnienia fragmentu tekstu.

Przydatne encje (copypastecharacter.com ułatwia używanie odpowiednich znaków):

  (&nbsp;)
Spacja nierozdzielająca. Sklejamy spójniki i przysłówki, liczby i waluty, liczby i wymiary, albo słowa, które zawsze powinny być razem. Warto dodać, że Unicode zawiera 9 różnego rodzaju spacji.
… (&hellip;)
Wielokropek. Wiele kropek, to nie to samo, co wielokropek. No i mniej miejsca zajmuje.
– (&endash;)
Pauza, w polskim stosowana jest do wtrąceń.
— (&emdash;)
Myślnik, w angielskim pisany bez spacji przed i po i służący w tym samym celu, co nasza rodzima pauza. W języku polskim, używany jako początek dialogu.
× (&times;)
Znak mnożenia. Jak piszemy wymiary (w tym rozdzielczość), to zamiast iksa, wstawiamy tę encję. Można również używać jako znaczek zamykania okienka.
© (&copy;)
Copyrighty jakoś wyglądały, skoro i tak na nie nikt uwag nie zwraca
€ i £ (&euro;&pound;)
Z pieniędzmi nie ma żartów.
° (&deg;)
Stopnie. Celsjusza na przykład.
• (&bull;)
Punktor. Do punkcji, tzn. wypunktowywania.
· (&middot;)
Kropka środkowa. Często używana do rozdzielania grup cyfr np. w numerach telefonu. Wygląda tez lepiej niż |.
→ (&rarr;&larr;)
Przydatne i ostatnio bardzo popularne encje.
§ (&sect;)
Jak ktoś lubi pisać regulaminy, to tego powinien używać często.

Co teraz?

Skomentuj
komentarzy

Dodaj komentarz