Förenklad Vätska Typografi

0
42

Vätska typografi är tanken att font-size (och kanske andra attribut av typ, som linje-höjd) förändras beroende på skärmens storlek (eller kanske behållare frågor om vi hade haft dem).

Kärnan knep kommer från virtuella enheter. Du kan bokstavligen in typ i virtuella enheter (exempelvis font-size: 4vw), men variationerna i storlek är så extremt att det oftast önskvärt. Det är manipulerat genom att göra något som font-size: calc(16px + 1vw). Men medan vi får lust med beräkningar hur som helst, den vanligaste tillämpningen slutade med att en ekvation för att beräkna ren svenska:

Jag vill typ att gå mellan att vara 16px på en 320px skärmen för att 22px på en 1000px skärmen.

Som slutade så här:

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

Det är i huvudsak fastställa ett lägsta och högsta teckenstorlek så typ kommer inte att krympa eller växa till något som är alltför extrem. “CSS-lås” var en term som myntades av Tim Brown.

Lägsta och högsta säger du?! Jo det händer så att funktioner för dessa har gjort sin väg in i CSS-spec i form av min() och max().

Så vi kan förenkla vår fantasi setup ovan med en one-liner och upprätthålla lås:

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

Vi som faktiskt kan tänkas vilja stoppa det, för trots att både Safari (11.1+) och Krom (79+) har stöd för detta just nu, som är lika bred som stöd kommer att få idag. På tal om det, skulle du förmodligen vill glida en font-size förklaring innan denna att ställa en godtagbar återgång värde med ingen lust funktioner.

Men så länge vi är tänja gränser, det är en annan funktion för att förenkla saker och ting ännu mer: klämma()! Clamp tar tre värden, en min, max och en flexibel enhet (eller beräkning eller vad som helst) i mitten som kommer att användas i de fall värdet är mellan min och max. Så, vår one-liner blir ännu mindre:

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

Det kommer att bli Chrome 79+ (som inte har inte ens sjunkit till stabil men kommer väldigt snart).

Farbror Dave är mycket glad över att FitText är nu några byte istället för allt-i-jQuery plus 40 fler linjer. Här är oss slänga CSS egna egenskaper på det:

Se Pennan
FitText i CSS med klämma() av Dave Rupert (@davatron5000)
på CodePen.