Vloeiende responsive typografie met clamp CSS

Met vloeiende typografie kun je lettertypegrootten definiëren die zich aanpassen voor gemakkelijk lezen in elk schermformaat.

Het concept van vloeiende typografie in webontwikkeling bestaat al jaren, en ontwikkelaars moesten vertrouwen op verschillende workarounds om het te laten werken in de browser. Met de nieuwe CSS clamp-functie is het creëren van vloeiende typografie nog nooit zo eenvoudig geweest.

Gewoonlijk, wanneer we responsieve typografie implementeren, veranderen waarden op specifieke breekpunten. Ze zijn expliciet gedefinieerd. Dus ontwerpers geven vaak typografische waarden (lettergroottes, regelhoogtes, letterafstanden, enz.) voor twee, drie, of zelfs meer schermgroottes, en ontwikkelaars implementeren deze vereisten meestal door 1 media query (of meerdere media queries) toe te voegen om specifieke breekpunten te bereiken.

Responsive tekst vloeiende typografie nieuw in WordPress 6.1

Responsive tekst met vloeiende typografie is eindelijk ingevoerd en nieuw in WordPress 6.1. Ik schreef er al 2 jaar geleden over. Enfin, lees verder.

Wat doet de CSS clamp Functie voor responsief webdesign

De CSS clamp functie neemt drie waarden –

• een minimum grens
• een voorkeurswaarde
• en een maximum grens

Clamp klemt de huidige waarde tussen die grenzen. De voorkeurswaarde wordt gebruikt om de waarde tussen de grenzen te bepalen. De voorkeurswaarde omvat gewoonlijk viewport eenheden, percentages, of andere relatieve eenheden om het vloeiende effect te bereiken. Deze functie is zo robuust en flexibel dat ze naast de vaste waarden zelfs wiskundige functies en uitdrukkingen kan aanvaarden, en waarden van de attr functie. In CSS ziet het er zo uit:

clamp([waarde-min], [waarde-voorkeur], [waarde-max]);

font-size: [value-fallback]; /* Fallback waarde */
font-size: clamp([value-min], [value-preferred], [value-max]);

font-size: clamp(16px, 1vw + 0.5rem, 22px);

voorbeeld Clamp functie en CSS

Je stelt eerst een maximum en minimum-waardes in voor de viewport, dus de breedte van je beeldscherm en de minimum en maximumgrootte van je font.

Voorbeeld clamp instellen voor paragraph tekst

• Op maximaal 400 pixels schermbreedte is je font: 14 pixels. Als het scherm 360 pixels breed is is je fontgrootte ook 14 pixels groot.
• Op maximaal 1200 pixels schermbreedte is je font: 20 pixels. Als het scherm 1500 pixels breed is is je fontgrootte ook 20 pixels groot.
• Daar tussenin wordt de fontgrootte vanzelf berekend. Is het scherm bijvoorbeeld 800 pixels groot dan is je font 17 pixels groot.

Dit resulteert in de volgende code:

p {font-size: clamp(0.875rem, 0.75vw + 0.688rem, 1.25rem);
line-height: clamp(1.4rem, 1.2vw + 1.1rem, 2rem);}

Het werkt heel goed voor je typografie. Alleen moet je wel weten hoe clamp en css en classes werkten:

Handleiding typografie class span maken in WordPress

Lees verder om beter grip te krijgen op Clamp.

Verschillende typografische waarden uitgelegd

Hoewel typografische elementen er misschien net zo goed uitzien als op de ontwerpen, kan dat voor sommige elementen niet het geval zijn op viewportbreedtes die dicht bij de breekpunten liggen. Zoals we al weten, zijn er veel verschillende apparaten en schermgroottes beschikbaar voor gebruikers buiten die welke in het ontwerp aan bod komen. Het toevoegen van meer tussenliggende breekpunten en style overrides zou het probleem kunnen oplossen, maar we lopen het risico de code complexer te maken, meer randgevallen te creëren, en de code minder duidelijk en onderhoudbaar te maken.

Vloeiende typografie schaalt soepel tussen de minimum en maximum waarde afhankelijk van de viewport breedte. Het begint meestal met een minimum waarde en het behoudt de constante waarde tot een specifiek schermbreedte punt waarop het begint te verhogen.

