Typografia na stronach internetowych

Aby dobrze zrozumieć czym jest typografia na stronach wirtualnych, trzeba wiedzieć czym jest w świecie realnym. Rozwój nowych możliwości w stosowaniu czcionki na stronie www coraz bardziej zbliża typografię na stronie internetowej do drukowanej czy prasowej. Jednakże możliwości w świecie wirtualnym dalej są ograniczone, a świadomość typografii nie tak duża jak powinna.

 

Czym jest typografia?

Typografia jest projektowaniem i stosowaniem krojów pisma jako środka komunikacji. Typografia ma swoje korzenie w odręcznie pisanych literach jednak de facto zapoczątkował ją Gutenberg. Typografia obejmuje wszystko, od kaligrafii poprzez czcionki cyfrowe i czcionki na stronach internetowych. Obejmuje ona także projektantów czcionek, którzy tworzą nowe formy liter, a także projektantów i kaligrafów, którzy wykorzystują litery w ramach swoich projektów. Mówiąc obrazowo typografia to litery, cyfry, znaki, wyrazy, zdania, linie, akapity, kolumny i białe przestrzenie (whitespace).

Wszystkie te elementy należy brać pod uwagę, po to, aby całość tworzyła harmonijne połączenie, służące tekstowi oraz użytkownikowi.

Elementy typografii

Kroje czcionek i czcionki: Kroje czcionek są większymi zbiorami (rodziną) fontów np. Helvetica Regular, Helvetica Italic, Helvetica Black, and Helvetica Bold. Czcionki są jednym stylem w obrębie tej rodziny (np. Helvetica Bold).

Klasyfikacja rodzajów czcionek: Są to duże grupy krojów opartych na ogólnych klasyfikacjach. Na stronach internetowych, korzysta się z trzech rodzajów:

• serif
• sans-serif
• monospace

Każdy krój pisma składa się z różnych elementów, które odróżniają go od innych krojów. Na stronach internetowych występują tylko dwa kroje serif i sans-serif tzn. czcionki szeryfowe i bez szeryfowe.

Podstawowe pojęcia:

• kerning – przestrzeń pomiędzy poszczególnymi literami (odpowiednik w CSS letter-spacing)
• tracking – przestrzeń pomiędzy grupami liter
• leading – przestrzeń pomiędzy wierszami
• measure – długość linii tekstu
• wyrównanie – umieszczenie tekstu do lewej, do prawej, wyśrodkowany lub wyrównany
• ligatura – litery przemieszczone bliżej siebie tak, że zachodzą na siebie
• odstęp (rag) – nierówna pionowa krawędź bloku tekstu nazywana jest odstępem.
• dzielenie wyrazów (Hyphenation) – jest to dodanie myślnika (-) na końcu linii, aby pomóc uniknąć problemów z czytelnością lub aby wyrównanie tekstu wyglądało lepiej.
• wdowy i sieroty – wdowa jest krótką linią lub jednym słowem na końcu akapitu. Sierota to słowo lub krótka linia na początku lub na końcu kolumny, która jest oddzielona od reszty akapitu.

Źródło: http://collegiumpapricum.com/2010/03/typografia-na-stronach-internetowych/

Typografia na stronie internetowej

Zachowanie pewnych zasad, w trakcie projektowania strony, pozwoli na zachowanie przejrzystego, łatwego w przyswojeniu tekstu. W przypadku stron internetowych ograniczeni jesteśmy przez składnię HTML i CSS, dlatego nie można skupić się na wszystkich pojęciach, które wymieniłem. Dla przykładu styl letter-spacing odpowiada za przestrzenie między literami, może on przyjmować wartości dodanie i ujemne, odpowiada więc za kerning i ligaturę. Nie polecam stosowania tego stylu na stronie internetowej.

Trzymanie się wszystkich wymienionych pojęć nie jest trudne, ani czasochłonne jeżeli zwracamy na nie uwagę od początku projektu. Przedstawię każde z nich, które ma wpływ na typografię na stronie www.

