Rozmiar fontu na stronie – <font>, font-size

Rozmiar fontu (czasami nazywanego również czcionką bądź krojem pisma) na stronie internetowej można zmienić na kilka różnych sposobów.

To na który z nich się zdecydujemy w dużej mierze zależy od nas (lub systemu CMS). W większości przypadków stosuje się jednak głównie formatowanie z pomocą CSS a HTML należy do rzadkości.

Zmiana rozmiaru fontu w HTML

W HTML rozmiar fontu zmieniamy z pomocą zmiennej <font>. Za jej pomocą możemy ustawić wielkość czcionki od 1 do 7. Zaczynamy wzrost od niższej liczby (czyli 1 tekst będzie mały a 7 olbrzymi) w praktyce wygląda to następująco:

<font size="n">Wielkość n</font>

W miejsce literki „n” wpisujemy odpowiednią wartość:

See the Pen Font in HTML by Aura (@Julka85) on CodePen.

Czyli np.:

font-size: 1;
font-size: 2;
font-size: 3;

Jak widać uzyskaliśmy swoistą drabinkę, w której kolejny element ma inną wielkość.

---

Zmiana rozmiaru fontu z pomocą styli CSS

W CSS sprawa nie jest już taka łatwa. Rozmiar fontu możemy bowiem ustalać na kilka sposobów. Nie mniej jednak właściwością, która nam to umożliwia jest font-size (czyli dosłownie rozmiar fontu).

Domyślne wartości w CSS

Jednym ze sposobów określenia wielkości fontu jest skorzystanie z wielkości analogicznych jak w HTML tylko przeniesionych do CSS

See the Pen Untitled by Aura (@Julka85) on CodePen.

Przykład:

font-size: xx-small;
font-size: small;
font-size: medium;

Podwiewam, że powyższe ustawienia są czymś w rodzaju reliktu z czasów kiedy strony miały bardzo proste struktury. Obecnie bowiem nie specjalnie kojarzę by poza jakimiś kursami spotkała się z tego typu zapisem.

Samodzielne ustalenie wielkości fontu

W większości przypadku nie będziemy korzystać na stronie z domyślnych wartości. Będziemy chcieli zazwyczaj ustalić samodzielnie rozmiar naszego kroju pisma, wystarczy w tedy, że zastąpimy znacznik wartością np.:

font-size:12px;
font-size:10em;

gdzie wielkość czcionki / fontu to 12px lub 10em. W tym miejscu dobrze zapoznać się z moim wpisem na temat stosowanych wielkości, rozmiarów spotykanych na stronach internetowych. Wiedza ta może się okazać przydatna w celu uzyskania odpowiedniego rozmiaru tekstu.

Warto przeczytać:

• Pogrubienie tekstu w HTML i CSS
• Zmiana koloru tekstu