W HTML dostępnych jest wiele czcionek, które można wykorzystać do stylizacji tekstu na stronach internetowych. Wybór odpowiedniej czcionki wpływa na czytelność, estetykę oraz odbiór całej witryny. Poniżej znajdziesz poradnik obejmujący typowe i nowoczesne czcionki, ich kategorie, metody użycia oraz praktyczne przykłady zastosowań.
Podstawowe typy czcionek w HTML
Czcionki w HTML określa się poprzez właściwość CSS font-family. Można je podzielić na kilka głównych kategorii:
- Serif – czcionki z „szeryfami” (ozdobnymi zakończeniami liter); Przykłady: Times New Roman, Georgia.
- Sans-serif – czcionki bez szeryfów – proste i minimalistyczne; Przykłady: Arial, Verdana, Helvetica.
- Monospace – wszystkie znaki mają tę samą szerokość; Przykłady: Courier New, Consolas, Monaco.
- Cursive – przypominają pismo odręczne.
- Fantasy – ozdobne i mniej typowe, często wykorzystywane przy dekoracjach.
Najczęściej wykorzystywane czcionki systemowe
Najpopularniejsze czcionki dostępne niemal na wszystkich komputerach i systemach operacyjnych to:
- Arial (sans-serif);
- Verdana (sans-serif);
- Helvetica (sans-serif);
- Tahoma (sans-serif);
- Trebuchet MS (sans-serif);
- Times New Roman (serif);
- Georgia (serif);
- Courier New (monospace);
- Monaco (monospace).
Przykłady deklaracji CSS
Poniżej prezentowane są praktyczne przykłady, jak zastosować wybrane czcionki w HTML:
<p style="font-family: Arial, sans-serif;">Tekst z czcionką Arial</p>
<p style="font-family: 'Times New Roman', serif;">Tekst z czcionką Times New Roman</p>
<p style="font-family: 'Courier New', monospace;">Kod w czcionce Courier New</p>
<p style="font-family: Verdana, sans-serif;">Nagłówek z czcionką Verdana</p>
Czcionki internetowe i niestandardowe
Nowoczesne strony często korzystają też z czcionek internetowych, takich jak Google Fonts, aby zwiększyć różnorodność stylistyczną strony. Aby użyć takiej czcionki, należy ją zaimportować (np. przez <link> w <head>) i wywołać w CSS:
<!-- Import w sekcji <head> -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Użycie w CSS -->
<p style="font-family: 'Open Sans', Arial, sans-serif;">Tekst z czcionką Open Sans</p>
Dobór czcionek – dobre praktyki
- Zaleca się zawsze podawać alternatywne czcionki oraz rodzinę ogólną – np.
font-family: Arial, Helvetica, sans-serif;, - lepiej unikać przesadnego mieszania wielu różnych fontów na jednej stronie dla spójności wizualnej i łatwiejszej nawigacji po treści,
- czcionki monospace są najlepsze do prezentacji fragmentów kodu lub danych tabelarycznych, zaś serif i sans-serif – do tekstów głównych.
Tabela najważniejszych czcionek HTML
| Nazwa czcionki | Rodzina | Zastosowanie | Przykład stylizacji |
|---|---|---|---|
| Arial | sans-serif | Tekst główny, UI | font-family: Arial, sans-serif; |
| Helvetica | sans-serif | Akcent, nowoczesny wygląd | font-family: Helvetica, Arial, sans-serif; |
| Verdana | sans-serif | Elementy nawigacyjne, mały tekst | font-family: Verdana, Geneva, sans-serif; |
| Times New Roman | serif | Artykuły, dłuższe teksty | font-family: 'Times New Roman', Times, serif; |
| Georgia | serif | Nagłówki, akapity główne | font-family: Georgia, serif; |
| Courier New | monospace | Kod, tabele, dane techniczne | font-family: 'Courier New', Courier, monospace; |
| Tahoma | sans-serif | UI, formularze | font-family: Tahoma, Geneva, sans-serif; |
| Trebuchet MS | sans-serif | Banery, tytuły | font-family: 'Trebuchet MS', Helvetica, sans-serif; |
| Monaco | monospace | Kod źródłowy | font-family: Monaco, 'Courier New', monospace; |
Podsumowanie
Dobór czcionki w HTML to nie tylko kwestia estetyki, ale również funkcjonalności i czytelności strony internetowej. Najlepiej korzystać z szeroko dostępnych czcionek systemowych lub webowych, zawsze zapewniać alternatywy, a stylizację dobierać do charakteru prezentowanej treści oraz grupy docelowej użytkowników.