Długość linii tekstu (measure)

Dla oka czytelnika, długie lub krótkie linie mogą być męczące i rozpraszają. Długie działanie zakłóca rytm bo czytelnik ma trudności ze znalezieniem następnego wiersza. Wąska długość linii tekstu jest akceptowalna tylko w przypadku, krótkiego tekstu.

 

Przestrzeń pomiędzy wierszami (leading)

Odgrywa dużą rolę w czytelności tekstu. Prawidłowo rozmieszczone linie ułatwiają czytelnikowi śledzenie czcionki i poprawią ogólny wygląd tekstu. Wiele czynników wpływa na przestrzeń między wierszami: krój czcionki, wielkość czcionki, grubość, długość linii tekstu, odstępy między wyrazami. Im długość linii tekstu szersza tym większa przestrzeń pomiędzy wierszami. I odwrotnie im większa czcionka tym mniejsza przestrzeń jest potrzebna.

Odstęp (rag)

Podczas projektowania strony ustalamy, do której strony ma być wyrównany tekst. Gdy będzie to tekst niejustowany równany do lewej lub prawej należy pamiętać aby ustawić odpowiedni odstęp (nierówna strona tekstu). Zły odstęp, może rozproszyć czytającego. Dobry odstęp ma „miękkie” nierówności, bez linii, które są zbyt długie lub za krótkie. Nie ma możliwości kontrolowania odstępu za pomocą CSS, tak aby osiągnąć dobry. Trzeba ręcznie dostosować szerokość bloku tekstu. U mnie wygląda to prawie dobrze.

Wdowy i sieroty

Wdowa jest krótką linią lub jednym słowem na końcu akapitu. Sierota to słowo lub krótka linia na początku lub na końcu kolumny, która jest oddzielona od reszty akapitu. Wdowy i sieroty tworzą niewygodne odstępy wpływając na czytelność. Można ich uniknąć poprzez dostosowanie wielkości czcionki, przestrzeni między wierszami, długości linii tekstu, odstępów między literami lub wpisując ręcznie podziały wiersza.

Skala

Zawsze twórz według skali nie ważne czy jest to tradycyjna skala czy stworzona przez Ciebie.. Skala jest ważna, ponieważ ustanawia hierarchię typograficzną, który poprawia czytelność i tworzy harmonię i spójność w tekście.

Czym formujemy tekst na stronie internetowej?

Aby zapanować nad czcionką na stronie internetowej i zbudować poprawną typografię z pomocą przychodzą kaskadowe arkusze styli – CSS. Kształtowanie tekstu z pomocą CSS, daje nam wiele możliwości, ale formatowanie nigdy nie powinno być przesadzone. Dlatego, ponieważ tekst powinien być pomocny dla SEO, kompatybilny z różnymi przeglądarkami i dobrze wyglądający.

1. Font-family

Większość ludzi zakłada, że używać można tylko kilku „bezpiecznych” (web-safe) czcionek przy wykonywaniu stron internetowych. Choć jest to dobra praktyka, w rzeczywistości mamy więcej możliwości. Z font-family, jesteśmy w stanie określić preferowaną czcionkę, potem zastępcze w przypadku gdy na komputerze użytkownika brakuje pierwszej czcionki, a następnie ogólny font-family w przypadku nie ma żadnej z tych czcionek.

Na przykład, załóżmy, że chcemy użyć czcionki Helvetica na naszej stronie. Choć niemal wszystkie komputery Mac wyposażono w tą czcionkę natywnie, nie wszystkie Windowsy muszą ja mieć. Dlatego powinniśmy grać bezpiecznie, korzystając z drugiej czcionki w przypadku użytkownik, który nie ma czcionki Helvetica na swoim komputerze. Arial jest dość podobny do Halvetica jest to też standardowa czcionka dla Windows i Mac.

