CSS font-size

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

font-size to właściwość CSS służąca do określania rozmiaru czcionki elementu HTML. W projektowaniu stron, szczególnie dostosowanych do urządzeń mobilnych, ważne jest stosowanie jednostek względnych, np. %, em lub rem, ponieważ lepiej skalują się względem ustawień użytkownika i rozmiaru ekranu.

Przykład użycia

body {
  font-size: 100%;
}

h1 {
  font-size: 150%;
}

p {
  font-size: 1rem;
}

Wartość 100% zwykle odpowiada domyślnemu rozmiarowi czcionki przeglądarki, najczęściej 16 px. Wartość 150% oznacza 1,5 razy większy tekst niż rozmiar odziedziczony po elemencie nadrzędnym.

Jednostki względne i bezwzględne

Do określania rozmiaru tekstu można używać m.in.:

  • % — procent rozmiaru odziedziczonego,
  • em — względem rozmiaru czcionki elementu nadrzędnego,
  • rem — względem rozmiaru czcionki elementu głównego html,
  • px — piksele, jednostka bardziej sztywna,
  • mm, cm, pt — jednostki fizyczne, rzadko stosowane w typowym CSS dla ekranów.

Znaczenie w responsywności

Na egzaminie INF.03 często przyjmuje się, że dla stron dostosowanych do urządzeń mobilnych należy stosować wartości względne, np. procenty, a nie jednostki bezwzględne. Dzięki temu tekst może lepiej dopasowywać się do różnych ekranów i ustawień przeglądarki.

Nie należy stosować znaczników <big> i <small> jako podstawowej metody formatowania wyglądu strony. Wygląd powinien być definiowany w CSS.