Tag <font> był kiedyś popularnym sposobem formatowania tekstu w HTML, pozwalając na bezpośrednią kontrolę rozmiaru, rodzaju i koloru czcionki. Obecnie jest zdeprecjonowany i niezalecany do użycia – zamiast niego stosuj style CSS dla lepszej semantyki, dostępności i elastyczności.
Historia tagu <font> – dlaczego był popularny?
W początkach web developmentu, gdy CSS nie był jeszcze standardem, tag <font> umożliwiał szybkie formatowanie treści bez zewnętrznych arkuszy stylów. Wprowadzony w HTML 3.2, oferował atrybuty takie jak size, face i color, co pozwalało na prostą personalizację tekstu bezpośrednio w kodzie HTML.
Przykładowy kod z tamtych czasów pokazywał podstawowe zastosowanie:
<font size="1">Czcionka o wartości bezwzględnej równej 1</font><br>
<font size="2">Czcionka o wartości bezwzględnej równej 2</font><br>
<font size="3">Czcionka o wartości bezwzględnej równej 3</font><br>
Rozmiary size wahały się od 1 (najmniejszy) do 7 (największy), z wartością domyślną 3.
Podobnie działał atrybut face do określania kroju pisma:
<font face="Georgia, Times, serif">Tekst powinien być napisany czcionką Georgia</font><br>
<font face="'Times New Roman', serif">Tekst powinien być napisany czcionką 'Times New Roman'</font><br>
<font face="Arial, sans-serif">Tekst powinien być napisany czcionką Arial</font><br>
Atrybut color pozwalał na kolory nazwami, heksadecymalnie lub RGB:
<font color="red">Tekst napisany w kolorze czerwonym (red)</font><br>
<font color="#FF0000">Tekst napisany w kolorze czerwonym (#FF0000)</font><br>
<font color="#3300CC">Tekst napisany w losowym kolorze (#3300CC)</font><br>
Te przykłady działały w starszych przeglądarkach, ale brak gwarancji dostępności fontów lokalnie powodował niespójne wyświetlanie.
Dlaczego <font> jest zdeprecjonowany – problemy i ograniczenia
Od HTML 4.01 tag <font> uznano za przestarzały, ponieważ:
- brak semantyki – formatowanie wizualne mieszało się z treścią, co utrudniało utrzymanie kodu i dostępność dla czytników ekranu;
- niespójność – fonty zależały od instalacji na urządzeniu użytkownika; jeśli
Arialnie był dostępny, przeglądarka wybierała domyślny; - konflikt z CSS – nowoczesny web opiera się na separacji treści (HTML) od prezentacji (CSS), co czyni
<font>zbędnym.
W HTML5 tag ten jest ignorowany przez walidatory, a przeglądarki nadal go renderują, ale często wyświetlają ostrzeżenia w narzędziach deweloperskich.
Nowoczesne alternatywy: CSS zamiast <font>
Zamiast <font> używaj właściwości CSS, takich jak font-size, font-family, color i font-weight, stosowanych poprzez klasy CSS lub zewnętrzne arkusze stylów (unikaj nadużywania stylów inline).
Aby szybko porównać stare atrybuty z ich nowoczesnymi odpowiednikami, skorzystaj z poniższej tabeli:
Atrybut <font> |
Co robił | Właściwość CSS | Przykład CSS |
|---|---|---|---|
size |
ustawiał rozmiar tekstu | font-size |
font-size: 1.25rem; |
face |
określał krój pisma | font-family |
font-family: 'Georgia', serif; |
color |
ustawiał kolor tekstu | color |
color: #FF0000; |
1. Zmiana rozmiaru czcionki (font-size)
Zamiast size stosuj wartości względne (em, rem, px) lub słowa kluczowe:
<span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span><br>
<span style="font-size: small">Czcionka o rozmiarze small</span><br>
<span style="font-size: 20px">Czcionka o rozmiarze 20px</span><br>
<span style="font-size: 1.5em">Czcionka o rozmiarze 1.5em (względny)</span>
To zapewnia responsywność – np. rem skaluje się względem elementu root dokumentu.
2. Wybór kroju pisma (font-family)
Definiuj stosy fontów z fallbackami (bezpiecznymi odpowiednikami) oraz rodzinami generycznymi:
<span style="font-family: Arial, sans-serif">Czcionka Arial</span><br>
<span style="font-family: 'Courier New', monospace">Czcionka 'Courier New'</span><br>
<span style="font-family: 'Times New Roman', serif">Czcionka 'Times New Roman'</span><br>
<span style="font-family: Verdana, sans-serif">Czcionka Verdana</span>
Dla web‑safe fontów lub Google Fonts zawsze dodawaj rodziny generyczne: serif, sans-serif, monospace.
3. Kolor czcionki (color)
Proste i potężne przykłady definiowania koloru tekstu:
<p style="color: red;">Tekst czerwony (nazwa)</p>
<p style="color: #008000;">Tekst zielony (hex)</p>
<p style="color: rgb(51, 0, 204);">Tekst niebieski (RGB)</p>
Możesz też użyć HSL dla precyzyjnej kontroli odcienia i nasycenia, np. hsl(120, 100%, 50%).
4. Pogrubienie i warianty (font-weight, font-style)
<p style="font-weight: bold;">Pogrubiony tekst (bold)</p>
<p style="font-weight: 700;">Pogrubiony 700</p>
<p style="font-style: italic;">Pochyły tekst</p>
Tagi semantyczne jak <strong> i <em> są lepsze dla dostępności, bo nadają znaczenie, a nie tylko styl.
5. Zaawansowane – właściwości fontu w CSS
Dla zmiennych fontów (variable fonts) używaj osi takich jak font-weight (wght) czy font-style (slnt). Przykład deklaracji:
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
font-weight: 400;
}
p {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Praktyczny przykład – kompletna strona z formatowaniem
Oto pełna strona demonstrująca migrację z <font> na CSS oraz różnicę w strukturze i semantyce:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatowanie czcionek – Stare vs Nowe</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
line-height: 1.6;
}
.stare {
/* Symulacja <font> */
background: #fff;
padding: 15px;
margin: 10px 0;
border-left: 5px solid #ccc;
}
.nowe {
background: #fff;
padding: 15px;
margin: 10px 0;
border-left: 5px solid #007bff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.maly { font-size: 12px; color: #666; }
.duzy { font-size: 24px; font-weight: bold; color: #007bff; }
.custom { font-family: 'Courier New', monospace; color: #28a745; }
</style>
</head>
<body>
<h1>Stare formatowanie z <font> (niezalecane)</h1>
<div class="stare">
<font size="2" face="Arial" color="blue">Stary tekst: mały, niebieski Arial.</font>
</div>
<h1>Nowoczesne formatowanie CSS (zalecane)</h1>
<div class="nowe">
<p class="maly">Nowy tekst: mały, szary.</p>
<p class="duzy">Nowy tekst: duży, pogrubiony, niebieski.</p>
<p class="custom">Nowy tekst: Courier, zielony, monospace.</p>
</div>
</body>
</html>
Ten kod jest responsywny, semantyczny i łatwy w utrzymaniu w nowoczesnych przeglądarkach.
Najlepsze praktyki i pułapki
Projektując typografię w sieci, pamiętaj o kluczowych zasadach:
- unikaj inline styles w większych projektach – korzystaj z klas i zewnętrznych arkuszy CSS dla lepszej skalowalności i kontroli;
- testuj responsywność – stosuj funkcje jak
clamp(1rem, 2vw, 2rem), aby rozmiary płynnie dostosowywały się do szerokości ekranu; - dostępność (WCAG) – sprawdzaj kontrast kolorów i preferuj jednostki
rem/emzamiastpxdla lepszego zoomowania; - Google Fonts – dołączaj przez
<link>w<head>i konfigurujfont-display(np.swap) dla lepszego UX; - migracja legacy kodu – narzędzia jak Prettier i lintery HTML pomagają automatycznie zastąpić
<font>odpowiednimi regułami CSS.