W pliku CSS powinniśmy zapisać tak:

body {font-family: Helvetica, Arial, sans-serif;}

Na komputerze nie posiadającym czcionki Halvetica, przeglądarka użyje Arial, a jeśli nie ma Arial (mało prawdopodobne) to wykorzysta domyślną czcionkę sans-serif. Wspomniałem wcześniej, że są trzy rodzaje rodzin czcionek wykorzystywanych na stronach internetowych serif, sans-serif i monospace. Na którąś z nich musisz się zdecydować jeden krój czcionki, a w ramach niego maksymalnie 2 rodzaje czcionki.

Czcionki szeryfowe, jak Georgia czy Garamond, mają małe linie na końcach liter.

To jest czcionka szeryfowa. 

Czcionki bezszeryfowe (sans-serif) takie jak Arial czy Verdana są bez małych linii.

To jest czcionka bezszeryfowa.

Czcionka monospace, jak Courier są czcionkami, które mają dokładnie taką samą szerokość.

To jest czcionka monospace.

2. Font-size

Font-size robi dokładnie to co mówi, kontroluje wielkość czcionki. Jednak istnieje kilka możliwości, których można użyc do określenia wielkości.

Piksele

Piksele są najczęściej używanym sposobem określenia rozmiaru czcionki. Najczęstsze rozmiary czcionek w pikselach przeznaczonych dla contentu strony to 12 do 14 pikseli.

Em

Jednostka em oparta jest na rozmiarze czcionki kontenera nadrzędnego albo rozdzielczości przeglądarki, w którym widzimy stronę. czcionka umieszczona w tym znaczniku faktycznie zmienia wielkość w zależności od rozdzielczości. Osobiście nie używać tego pomiaru, chociaż jest drugim najbardziej popularnym sposobem określenia rozmiaru czcionki.

Wielkość czcionki 1 em.

Procenty

Procentowe ustalenie wielkości czcionki również bazuje na rozmiarze czcionki kontenera nadrzędnego lub rozmiarze przeglądarki i zmienia się w zależności od wielkości ekranu.

Wielkość czcionki 62,5 procenta.

3. Font-style

Font-style odpowiada za emfazy czcionki, głównie odpowiada za pisanie czcionki kursywą

italic – Ten font-style to italic.

4. Font-weight

Font-weight kontroluje grubość czcionki czcionki. Można po prostu ustawić go na bold, lub nadać mu bardziej konkretną wartość.

normal – font-weight wartość normal
bold – font-weight wartość bold
bolder - font-weight wartość bolder
lighter - font-weight wartość lighter
100 do 900 - font-weight wartość 100
100 do 900 - font-weight wartość 900

Należy pamiętać, że nie wszystkie czcionki mają taki sam poziom grubości, więc możliwe jest, że nie będzie widać różnicy między bold a bolder lub pomiędzy 200, a 400, gdy określamy wartość font-weight.

5. Letter-spacing

Letter-spacing kontroluje odległość pomiędzy literami.

Ten paragraf ma normalny letter-spacing.

Ten paragraf ma letter-spacing o wartości 1px

6. Line-height

Line-height lub przestrzeń pomiędzy wierszami, kontroluje odległości pomiędzy dwiema liniami tekstu.

Ten paragraf ma wartość line-height o wartości 14px. Ten paragraf ma wartość line-height o wartości 14px. Ten paragraf ma wartość line-height o wartości 14px. Ten paragraf ma wartość line-height o wartości 14px.

Ten paragraf ma wartość line-height o wartości 22px. Ten paragraf ma wartość line-height o wartości 22px. Ten paragraf ma wartość line-height o wartości 22px. Ten paragraf ma wartość line-height o wartości 22px. Ten paragraf ma wartość line-height o wartości 22px.

7. Kolor

