Hoe responsieve typografie te maken met CSS

Het ontwikkelen van een website met zoveel breekpunten kan vermoeiend zijn. Er zijn veel nieuwe technieken om te leren in CSS, of je nu een doorgewinterde ontwikkelaar bent of een mid-level ontwikkelaar.

Maar hoe begin je met responsive typografie? Hier leest u hoe u stappen kunt ondernemen om webpagina's aan te passen aan elk schermformaat.

Het belang van responsieve typografie

Typografie speelt een cruciale rol bij webontwikkeling en -ontwerp door de leesbaarheid, bruikbaarheid en algehele esthetiek van een website te waarborgen. Iedereen wil een responsive website. Zou het niet geweldig zijn als de tekst of lettertypen zich automatisch aanpassen aan verschillende schermformaten? Andere voordelen van responsieve typografie bij webontwikkeling zijn de volgende;

• Het verbetert de algehele gebruikerservaring op verschillende apparaten of schermformaten door de leesbaarheid en leesbaarheid te waarborgen.
instagram viewer
• Het vergroot de toegankelijkheid door tegemoet te komen aan gebruikers met visuele beperkingen of andere handicaps. Het biedt plaats aan verschillende gebruikersvoorkeuren, zoals aanpasbare lettergroottes.
• Consistente typografie op verschillende apparaten en resoluties helpt de merkidentiteit en visuele eenheid te behouden.

Hier is een codesjabloon dat u naar uw code-editor kunt kopiëren voordat u begint, zodat u de te bespreken technieken kunt volgen.

Het HTML-codebestand

index.html
html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8">
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0">
<koppelingrel="stijlblad"href="stijl.css">
<titel> Responsieve typografie titel>
hoofd>
<lichaam>
<divklas="houder">
<h1> Lorem ipsum h1>
<P> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
P>
div>
lichaam>
html>

Het CSS-codebestand

/*style.css*/
lichaam{
weergave: buigen;
rechtvaardigen-inhoud: centrum;
uitlijnen-items: centrum;
hoogte: 100vh;
}
.container{
breedte: 400px;
Achtergrond kleur: antiek wit;
opvulling: 15px;
doos-schaduw:0 2px 5pxRGBA(0,0,0, 0.1) ;
}
h1{
kleur: felroze;
}

Laten we nu eens kijken naar enkele effectieve methoden en technieken voor het implementeren van responsieve typografie met behulp van CSS

1. Klemmen

Dit is een moderne CSS-typografietechniek die ervoor zorgt dat de lettergrootte van een element binnen een bepaald bereik blijft. De klemfunctie "Clamp()" omvat drie parameters, de minimumwaarde, de ideale waarde en de maximumwaarde. De klemfunctie is niet beperkt tot typografie. Het kan worden gebruikt voor afbeeldingen, kaarten, video's en andere media. Dit is hoe het werkt.

Klem (min-waarde, ideale waarde, max-waarde):

h1{
lettertypegrootte: klem(2rem, 5vw, 3rem);
}
P{
lettertypegrootte: klem(1rem, 3vw, 2rem);
}

In dit voorbeeld worden de lettergroottes voor de kop en de alinea ingesteld met de functie "clamp()". Voor de kop "h1" is de minimumwaarde ingesteld op "2rem" om ervoor te zorgen dat de lettergrootte niet kleiner wordt dan tweemaal de hoofdlettergrootte. De ideale of voorkeurswaarde is ingesteld op "5vw", wat 5% van de breedte van de viewport is, waardoor het reageert op verschillende schermformaten. De maximale waarde is ingesteld op "3 rem", zodat de lettergrootte niet groter is dan drie keer de hoofdlettergrootte. Vice versa voor de alinea-opmaak.

Het is een goede gewoonte om viewport-breedte "vw" of percentage "%" te gebruiken voor de ideale waarde, omdat de eigenschap hierdoor proportioneel kan worden geschaald op basis van de beschikbare ruimte, waardoor het ontwerp sneller reageert. Zorg ervoor dat je het weet welke CSS-eenheid u moet gebruiken voor uw scenario.

