Jak zmienić rozmiar czcionki w HTML?

Aby zmienić rozmiar czcionki w HTML, wykorzystuje się przede wszystkim stylowanie CSS, zarówno bezpośrednio w znacznikach (tzw. style inline), jak i w stylach zewnętrznych lub sekcji <style> umieszczonej w nagłówku dokumentu. Najczęściej stosowaną właściwością do tego celu jest font-size.

Podstawowe metody zmiany rozmiaru czcionki w HTML

Style inline (bezpośrednie stylowanie znaczników)

Możesz dodać atrybut style bezpośrednio do dowolnego znacznika zawierającego tekst, np. <span>, <p>, <div>, i ustawić w nim font-size na żądaną wartość. Przykład:
```
<p style="font-size: 24px;">Nagłówek o wielkości 24 pikseli</p>
<span style="font-size: small;">Tekst mały</span>
<span style="font-size: large;">Tekst duży</span>
```
Wartość font-size może przyjmować zarówno konkretne jednostki (np. px, em, %, pt), jak i predefiniowane słowa kluczowe:
- xx-small,
- x-small,
- small,
- medium,
- large,
- x-large,
- xx-large.
Przykład z użyciem słowa kluczowego:
```
<span style="font-size: x-large;">Bardzo duża czcionka</span> 
```

Stylowanie przez klasy CSS

Bardziej elastycznym rozwiązaniem jest tworzenie klas CSS, które można wielokrotnie wykorzystywać w różnych miejscach dokumentu:

<style>
.duza-czcionka { font-size: 32px; }
.mala-czcionka { font-size: 0.8em; }
.procentowa-czcionka { font-size: 120%; }
</style>
<p class="duza-czcionka">To jest duża czcionka.</p>
<div class="mala-czcionka">To jest mniejsza czcionka.</div>
<span class="procentowa-czcionka">Tekst o 20% większy od normalnego.</span>

Zewnętrzny arkusz stylów CSS

W dużych projektach najwygodniejszym rozwiązaniem jest umieszczenie reguł stylowania w zewnętrznym pliku CSS. Przykład z pliku style.css:

h1 { font-size: 2em; }
p { font-size: 14px; }
.podtytul { font-size: 1.2em; }

W kodzie HTML:

<link rel="stylesheet" href="style.css">
<h1>Nagłówek</h1>
<p>Zwykły tekst</p>
<div class="podtytul">Podtytuł</div>

Jednostki rozmiaru czcionki w CSS

px (piksele) – najczęściej stosowane, umożliwiają precyzyjną kontrolę wyglądu, np. font-size: 16px;;
em, rem – są to jednostki względne. em odnosi się do rozmiaru czcionki rodzica, natomiast rem do rozmiaru czcionki ustawionego w elemencie <html>. Przykład: font-size: 1.5em; (150% wielkości czcionki bazowej);
pt (punkty) – tradycyjna jednostka druku, rzadziej używana na stronach internetowych. Przykład: font-size: 12pt;;
% (procent) – rozmiar czcionki stanowi procent wartości odziedziczonej po elemencie rodzicu. Przykład: font-size: 120%;;
Słowa kluczowe – określają rozmiar w sposób orientacyjny, np. small, medium, large.

Praktyczne przykłady zastosowania

<!-- Przykład 1: Zmienianie rozmiaru w różnych paragrafach -->
<p style="font-size: 12px;">To jest tekst o wielkości 12 pikseli.</p>
<p style="font-size: medium;">To jest tekst średni.</p>
<p style="font-size: x-large;">To jest bardzo duża czcionka.</p>

<!-- Przykład 2: Klasa CSS dla wielu elementów -->
<style>
.naglowek { font-size: 2em; }
.przyklad { font-size: 1.1rem; color: navy; }
</style>
<h2 class="naglowek">Powiększony nagłówek</h2>
<div class="przyklad">Tekst z niestandardową wielkością czcionki i kolorem.</div>

Różnice między jednostkami na przykładzie

Jednostka	Kod css	Efekt
px	font-size: 18px;	Dokładnie 18 pikseli
em	font-size: 1.5em;	1,5x wielkości bazowej czcionki
rem	font-size: 1.2rem;	1,2x wielkości czcionki elementu html
%	font-size: 120%;	120% wielkości czcionki rodzica
pt	font-size: 12pt;	Około 16 pikseli (w zależności od dpi)
słowo	font-size: large;	Zgodnie z domyślną skalą przeglądarki

Dobre praktyki

W nowych projektach warto stosować jednostki względne (em, rem, %) – gwarantują lepszą responsywność i skalowalność tekstu,
używaj klas CSS do wielokrotnego wykorzystania stylów, co ułatwia zarządzanie wyglądem strony,
unikaj przestarzałego znacznika <font>, który nie jest już zalecany do zmiany rozmiaru czcionki.

Podsumowanie

Do zmiany rozmiaru czcionki najczęściej stosuje się własność CSS font-size, przekazując wartość w odpowiednich jednostkach. Można to robić bezpośrednio w znacznikach lub za pomocą klas CSS, obszarów <style>, bądź zewnętrznych arkuszy stylów. Wybór konkretnej metody i jednostek zależy od potrzeb projektu i preferencji dotyczących responsywności oraz zarządzania kodem.

Jak zmienić rozmiar czcionki w HTML?