--=REKLAMA=--

Czcionka i typografia

Z Joomla!WikiPL

(Przekierowano z Poradnik:Czcionka i typografia)

Czytelność tekstu należy do wymagających szczególnej dbałości aspektów stron internetowych. Tekst na ekranie monitora jest trudny w czytaniu.

Kolorystyka: najczytelniejszym jest czarny tekst na białym tle. Kontrast między tekstem i tłem jest największy.

Czcionki są - po kolorze - najprawdopodobniej jedną z podstawowych właściwości strony.

Czcionek jest tysiące, nie wszystkie są zainstalowane w każdym komputerze, choćby dlatego, że większość z nich jest płatna. Aby uniknąć sytuacji, że strona nie jest poprawnie wyświetlana w przeglądarce użytkownika z powodu braku wymaganych czcionek, CSS dostarcza projektantom stron rozwiązania, które pozwala przeglądarce w takim przypadku dobrać odpowiednie czcionki w zastępstwie. W regule definiującej krój czcionki (font-family) ustawia się kilka krojów czcionki. Jako pierwszy umieszcza się krój najbardziej preferowany, po nim inne, któe mogą być zastosowane w zastępstwie, a jako ostatnią umieszcza się jedną z pięciu rodzin:

  • serif - rodzina czcionek proporcjonalnych szeryfowych
  • sans-serif - rodzina czcionek proporcjonalnych bezszeryfowych
  • monospace - rodzina czcionek nieproporcjonalnych (równej szerokości)
  • cursive - rodzina czcionek naśladujących pismo odręczne (nie mylić z pismem pochyłym)
  • fantasy - rodzina czcionek dekoracyjnych, ozdobnych, fantazyjnych

W poniższej tabeli przedstawiono przykłady różnych czcionek. Możesz zobaczyć, jak je wyświetli przeglądarka, której używasz (jeśli są na Twoim komputerze):

'sans-serif': zwykłe czcionki bez szeryfów
Arial, sans-serifZażółć gęślą jaźń
Helvetica, sans-serifZażółć gęślą jaźń
Gill Sans, sans-serifZażółć gęślą jaźń
Lucida, sans-serifZażółć gęślą jaźń
Helvetica Narrow, sans-serifZażółć gęślą jaźń
Tahoma, sans-serifZażółć gęślą jaźń
Verdana, sans-serifZażółć gęślą jaźń
sans-serifZażółć gęślą jaźń
'serif': zwykłe czcionki z szeryfami
Times, serifZażółć gęślą jaźń
Times New Roman, serifZażółć gęślą jaźń
Palatino, serifZażółć gęślą jaźń
Bookman, serifZażółć gęślą jaźń
New Century Schoolbook, serifZażółć gęślą jaźń
serifZażółć gęślą jaźń
'monospace': czcionki o ustalonej szerokości
Andale Mono, monospaceZażółć gęślą jaźń
Courier New, monospaceZażółć gęślą jaźń
Courier, monospaceZażółć gęślą jaźń
Lucidatypewriter, monospaceZażółć gęślą jaźń
Fixed, monospaceZażółć gęślą jaźń
monospaceZażółć gęślą jaźń
'cursive': czcionki naśladujące pismo odręczne
Comic Sans, Comic Sans MS, cursiveZażółć gęślą jaźń
Zapf Chancery, cursiveZażółć gęślą jaźń
Coronetscript, cursiveZażółć gęślą jaźń
Florence, cursiveZażółć gęślą jaźń
Parkavenue, cursiveZażółć gęślą jaźń
cursiveZażółć gęślą jaźń
'fantasy': czcionki dekoracyjne, do tytułów, etc.
Impact, fantasyZażółć gęślą jaźń
Arnoldboecklin, fantasyZażółć gęślą jaźń
Oldtown, fantasyZażółć gęślą jaźń
Blippo, fantasyZażółć gęślą jaźń
Brushstroke, fantasyZażółć gęślą jaźń
fantasyZażółć gęślą jaźń


Style czcionek

Czcionki należące do jednej rodziny mają różne style, typowo jest to bold i italic, często również bold italic, rzadziej small-caps i w niewielu przypadkach extra-light/extra-bold lub stretched/condensed.


Poniższa tabela pokazuje liczne style czcionek. Jeśli na swoim komputerze masz zainstalowanych wiele rodzajów czcionek, kilka poniższych rzędów może wyglądać tak samo.

reguła szeryfowe bezszeryfowe
Styl
font-style: normal Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-style: italic Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-style: oblique Zażółć gęślą jaźń… Zażółć gęślą jaźń…
Grubość (ciężar)
font-weight: 100 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 200 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 300 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: normal Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 500 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 600 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: bold Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 800 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-weight: 900 Zażółć gęślą jaźń… Zażółć gęślą jaźń…
Wariant
font-variant: normal Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-variant: small-caps Zażółć gęślą jaźń… Zażółć gęślą jaźń…
Rozciągnięcie (kondensacja)
font-stretch: ultra-condensed Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: extra-condensed Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: condensed Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: semi-condensed Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: normal Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: semi-expanded Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: expanded Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: extra-expanded Zażółć gęślą jaźń… Zażółć gęślą jaźń…
font-stretch: ultra-expanded Zażółć gęślą jaźń… Zażółć gęślą jaźń…

W CSS3 istnieje dodatkowy styl: 'font-effect', który nadaje czcionce wygląd engraved lub embossed.

Rozmiar czcionek

Rozmiar czcionki powinien zapewniać jej czytelność na ekranie. Z doświadczenia potwierdzonego badaniami wynika, że odpowiednią dla większości użytkowników Internetu jest czcionka 12-punktowa.


Skalowanie tekstu

Rozmiar tekstu na dobrze zaprojektowanej stronie nigdy nie powinien być stały. CSS dostarcza rozmiarów relatywnych, które umożliwiają użytkownikom dostosowanie rozmiarów czcionki do swoich potrzeb


Przeczytaj