Trik pro nastavení responsivity písma

Všimli jste si někdy, že weby, které se zaměřují na dobrou čitelnost textů mění velikost písma podle viewportu? I Material Design 3 navrhuje jako výchozí velikost písma na desktopu md.sys.typescale.body-large.size = 16 pt a pro mobily md.sys.typescale.body-medium.size = 14 pt.

Vývojář James Fisher navrhuje namísto skokové změny velikosti fontu pracovat se vzorcem, který k výchozí velikosti písma přičte čtvrt procenta šířky viewportu. Čím užší displej, tím menší písmo.

:root {
  font-size: calc(1rem + 0.25vw);
}

Martinův oblíbený trik je u mobilních rozhraní použít zúžený řez písma, aby se na řádek vešlo více písmen. Pro tyhle účely je skvělé pracovat s variabilními fonty, u nichž lze měnit šířku znaků plynule.

(Obrázek z upoutávky: Masjid Pogung Dalangan z Unsplash)