wielkość fontu, czcionki elektronicznej na stronie z pomocą CSS, HTML

Jak zmienić rozmiar fontu na stronie internetowej z pomocą HTML i CSS?

Czas czytania: < 1 minut

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.

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


Zmiana rozmiar fontu w 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
ExyaEBW
by Aura (@Julka85)
on CodePen.

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

Dużo częściej Font na stronach są określane np.:

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

gdzie wielkość czcionki to 12px lub 10em. W tym miejscu dobrze zapoznać się z moim wpisem na temat stosowanych wielkości, rozmiarów spotykanych na stronach internetowych.