Aby powiększyć tekst w HTML, należy skorzystać z kaskadowych arkuszy stylów (CSS) i użyć właściwości font-size. Pozwala ona precyzyjnie ustawić rozmiar wyświetlanego tekstu zarówno w pojedynczym elemencie, jak i globalnie na stronie. Istnieje kilka sposobów określania wielkości tekstu, m.in. za pomocą pikseli, jednostek względnych (em, rem), procentów, punktów, a także słownych określeń wielkości.
Najważniejsze sposoby ustawiania wielkości tekstu
Określanie rozmiaru w pikselach (px)
Piksele są jedną z najpopularniejszych jednostek, dają stałą wielkość tekstu niezależnie od wielkości rodzica.
<p style="font-size: 24px;">To jest tekst o wielkości 24 piksele.</p>
Stosując CSS:
p { font-size: 24px; }
Względne jednostki em/rem
- em – wielkość zależy od rozmiaru czcionki elementu nadrzędnego;
- rem – wielkość względem czcionki ustawionej w dokumencie (root element).
<p style="font-size: 2em;">To jest tekst dwa razy większy od domyślnego rozmiaru rodzica.</p>
<p style="font-size: 1.5rem;">Tu rozmiar zależy od ustawienia w znaczniku html.</p>
Stosując CSS:
p.duzy { font-size: 2em; }
Ustalanie wielkości w procentach
Wielkość procentowa zależy od rozmiaru tekstu rodzica.
<p style="font-size: 120%;">To jest tekst o 20% większy od domyślnego.</p>
Punkty (pt)
Jednostka historycznie stosowana głównie w druku.
<p style="font-size: 14pt;">Tekst o wielkości 14 punktów.</p>
Słowne wartości
CSS umożliwia stosowanie predefiniowanych wartości:
- xx-small, x-small, small, medium, large, x-large, xx-large,
- larger, smaller (względem rodzica).
<p style="font-size: large;">To jest większy tekst.</p>
<p style="font-size: x-large;">To jest jeszcze większy tekst.</p>
Praktyczne przykłady wykorzystania
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykłady powiększenia tekstu</title>
<style>
.przyklad1 { font-size: 18px; }
.przyklad2 { font-size: 1.5em; }
.przyklad3 { font-size: 130%; }
.przyklad4 { font-size: x-large; }
.przyklad5 { font-size: 16pt; }
</style>
</head>
<body>
<p class="przyklad1">Ten tekst ma 18 pikseli.</p>
<p class="przyklad2">Ten tekst ma 1,5em.</p>
<p class="przyklad3">Ten tekst ma 130% wielkości rodzica.</p>
<p class="przyklad4">Ten tekst ma "x-large".</p>
<p class="przyklad5">Ten tekst ma 16 punktów.</p>
</body>
</html>
Dodatkowe porady
- Hierarchia styli – stosując style globalnie (np. dla całego body lub html), można automatycznie powiększyć tekst na całej stronie;
html { font-size: 18px; }
- Responsywność – lepiej korzystać z jednostek względnych (em, rem, procenty) – tekst łatwiej adaptuje się wtedy do różnych ekranów;
- Dostępność – użytkownicy z problemami wzroku często korzystają z opcji powiększania tekstu w przeglądarkach. Jednostki względne zwiększają kompatybilność z tymi rozwiązaniami;
- Zmiana wielkości liter – przydatna może być również właściwość text-transform, umożliwiająca zamianę całego tekstu na wielkie litery, małe litery lub kapitaliki. Nie powiększa ona fizycznie znaków, ale zmienia ich „krój”.
Podsumowanie
Aby powiększyć tekst w HTML, najwygodniej zastosować właściwość font-size w CSS, dobierając jednostkę do potrzeb projektu. Dla elastycznych, nowoczesnych stron rekomenduje się używanie jednostek względnych. Styl można przypisać zarówno pojedynczemu elementowi, jak i większej części strony lub całemu dokumentowi. Odpowiedni dobór jednostek i wartości zapewni czytelność oraz estetykę tekstu dla każdego użytkownika.
