Font Size – Rozmiar Czcionki

Rozmiar czcionki CSS

font-size

Rozmiar czcionki możemy dostosowywać poprzez własność font-size (ang. rozmiar czcionki).

font-size: 16px;

rozmiar czcionki font size 12px 16px kurs css

Wysokość czcionki to nie jest wysokość pojedynczego znaku a rozpiętość pomiędzy znakiem najwyżej, a najniżej położonym.

wysokosc czcionki font size 72px kurs css

Rozmiar czcionki możemy definiować przy użyciu różnych rodzajów jednostek, absolutnie oraz relatywnie.

font-size: 16px;
font-size: 12pt;
font-size: 1em;
font-size: 100%;

Pojawiło nam się sporo nowych jednostek, jak to teraz ugryźć?

px
Rozmiar czcionki, czyli jej wysokość możemy ustalić w px. Piksele są nam już chyba dobrze znane, dlatego chyba już nie musimy dalej ich tłumaczyć. Jest to najpopularniejszy sposób ustalania wysokości czcionki.

p { font-size: 24px; }
p { font-size: 18px; }
p { font-size: 16px; }
p { font-size: 12px; }

Tekst w rozmiarze 24px

Tekst w rozmiarze 18px

Tekst w rozmiarze 16px

Tekst w rozmiarze 12px

pt
Rozmiar czcionki możemy również określić przy pomocy jednostek pt (ang. point – punkt). Punkt jest to miara drukarska i równa jest 1/72 cala. Przy 12pt wysokość czcionki podczas druku będzie wynosić 12/72 cala, czyli 0,42cm. Niezależnie od stosowanej drukarki wysokość ta zawsze będzie stała.

No dobrze, ale jak to? Tu mamy piksele, czyli miara w kwadracikach, a tu z drugiej strony mamy fizyczne miary długości w postaci punktów. W jaki sposób punkty przeliczane są na piksele? Punkt to 1/72 cala, większość ekranów ma rozdzielczość 72ppi (72 piksele na cal), czyli można by przyjąć, że dla ekranu, który ma taką rozdzielczość 1pt = 1px. Kiedyś tak nawet przeliczano te jednostki, jednak przyjęto, że punktem odniesienia do przeliczania tych jednostek będzie 96ppi. A to nam skomplikowało wszystko, bo teraz nie możemy napisać, że 16px=16pt.

Uwaga trochę matematyki! Teraz, żeby przeliczyć pt na px musimy zastosować pewien przelicznik. Nie jest to kurs z matematyki, dlatego po prostu napiszemy co następuje już bez głębszego tłumaczenia. Pt na piksele zamieniamy przy pomocy przelicznika 1.33.

12pt = 16px

I odwrotnie piksele na punkty zamieniamy przelicznikiem 0,75. Tu jeszcze takie równanie jakby ktoś miał ochotę to zrozumieć.

px na pt piksele na punkty kurs css

Nie musimy sami przeliczać tych jednostek, ktoś już pomyślał o tym i zrobił to za nas pxtoem.com

Uwaga! Jednostek wyrażonych w pt używamy tylko i wyłącznie do druku. Jak chcemy np. dostarczyć możliwość wydrukowania strony internetowej, to wtedy w oddzielnym pliku CSS definiujemy rozmiary czcionki za pomocą pt.

Jednostki px i pt wyrażają wysokość czcionki w jednostkach absolutnych, tzn. stałych, niezmiennych. Raz ustalona wysokość za pomocą tych jednostek będzie stała i nie zmieni się, chyba że sami ją zmienimy. Przejdźmy teraz do jednostek relatywnych, tzn. zmiennych w odniesieniu do innego elementu html. Jednak zanim o nich powiemy musimy się dowiedzieć wobec jakiego elementu będą się zmieniały.

p { font-size: 18pt; }
p { font-size: 14pt; }
p { font-size: 12pt; }
p { font-size: 9pt; }