Zodra het een maximumwaarde bereikt op een andere schermbreedte, houdt het die maximumwaarde vanaf daar aan. We zullen in dit artikel zien dat vloeiende typografie ook in de omgekeerde volgorde kan verlopen – beginnen met een maximumwaarde en eindigen met een minimumwaarde.

Deze aanpak vermindert of elimineert de fijnafstelling voor specifieke breekpunten en andere randgevallen. Hoewel het meestal wordt gebruikt in typografie, werkt deze aanpak ook voor marge, padding, tussenruimte, enz.

Merk op hoe in het volgende voorbeeld, de titel tekst soepel schaalt en hoe het er goed uitziet op elke viewport breedte. Merk ook op hoe de inhoud nog steeds de responsieve typografie behoudt, en de waarde verandert alleen op een breekpunt.

Meer over em, rem en responsieve typografie

Meer over em, rem eenheden en responsieve typografie

Voorbeelden Clamp, webbrowsers en toepassingen

Deze functie kan worden toegepast op elk attribuut dat een geldig waardetype accepteert, zoals lengte, frequentie, tijd, hoek, percentage, getal, en andere, dus het kan worden gebruikt voor andere zaken naast typografie en dimensionering.

De browser ondersteuning voor klem functie zit boven de 95% dus het wordt al goed ondersteund. Voor niet-ondersteunde desktop browsers zoals Internet Explorer, is het voldoende om een fallback waarde te leveren, omdat de niet-ondersteunde browsers de hele font-size expressie zullen negeren als ze de clamp functie niet kunnen verwerken.

Laten we de CSS clamp functie gebruiken en deze vullen met de volgende waarden:

• Minimum waarde – gelijk aan de minimum lettergrootte.
• Maximale waarde – gelijk aan de maximale lettergrootte.
• Voorkeurswaarde – bepaalt hoe vloeiende typografie schaalt – begin- en eindpunten van vloeiend gedrag en veranderingssnelheid. Deze waarde zal afhangen van de viewport grootte, dus we zullen de viewport breedte eenheid vw gebruiken.

Laten we eens kijken naar het volgende voorbeeld en de lettergrootte instellen op een waarde tussen 16px en 22px. De volgende font-size heeft een ingestelde minimum van 16px en een maximum van 22px. De huidige waarde wordt bepaald door de viewport breedte eenheid of, nauwkeuriger gezegd, 1% van de huidige viewport breedte als die waarde tussen de minimum en maximum grens ligt. Dit moet nog aangevuld worden met een rem waarde.

font-size: clamp(16px, 1vw + 0.5rem, 22px);

Links over Clamp en vloeiende typografie en tekst

https://modern-fluid-typography.vercel.app/
https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
https://fluidtypography.com

See the Pen CSS min(), CSS max() and CSS clamp() Example by Paige Niedringhaus (@paigen11) on CodePen.

REM Waarden voor clamp berekenen

Je kan hier de REM Waarden voor clamp berekenen:

https://fluidtypography.com

Beste waarde voor clamp, typografie en tekst

Ik raad aan om een veelvoud van 16 pixels te nemen voor het instellen van je clamp settings. 16 pixels komt overeen met 1rem, de standaardwaarde voor typografie in je webbrowser. Dit vind ik een mooi uitgangspunt voor je klamp-instellingen:

Voor je P (paragraaf) ziet je clamp-code er dan zo uit:

p {
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1.125rem);
line-height: clamp(1.4rem, 0.8vw + 1.2rem, 1.8rem);
}

Een stapje kleiner kan ook:

Voor je P (paragraaf) ziet je clamp-code er dan zo uit:

p {
font-size: clamp(0.875rem, 0.25vw + 0.813rem, 1rem);
line-height: clamp(1.4rem, 0.4vw + 1.3rem, 1.6rem);
}

Responsive typografie instellen met CSS

Lees de handleiding typografie class span maken in WordPress

Extra: FitText plugin

Ook leuk maar geen CSS of clamp, maar meer Javascript. FitText doet voor lettertypen wat FitVids en Adaptive Images doen voor visuele elementen. Het past automatisch de grootte van uw kopteksten en displaytekst aan op basis van de grootte van het scherm dat bezoekers hebben. FitText is een gratis en eenvoudig te gebruiken plugin.

http://fittextjs.com

Voorbeeld van clamp waardes

See the Pen VW Calculator by Lakshmi (@lakshmiR) on CodePen.

Clamp berkenen in browser:
https://codepen.io/pprg1996/pen/yLONLPv

https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/