Kolor zmienia kolor czcionki i przyjmuje wartości zarówno szesnastkowe lub jedną z 16  kolorów, takich jak: aqua, czarny, niebieski, fuksja, szary, zielony, limonka, bordowy, granatowy, oliwkowy, fioletowy, czerwony, srebrny , turkusowy, biały i żółty. Można również przyjąć wartości RGB. Więcej informacji tutaj.

Ten paragraf ma kolor czerwony.

Ten paragraf ma kolor zielony.

8. Text-align

Text-align odpowiada za wyrównanie tekstu i po której stronie będzie odstęp (rag). Przyjmuje wartości: left, right, center i justyfy

Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej.

Ten paragraf ma wyrównanie do prawej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej. Ten paragraf ma wyrównanie do lewej.

Ten paragraf ma wyrównanie do środka. Ten paragraf ma wyrównanie do środka.Ten paragraf ma wyrównanie do środka.Ten paragraf ma wyrównanie do środka.Ten paragraf ma wyrównanie do środka.

Ten paragraf jest wyjustowany. Ten paragraf jest wyjustowany. Ten paragraf jest wyjustowany. Ten paragraf jest wyjustowany. Ten paragraf jest wyjustowany.

Pamiętaj że tylko elementy blokowe takie jak paragrafy czy div’y mogą mieć ustaloną wartość  text-align. Dlatego text-align nie zadziała dla znacznika span ponieważ jest element inline.

9. Text decoration

Używany głównie dla linków, kontroluje style linii tekstu.

Underline - Ten paragraf jest podkreślony.

Overline - Ten paragraf jest nadkreśłony.

Line-through - Ten paragraf jest przekreślony.

None - Ten pargraf jest normalny (lub none)

10. Text-transform

Text-transform jest bardzo pomocny do sterowania kapitalizacją tekstu, bez konieczności zmieniania go ręcznie w treści. W zasadnie trzeba stosować text-transform: uppercase zamiast kapitalizować, każdą literę. Przyjmuje wartości uppercase, lowercase, capitalization i none.

Uppercase - Ten paragraf jest pisany dużymi literami, nawet jeśli napiszesz go małymi literami.

Lowercase -  Ten paragraf jest pisany małymi literami, nawet jeśli napiszesz go dużymi literami.

Capitalize - w tym paragrafie, każdy wyraz zaczyna się od dużej litery.

None - Ten paragraf jest normalny.

11. Word-spacing

Word-spacing odpowiada za odległość pomiędzy dwoma wyrazami.

Ten paragraf ma wartość 10px. Ten paragraf ma wartość 10px. Ten paragraf ma wartość 10px. Ten paragraf ma wartość 10px. Ten paragraf ma wartość 10px.

12. Text-indent

Text-indent odpowiada za wcięcie pierwszej linii paragrafu.

Ten paragraf ma wcięcie (text-indent) o wartości 20px. Ten paragraf ma wcięcie (text-indent) o wartości 20px. Ten paragraf ma wcięcie (text-indent) o wartości 20px. Ten paragraf ma wcięcie (text-indent) o wartości 20px. Ten paragraf ma wcięcie (text-indent) o wartości 20px.

Podsumowanie

Abyście dobrze mnie zrozumieli powyższe przedstawione informacje traktuje jako wskazówki. Co prawda niektóre z wymienionych zasad powinno się zachowywać zawsze np. długość linii tekstu (masure) względem przestrzeni między wierszami (leading). Te dwie wartości to podstawa czytelnej czcionki na stronie internetowej, od nich zaczynamy układać typografię na stronie.

Wszystkie powyżej przedstawione zasady oraz sposoby formatowania teksty powinny przysłużyć się użytkownikowi nie odwrotnie. Mimo tego, że typografia jest dziełem niezauważalnym warto nad nią pracować czasem dla własnej satysfakcji, a w większości przypadków dla spotęgowania odbioru strony. Wraz z grafiką i copywriting’iem wygląd i układ tekstu będzie pomagał zapamiętać przekaz strony czy hasło reklamowe.