Dit is de meest voorkomende typografische techniek die door ontwikkelaars wordt gebruikt. Het omvat het maken van mediaquery's voor elk breekpunt. Hiermee kunt u specifieke stijlen toepassen op basis van verschillende schermformaten. Hier is een illustratie:

/* Standaard lettergrootte */
h1{
lettertypegrootte: 38px;
}
P{
lettertypegrootte: 20px;
}
/* Lettergrootte voor kleine schermen */
@media (Maximale wijdte:800px){
h1{
lettertypegrootte: 32px;
}
P{
lettertypegrootte: 18px;
}
}
/* Lettergrootte voor kleinere schermen */
@media (Maximale wijdte:400px){
h1{
lettertypegrootte: 28px;
}
P{
lettertypegrootte: 15px;
}
}

In dit voorbeeld zijn de kop en de alinea ingesteld op een standaardwaarde van respectievelijk "38px" tot "20px". Vervolgens worden voorwaarden gesteld voor kleinere schermformaten om de lay-out responsief te maken op mobiele telefoons. U kunt zoveel mediaquery's maken als u wilt, onder andere op basis van het ontwerp en de responsiviteit die u wilt mediaquery CSS-trucs die u moet kennen.

3. Aangepaste CSS-eigenschappen

Ook bekend als aangepaste CSS-variabelen, slaat het waarden op die tijdens uw styling opnieuw kunnen worden gebruikt. Het kan worden gebruikt voor typografie om eenvoudig beheer en aanpassing mogelijk te maken. Hier is een voorbeeld.

:wortel {
--heading-font-size: 3rem;
--paragraaf-lettertype-grootte: 1.5rem;
}
h1{
lettertypegrootte: var(--heading-font-size);
}
P{
lettertypegrootte: var(--paragraaf-lettertype-grootte);
}
@media (Maximale wijdte:800px){
:wortel {
--heading-font-size: 2rem;
--paragraaf-lettertype-grootte: 0.9rem;
}
}
@media (Maximale wijdte:400px){
:wortel {
--heading-font-size: 1.5rem;
--paragraaf-lettertype-grootte: 0.8rem;
}
}

In dit voorbeeld is de CSS-eigenschap ingesteld op rootniveau, waardoor we er wereldwijd toegang toe hebben. De --heading-font-size en --paragraph-font-size zijn beschrijvende namen voor respectievelijk de kop en alinea, met standaardwaarden voor beide. Deze techniek kan worden hergebruikt voor verschillende mediaquery's om consistentie over de hele linie te garanderen.

Best practices voor responsieve typografie

Het is gebruikelijk onder ontwikkelaars om viewport width (vw) rechtstreeks te gebruiken om typografie uit te voeren. Hoewel het eenvoudig is en lijkt te werken, wordt het klein op kleine schermformaten en extreem groot op grote schermformaten. Dit gebeurt ook wanneer u in- en uitzoomt op uw pagina. Als je kunt, vermijd dan direct het gebruik van viewport op deze manier;

h1{
lettertypegrootte: 2vh;
 }

Test altijd en zorg ervoor dat uw typografie leesbaar is op verschillende schermformaten en test altijd de browsercompatibiliteit. Denk aan de leesbaarheid en zorg ervoor dat de lettergroottes niet te klein of te groot zijn

Responsieve typografie de sleutel tot leesbaar webdesign

Responsieve typografie speelt een centrale rol bij webdesign en -ontwikkeling. Door de methoden en technieken te implementeren, zoals klemmen, mediaquery's en aangepaste CSS-eigenschappen, kunt u ervoor zorgen dat uw typografie over verschillende schermformaten en apparaten wordt geschaald. Er zijn zoveel technieken om te onderzoeken wanneer u responsiviteit probeert te creëren met behulp van CSS. Gebruik deze technieken om expertise op dit gebied te ontwikkelen.