Forenklet Væske Typografi

0
8

Væske typografi er ideen om at font-size (og kanskje andre attributter av typen, som line-height) endres avhengig av skjermstørrelse (eller kanskje container spørsmål om vi hadde dem).

Kjernen lureri kommer fra viewport enheter. Du kan bokstavelig talt sette inn i viewport enheter (f.eks. font-size: 4vw), men svingninger i størrelse er så ekstrem at det er vanligvis uønsket. Det er manipulert ved å gjøre noe som font-size: calc(16px + 1vw). Men mens vi får fancy med beregninger likevel, de fleste vanlige gjennomføring endte opp med å bli en formel for å beregne vanlig engelsk:

Jeg vil at typen til å gå mellom å være 16px på en 320px skjermen for å 22px på en 1000px skjermen.

Som endte opp som dette:

html {
font-size: 16px;
}
@media-skjerm, og (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw – 320px) / 680));
}
}
@media-skjerm, og (min-width: 1000px) {
html {
font-size: 22px;
}
}

Det er i hovedsak angi et minimum og maksimum skriftstørrelsen slik typen vil ikke krympe eller vokse til noe så ekstremt. “CSS låser” var et begrep skapt av Tim Brown.

Minimum og maksimum sier du?! Vel det skjer, slik at funksjoner for disse har gjort sin vei inn i CSS-spec i form av min() og max().

Så vi kan forenkle vår fancy oppsett over med en one-liner og vedlikeholde låser:

html {
font-size: min(max(16px, 4vw), 22px);
}

Vi har faktisk ønsker kanskje å stoppe det fordi selv om både Safari (11.1+) og Krom (79+) støtter dette øyeblikket, som er like bredt som støtte vil få i dag. Uttaler hvorav, vil du sannsynligvis ønske å ta en font-size-erklæring før dette for å angi et akseptabelt fallback verdi med ingen fancy funksjoner.

Men så lenge vi flytter grenser, det er en annen funksjon for å forenkle ting enda mer: klemme()! Klem tar tre verdier, min, maks, og en fleksibel enhet (eller beregning eller hva som helst) i midten som de vil bruke i tilfelle verdien er mellom min og max. Så, vår one-liner blir enda mindre:

body {
font-size: klemme(16px, 4vw, 22px);
}

Det vil være Chrome 79+ (som ikke har ikke engang falt til stabil, men vil veldig snart).

Onkel Dave er veldig glad for at FitText er nå et par bytes i stedet for alle-med-jQuery pluss 40 flere linjer. Her er vi hiver CSS tilpasset egenskapene ved det:

Se Penn
FitText i CSS med klemme() av Dave Rupert (@davatron5000)
på CodePen.