Aby podążać dalej w formatowaniu naszej strony, musimy się zaznajomić z podstawową terminologią.

Kiedy mówimy o rozmiarze w CSS odosimy sie do dystansu od samej góry czcionki drukowanej takiej jak: ‘Ś’ do samego dołu czcionki takiej jak ‘p’ czy ‘y’. Wystepować może również mała odległość określana mianem ‘leading’, którą widać na obrazie.

Obecnie nie stosuje sie już tej małej odległości. Zamiast tego mówimy o odległosci pomiędzy jedną linią tekstu a drugą, czyli tz. interlinią. W CSS stosuje znacznik line-height do określania wysokości linii tekstu.

Znacznik Vertical-align pozwala nam na ustalanie wysokości podstawy litery w stosunku do pozostałego tekstu. Używa się go w równaniach matematycznych. W poniższym tekście można było zastosować znacznik <sup>2</sup>.

E=MC2

CSS pozwala na większą kontrole przestrzenii pomiędzy poszczególnymi literami.

ZWIĘKSZONA PRZESTRZEŃ POMIĘDZY LITERAMI

letter-spacing: 0.5em; word-spacing: 0.5em

Polepszanie czytelności

Proszę zobaczyć jak ciężko czyta się poniższy tekst.

Linie tekstu zbyt

krótkie powodują,
że nasze oczy czytające
od lewej do prawej
zaczynają się szybka męczyć

Linie nie powinny być krótsze niż
40 – 60
znaków lub 8-10 słów.

Jesli linie są dłuższe, wymagaja one zwiększenie odległości pomiędzy nimi, co znacznie polepszy czytelność tekstu.

Odległość pomiędzy liniami jest domyślnie ustawiona na 20% wielkości czcionki.
CSS pozwala na zmianę tych ustawień w dowolny sposób. Jeśli chcesz używać wielkości relatywnych, syntaks wygląda następująco:

font-size: 1em; line-height: 1.5em

W przypadku wielkości absolutnych:

font-size: 11px; line-height: 16px

Kontrast

Czytanie na komputerze różni się od czytania gazety czy książki, ponieważ komputer posiada inną jasność ekranu. Róznica pomiędzy białym tłem i czarną czcionką jest o dużo większa niż w przypadku innych mediów.

Zmienijszenie tego kontrastu przyczyni się do tego, że nasi czytelnicy nie będą męczyć swojego wzroku i będą częściej powracać na naszą witrynę.