Sådan opretter du responsiv typografi med CSS

At udvikle en hjemmeside med så mange brudpunkter kan være udmattende. Der er mange nye teknikker at lære i CSS, uanset om du er en erfaren udvikler eller en mid-level udvikler.

Men hvordan kommer man i gang med responsiv typografi? Sådan tager du skridt til at tilpasse websider til enhver skærmstørrelse.

Vigtigheden af ​​responsiv typografi

Typografi spiller en afgørende rolle i webudvikling og -design ved at sikre et websteds læsbarhed, brugervenlighed og overordnede æstetik. Alle vil have en responsiv hjemmeside. Ville det ikke være fantastisk, hvis teksten eller skrifttyperne automatisk tilpasser sig forskellige skærmstørrelser? Andre fordele ved responsiv typografi i webudvikling omfatter følgende;

• Det forbedrer den overordnede brugeroplevelse på forskellige enheder eller skærmstørrelser ved at sikre læsbarhed og læsbarhed.
• Det øger tilgængeligheden ved at imødekomme brugere med synshandicap eller andre handicap. Det imødekommer forskellige brugerpræferencer, såsom justerbare skriftstørrelser.
  instagram viewer
• Konsekvent typografi på tværs af enheder og opløsninger hjælper med at bevare brandidentitet og visuel enhed.

Her er en kodeskabelon, du kan kopiere til din kodeeditor, før du begynder, så du kan følge de teknikker, der skal diskuteres.

HTML-kodefilen

index.html
html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8">
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"href="style.css">
<titel> Responsiv typografi titel>
hoved>
<legeme>
<divklasse="beholder">
<h1> Lorem ipsum h1>
<s> 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 oficia quod eaque perspiciatis! 
s>
div>
legeme>
html>

CSS-kodefilen

/*style.css*/
legeme{
Skærm: bøje;
retfærdiggøre-indhold: centrum;
align-elementer: centrum;
højde: 100vh;
}
.beholder{
bredde: 400px;
baggrundsfarve: antikhvid;
polstring: 15px;
kasse-skygge:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
farve: Hot pink;
}

Lad os nu udforske nogle effektive metoder og teknikker til implementering af responsiv typografi ved hjælp af CSS

1. Fastspænding

Dette er en moderne CSS-typografiteknik, der tillader og sikrer, at et elements skriftstørrelse forbliver inden for et bestemt område. Clamp-funktionen "Clamp()" indtager tre parametre, minimumværdien, idealværdien og maksimumværdien. Klemmefunktionen er ikke begrænset til typografi. Det kan bruges til billeder, kort, videoer og andre medier. Sådan fungerer det.

Klemme (min-værdi, ideel-værdi, max-værdi):

h1{
skriftstørrelse: klemme(2rem, 5vw, 3rem);
}
s{
skriftstørrelse: klemme(1rem, 3vw, 2rem);
}

I dette eksempel er skriftstørrelserne for overskriften og afsnittet indstillet ved hjælp af "clamp()"-funktionen. For overskriften "h1" er minimumsværdien sat til "2rem", hvilket sikrer, at skriftstørrelsen ikke går under det dobbelte af rodskriftstørrelsen. Den ideelle eller foretrukne værdi er indstillet til "5vw", som er 5% af visningsportens bredde, hvilket gør den lydhør over for forskellige skærmstørrelser. Den maksimale værdi er sat til "3 rem", hvilket sikrer, at skriftstørrelsen ikke er større end tre gange rodskriftstørrelsen. Omvendt for afsnitsstilen.

Det er bedste praksis at bruge viewport-bredden "vw" eller procentdelen "%" for den ideelle værdi, da det tillader ejendommen at skalere proportionalt baseret på den tilgængelige plads, hvilket gør designet mere responsivt. Sørg for, at du ved det hvilken CSS-enhed du skal bruge til dit scenarie.

Dette er den mest almindelige typografiteknik, der bruges af udviklere. Det involverer oprettelse af medieforespørgsler for hvert brudpunkt. Det giver dig mulighed for at anvende specifikke stilarter baseret på forskellige skærmstørrelser. Her er en illustration:

/* Standard skriftstørrelse */
h1{
skriftstørrelse: 38px;
}
s{
skriftstørrelse: 20px;
}
/* Skriftstørrelse til små skærme */
@medier (max-bredde:800px){
h1{
skriftstørrelse: 32px;
}
s{
skriftstørrelse: 18px;
}
}
/* Skriftstørrelse til mindre skærme */
@medier (max-bredde:400px){
h1{
skriftstørrelse: 28px;
}
s{
skriftstørrelse: 15px;
}
}

I dette eksempel er overskriften og afsnittet sat til en standardværdi på henholdsvis "38px" til "20px". Derefter er der sat betingelser for mindre skærmstørrelser for at gøre layoutet responsivt på mobiltelefoner. Du kan oprette så mange medieforespørgsler, som du vil, baseret på designet og den reaktionsevne, du ønsker, blandt masser af andre medieforespørgsel CSS-tricks, du bør kende.

3. CSS brugerdefinerede egenskaber

Også kendt som tilpassede CSS-variabler, gemmer den værdier, der kan genbruges gennem hele din styling. Det kan bruges til typografi for at muliggøre nem administration og tilpasning. Her er et eksempel.

:rod {
--heading-font-size: 3rem;
--afsnit-skriftstørrelse: 1.5rem;
}
h1{
skriftstørrelse: var(--heading-font-size);
}
s{
skriftstørrelse: var(--afsnit-skriftstørrelse);
}
@medier (max-bredde:800px){
:rod {
--heading-font-size: 2rem;
--afsnit-skriftstørrelse: 0.9rem;
}
}
@medier (max-bredde:400px){
:rod {
--heading-font-size: 1.5rem;
--afsnit-skriftstørrelse: 0.8rem;
}
}

I dette eksempel er CSS-egenskaben sat på rodniveauet, hvilket giver os mulighed for at få adgang til den globalt. --heading-font-size og --paragraph-font-size er beskrivende navne for henholdsvis overskriften og afsnittet, med standardværdier givet til begge. Denne teknik kan genbruges til forskellige medieforespørgsler for at sikre ensartethed over hele linjen.

Bedste praksis for responsiv typografi

Det er almindelig praksis blandt udviklere at bruge viewport width (vw) direkte til at udføre typografi. Selvom det er enkelt og ser ud til at virke, bliver det lille på små skærmstørrelser og ekstremt stort på store skærmstørrelser. Dette sker også, når du zoomer ind og ud af din side. Hvis du kan, undgå at bruge viewport direkte på denne måde;

h1{
skriftstørrelse: 2vh;
 }

Test altid og sørg for, at din typografi er læsbar på tværs af forskellige skærmstørrelser, og test altid browserkompatibiliteten. Overvej læsbarheden, og sørg for, at skriftstørrelserne ikke er for små eller for store

Responsiv typografi nøglen til læsbart webdesign

Responsiv typografi spiller en central rolle i webdesign og udvikling. Ved at implementere metoder og teknikker såsom klemning, medieforespørgsler og tilpassede CSS-egenskaber kan du sikre, at din typografi skaleres på tværs af forskellige skærmstørrelser og enheder. Der er så mange teknikker at udforske, når du forsøger at skabe lydhørhed ved hjælp af CSS - brug disse teknikker til at begynde at udvikle ekspertise på dette område.