Vereenvoudigde Vloeistof Typografie

0
8

Vloeistof typografie is het idee dat de font-grootte (en misschien andere kenmerken van het type, zoals line-height) veranderen afhankelijk van de grootte van het scherm (of misschien container query ‘ s als we die al hebben).

De kern bedrog komt uit viewport eenheden. U kunt letterlijk stel het type in de viewport eenheden (bijv. font-size: 4vw), maar de schommelingen in omvang zijn zo extreem dat het meestal ongewenst. Dat is geknoeid door het doen van iets als font-size: calc(16px + 1vw). Maar terwijl we krijgen zin in met berekeningen hoe dan ook, de meest gebruikte implementatie uiteindelijk wordt een vergelijking voor het berekenen van normaal nederlands:

Ik wil het type om te gaan tussen 16px op een 320px scherm te 22px op een 1000px scherm.

Die eindigde zoals deze:

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

Dat is in wezen het instellen van een minimale en maximale grootte van het lettertype, zodat de soort niet krimpen of groeien tot iets te extreem. “CSS sloten” is een term bedacht door Tim Brown.

Minimale en maximale zegt u?! En zo gebeurt het dat functies voor deze hebben hun weg in de CSS-specificatie in de vorm van min() en max().

Zo kunnen we vereenvoudigen onze mooie setup boven met een one-liner en onderhouden van de sloten:

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

We eigenlijk zou willen om daar te stoppen, want hoewel zowel Safari (11.1+) en Chrome (79+) ondersteunen deze op het huidige moment, dat is zo breed als ondersteuning zal krijgen vandaag. Spreken van die, je zou waarschijnlijk willen een slip font-size verklaring voor deze tot een aanvaardbaar fallback-waarde met geen fancy functies.

Maar zolang we de grenzen op te zoeken, er is nog een functie om dingen te vereenvoudigen zelfs meer: klem()! Klem duurt drie waarden, een min, max, en een flexibele eenheid (of berekening of wat dan ook) in het midden die het zal gebruiken in het geval dat de waarde tussen de min en max. Dus, onze one-liner wordt nog kleiner:

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

Dat zal Chrome 79+ (wat niet is nog niet eens gedaald tot stabiele, maar zal zeer binnenkort).

Oom Dave is erg blij dat FitText is nu een paar bytes in plaats van alles-van-jQuery plus 40 lijnen. Hier is ons opspannen CSS aangepaste eigenschappen in het:

Zie de Pen
FitText in CSS met klem() door Dave Rupert (@davatron5000)
op CodePen.