Dokumentacja CSS z przykładami: Rozmiar czcionki

Q: Jak zmienić rozmiar czcionki w CSS?

Ustaw na elemencie właściwość font-size: p { font-size: 18px; }. Przyjmuje długości (px, rem, em), procenty i słowa kluczowe, takie jak large.

Q: Jak zmienić rozmiar czcionki w HTML?

Za pomocą CSS, w arkuszu stylów albo w atrybucie style: . Stary znacznik jest w HTML5 przestarzały i nie należy go używać.

Q: Używać px, em czy rem do rozmiaru czcionki?

Do większości tekstu używaj rem: skaluje się z ustawieniem czcionki w przeglądarce użytkownika i nie mnoży się. Używaj em, gdy rozmiar ma podążać za rodzicem, na przykład dla ikony w przycisku. px nie podąża za domyślnym rozmiarem czcionki ustawionym przez czytelnika w przeglądarce, więc unikaj go dla tekstu głównego.

Q: Dlaczego mój rozmiar czcionki w em ciągle rośnie?

Bo em jest względne wobec rozmiaru czcionki rodzica, więc zagnieżdżone elementy się mnożą: 1.2em wewnątrz 1.2em to 1.44 raza rozmiar bazowy. Przejdź na rem, które zawsze jest względne wobec elementu głównego.

Jak ustawić rozmiar czcionki w CSS

Właściwość font-size ustala rozmiar tekstu. Ustaw ją na dowolnym elemencie, a każdy fragment tekstu w nim odziedziczy ten rozmiar, chyba że dziecko ustawi własny.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

Żeby zmienić rozmiar czcionki w HTML, nadal używasz CSS. Dodaj atrybut style () albo regułę w arkuszu stylów. Znacznik  z lat 90. jest przestarzały i nie ma miejsca na nowoczesnej stronie.

Jednostki, które przyjmuje font-size

Wartość	Przykład	Względem czego
`px`	`16px`	Niczego: stały rozmiar
`rem`	`1.25rem`	Rozmiaru czcionki elementu głównego `<html>` (domyślnie 16px)
`em`	`1.2em`	Rozmiaru czcionki elementu rodzica
`%`	`120%`	Rozmiaru czcionki rodzica, jak `em` (`120%` to `1.2em`)
Słowo kluczowe	`large`	Gotowej skali wokół domyślnego `medium`
Względne słowo kluczowe	`smaller`, `larger`	O jeden stopień od rozmiaru rodzica
Obszar widoku	`4vw`	Szerokości obszaru widoku (4% z niej)
Funkcja	`clamp(1rem, 4vw, 2rem)`	Płynnie między minimum a maksimum

Wpisz wartość i zobacz rozmiar obliczony przez przeglądarkę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj 20px, 2em, 150%, x-large, smaller i 5vw. Niepoprawna wartość, na przykład big, jest ignorowana, a tekst zachowuje ostatni poprawny rozmiar.

rem a em: różnica, która potrafi zaskoczyć

rem zawsze patrzy na element główny, więc 1.2rem ma ten sam rozmiar, gdziekolwiek się pojawi. em patrzy na rodzica, więc przy zagnieżdżaniu elementów rozmiary się mnożą:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

Najbardziej wewnętrzne pudełko em ma 16 × 1.2 × 1.2 × 1.2 = 27.648px. Najbardziej wewnętrzne pudełko rem wciąż ma 19.2px. To mnożenie przydaje się w komponencie, którego części mają skalować się razem, a wszędzie indziej jest niespodzianką. Wszystkie jednostki długości porównuje strona o jednostkach.

Słowa kluczowe: od xx-small do xx-large

Bezwzględne słowa kluczowe odpowiadają stałej skali wokół medium, które jest równe domyślnemu rozmiarowi użytkownika (16px, chyba że go zmienił):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

Przy domyślnych 16px small to 13px, large to 18px, x-large to 24px, a xx-large to 32px. Słowa kluczowe wystarczą do szybkiej pracy, ale system projektowy zwykle potrzebuje własnej skali w rem.

Płynny rozmiar czcionki z clamp()

Nagłówek, który ma rosnąć razem z ekranem, ale nigdy nie być za mały ani za duży, to jedno wywołanie clamp(): minimum, preferowany rozmiar, który się skaluje, i maksimum.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

W podglądzie o szerokości 800px 5vw to 40px, co mieści się między 24px a 48px, więc ta wartość wygrywa. Płynną typografię szczegółowo omawia strona o clamp.

Rozmiar bazowy dla całej strony

Ustaw rozmiar raz na body (albo html), a wszystko inne ustawiaj względem niego:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

Unikaj sztuczek z html { font-size: 62.5%; }, chyba że potem każdy rozmiar na stronie ustawiasz w rem, i nigdy nie ustawiaj stałego rozmiaru w px na html: nadpisuje on rozmiar czcionki wybrany przez czytelnika w przeglądarce, od którego niektórzy zależą, żeby w ogóle móc czytać.

Uwagi o dostępności

Tekst główny o rozmiarze 16px lub większym to dobre minimum do czytania na ekranie.
Rozmiary w rem i em podążają za domyślnym ustawieniem czcionki użytkownika. Rozmiary w px podążają za powiększeniem strony, ale nie za tym ustawieniem.
Na iPhonie Safari powiększa stronę, gdy aktywujesz pole z rozmiarem czcionki poniżej 16px. Nadaj polom formularza font-size: 1rem lub więcej, żeby tego uniknąć.

Częste błędy

Używanie znacznika . Jest przestarzały. Użyj właściwości font-size.
Zagnieżdżone rozmiary w em, które rosną albo maleją bez kontroli. Używaj rem, chyba że chcesz mnożenia.
Stały rozmiar w px na html. Nadpisuje własne ustawienie czcionki czytelnika.
Zapominanie, że nagłówki mają już rozmiar. <h1> ma domyślnie 2em, więc potrzebujesz h1 { font-size: 1em; }, jeśli ma mieć rozmiar tekstu głównego.
Same jednostki obszaru widoku. font-size: 3vw staje się nieczytelne na telefonie i ogromne na szerokim monitorze. Umieść to w clamp().

Najczęściej zadawane pytania

Jak zmienić rozmiar czcionki w CSS?

Ustaw na elemencie właściwość font-size: p { font-size: 18px; }. Przyjmuje długości (px, rem, em), procenty i słowa kluczowe, takie jak large.

Jak zmienić rozmiar czcionki w HTML?

Za pomocą CSS, w arkuszu stylów albo w atrybucie style: . Stary znacznik  jest w HTML5 przestarzały i nie należy go używać.

Jaki jest domyślny rozmiar czcionki w przeglądarkach?

16px dla tekstu body, chyba że użytkownik zmienił go w ustawieniach przeglądarki. Tyle domyślnie wynoszą 1rem i słowo kluczowe medium.

Używać px, em czy rem do rozmiaru czcionki?

Do większości tekstu używaj rem: skaluje się z ustawieniem czcionki w przeglądarce użytkownika i nie mnoży się. Używaj em, gdy rozmiar ma podążać za rodzicem, na przykład dla ikony w przycisku. px nie podąża za domyślnym rozmiarem czcionki ustawionym przez czytelnika w przeglądarce, więc unikaj go dla tekstu głównego.

Dlaczego mój rozmiar czcionki w em ciągle rośnie?

Bo em jest względne wobec rozmiaru czcionki rodzica, więc zagnieżdżone elementy się mnożą: 1.2em wewnątrz 1.2em to 1.44 raza rozmiar bazowy. Przejdź na rem, które zawsze jest względne wobec elementu głównego.

Powiązane zagadnienia