Responzivní fonty

Pokud řešíte na webu fonty a nechcete ručně všechno nastavovat pro každý modul a bod zlomu zvlášť, mám pro vás jednoduché řešení – responzivní fonty, které si můžete vygenerovat přímo pro svůj web:

• https://utopia.fyi/type/calculator/

Tenhle boží kalkulátor vám totiž ušetří HODNĚ času a energie.

Jak to funguje?

Celkem jednoduše (když se v tom člověk rozkouká):

Minimální velikost

1. zvolíte si minimální šířku obrazovky, pro kterou to chcete řešit (všechny menší budou mít tuhle hodnotu a responzivní už dál nebudou) – bez mučení přiznávám, že weby pod 300px šířky neřeším,
2. velikost fontu, která bude ta nejmenší,
3. scale je násobek, který se uplatní na jednotlivé “stupně” velikostí (a počet stupňů si zvolíte v tabulce pod tím) – vysvětlení níže.

Maximální velikost

1. zvolíte si maximální šířku obrazovky, pro kterou to chcete řešit (všechny větší budou mít tuhle hodnotu). Tady dávám velikost layoutu, který někdy dělám i 1440px (někdy i full width, ale to jsou výjimky),
2. velikost fontu, která bude ta nejmenší
3. scale je násobek, který se uplatní na jednotlivé “stupně” velikostí (a počet stupňů si zvolíte v tabulce pod tím) – vysvětlení níže. Ano, můžete mít pro desktop jiný.

Stupňování velikostí textu

V tabulce si zvolíte, kolik velikostí budete používat na webu.

1. úroveň 0 je pro normální text,
2. úroveň 1 a vyšší je pro nadpisové texty (nejvyšší (tady je to úroveň 5), je pro H1, druhá nejvyšší pro H2, atd…),
3. úroveň -1 a nižší jsou pro různé doplňkové texty.

Já nechávám tento základ (tj. 5 + 1 + 2), někdy 1 nadpisovou velikost vynechám.

Princip je takový, že podle scale (násobku) se odpočítají zbylé texty na základně předchozí velikosti tj. (z případu výše):

• stupeň 0 má na desktopu velikost 20px;
• stupeň 1 má na desktopu velikost 20px * 1.25 = 25px.
• stupeň 2 má na desktopu velikost 25px * 1.25 = 31.25px.
• a tak dále.
• u záporných stupňů je to naopak, tam se to dělí, tedy stupeň -1 je 20px / 1.25 = 16px.
• stejně tak pro mobil.

A kde je respozivivita?

Ta je schovaná právě ve vygenerovaném CSS, které používá funkci clamp, min a max. Díky tomu nastavíte fonty jednou a budou automaticky responzivní.

/* @link https://utopia.fyi/type/calculator?c=300,15,1.2,1440,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.651rem, 0.6118rem + 0.2091vi, 0.8rem);
  --step--1: clamp(0.7813rem, 0.7237rem + 0.307vi, 1rem);
  --step-0: clamp(0.9375rem, 0.8553rem + 0.4386vi, 1.25rem);
  --step-1: clamp(1.125rem, 1.0099rem + 0.614vi, 1.5625rem);
  --step-2: clamp(1.35rem, 1.1913rem + 0.8465vi, 1.9531rem);
  --step-3: clamp(1.62rem, 1.4038rem + 1.1529vi, 2.4414rem);
  --step-4: clamp(1.944rem, 1.6525rem + 1.5547vi, 3.0518rem);
  --step-5: clamp(2.3328rem, 1.9428rem + 2.0799vi, 3.8147rem);
}

Pozn. Pokud tu hledáte tu základní velikost, kterou jste navolili (v našem případě 20px), tak i ta se počítá od základní velikosti, jakou má font v prohlížečích v základu, tj. 16px. Takže i ta se tady promítne relativně.

Kam s tím?

Ideálně někam do CSS. Pokud máte dobrý builder, který má globální nastavení a umožní vám do velikosti dát proměnou, tak si prostě pro zvolenou velikost vložíte CSS proměnnou, např. pro body by to bylo:

var(--step-0)

Pokud tuto možnosti nemáte, tak musíte někam vložit CSS, které to nastaví globálně (např. do šablony) – CSS si samozřejmě upravte podle toho, kde jakou velikost fontů potřebujete:

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
body, table, a, li, td, th { font-size: var(--step-0); }
caption { font-size: var(--step--1); }

A to je vše, responzivní fonty máte tímto vyřešené. Stejný proncip je použit i na tomto webu, jak můžete vidět ze zdrojového kódu.