Tekst w rozmiarze 18pt

Tekst w rozmiarze 14pt

Tekst w rozmiarze 12pt

Tekst w rozmiarze 9pt

Jednostki, które poznaliśmy do tej pory, czyli px oraz pt odnosiły się do stałego rozmiaru czcionki. Raz ustalony rozmiar w tych jednostkach jest niezmienny niezależnie od zewnętrznych warunków. Takie jednostki zwane są jednostkami absolutnymi, oprócz nich występują jeszcze jednostki relatywne.

em
Najbardziej rozpowszechnioną jednostką relatywną, dzięki której możemy określić rozmiar czcionki są tzw. em. Nazwa ich wzięła się najprawdopodobniej od szerokości dużej litery M (przynajmniej większość źródeł tak podaje). W zasadzie obecnie nie ma to tak dużego znaczenia, bo sposób działania jednostek em nie zbyt dużo wspólnego z pochodzeniem ich nazwy.

Rozmiar czcionki ustalany w oparciu o jednostki em jest relatywny w stosunku do rodzica elementu. Hmm, ale co to znaczy? Rodzicem wszystkich elementów html jest element <html>. Domyślna wartość rozmiaru czcionki dla tego elementu w większości przeglądarek to 16px, wtedy wartość 1em to 16px.

16px (rozmiar czcionki rodzica)
1em = 16px
0.5em = 8px
2em = 32px
12px (rozmiar czcionki rodzica)
1em = 12px
0.5em = 6px
2em = 24px

Jak widzicie jednostki em działają na zasadzie procentów. Główną zaletą używania jednostek relatywnych jest możliwość zmiany rozmiaru czcionki w jednym miejscu. Wyobraźmy sobie, że na stronie zadeklarowaliśmy rozmiar czcionki w px, i zrobiliśmy to w 50-ciu różnych miejscach. Jakbyśmy chcieli teraz zmienić rozmiar czcionki, musielibyśmy robić w każdym miejscu z osobna. Używając jednostek relatywnych możemy to zrobić tylko w jednym miejscu, np. zmieniając wartość domyślną czcionki elementu <html>, bądź elementu <body>.

Znaną praktyką jest ustalenie rozmiaru czcionki głównego rodzica, czyli elementu <html> na poziomie 62.5%, czyli na poziomie 10px (16px*62.5% = 10px), tak żeby swobodnie można było przeliczać wartości w jednostkach em.

html { font-size: 62.5%; } /* 62.5%*16px = 10px */
h1 { font-size: 2.2em; } /* 22px */
h2 { font-size: 1.8em; } /* 18px */
p { font-size: 1.6em; } /* 16px */

Używanie jednostek em do określania rozmiaru czcionki jest całkiem wygodne, jednak nie jest pozbawione wad. Główną wadą jest to, że jednostki te ustalane są zawsze w oparciu o rodzica. Jeśli rodzicowi nadamy wartość rozmiaru czcionki w em, to wartość relatywna rozmiaru czcionki dziecka będzie nadal odnosić się do rodzica, ale tym razem do jego zmienionej wartości. Może to stwarzać sporo problemów.

/* html (16px) */
body { font-size: 2em; } /* 32px */
p { font-size: 2em; } /* 64px */
<html>
  <body>
    <p>Tekst wyrażony w em.</p>
  <body>
</html>

%
Procenty są również jednostkami relatywnymi i działają na podobnej zasadzie jak jednostki em. Również odnoszą się do rodzica w ustalaniu rozmiaru czcionki.

16px (rozmiar czcionki rodzica)
100% = 16px
50% = 8px
200% = 32px
12px (rozmiar czcionki rodzica)
100% = 12px
50% = 6px
200% = 24px

Procenty również posiadają tą samą wadę co jednostka em, wartość zawsze ustalana jest w oparciu o rodzica, dlatego przy większej ilości zagnieżdżeń można łatwo się pogubić.