Hur man skapar responsiv typografi med CSS

Att utveckla en webbplats med så många brytpunkter kan vara ansträngande. Det finns många nya tekniker att lära sig i CSS, oavsett om du är en erfaren utvecklare eller en utvecklare på mellannivå.

Men hur kommer man igång med responsiv typografi? Så här vidtar du åtgärder för att anpassa webbsidor till valfri skärmstorlek.

Vikten av responsiv typografi

Typografi spelar en viktig roll i webbutveckling och design genom att säkerställa läsbarheten, användbarheten och den övergripande estetiken hos en webbplats. Alla vill ha en responsiv webbplats. Skulle det inte vara bra om texten eller typsnitten automatiskt anpassar sig till olika skärmstorlekar? Andra fördelar med responsiv typografi i webbutveckling inkluderar följande;

• Det förbättrar den övergripande användarupplevelsen på olika enheter eller skärmstorlekar genom att säkerställa läsbarhet och läsbarhet.
• Det ökar tillgängligheten genom att tillgodose användare med synnedsättning eller andra funktionsnedsättningar. Den rymmer olika användarpreferenser, såsom justerbara teckenstorlekar.
  instagram viewer
• Konsekvent typografi över enheter och upplösningar hjälper till att bevara varumärkesidentitet och visuell enhet.

Här är en kodmall som du kan kopiera till din kodredigerare innan du börjar, så att du kan följa teknikerna som ska diskuteras.

HTML-kodfilen

index.html
html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">
<länkrel="stilmall"href="style.css">
<titel> Responsiv typografi titel>
huvud>
<kropp>
<divklass="behållare">
<h1> Lorem ipsum h1>
<sid> 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! 
sid>
div>
kropp>
html>

CSS-kodfilen

/*style.css*/
kropp{
visa: böja;
motivera-innehåll: Centrum;
align-objekt: Centrum;
höjd: 100vh;
}
.behållare{
bredd: 400px;
bakgrundsfärg: antikvit;
stoppning: 15px;
box-skugga:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
Färg: skrikrosa;
}

Låt oss nu utforska några effektiva metoder och tekniker för att implementera responsiv typografi med CSS

1. Klämning

Detta är en modern CSS-typografiteknik som tillåter och säkerställer att teckenstorleken på ett element håller sig inom ett visst intervall. Clamp-funktionen "Clamp()" tar in tre parametrar, minimivärdet, idealvärdet och maxvärdet. Klämfunktionen är inte begränsad till typografi. Den kan användas för bilder, kort, videor och andra media. Så här fungerar det.

Klämma (min-värde, ideal-värde, max-värde):

h1{
textstorlek: klämma(2rem, 5vw, 3rem);
}
sid{
textstorlek: klämma(1rem, 3vw, 2rem);
}

I det här exemplet ställs teckenstorlekarna för rubriken och stycket in med funktionen "clamp()". För rubriken "h1" är minimivärdet satt till "2rem", vilket säkerställer att teckensnittsstorleken inte kommer att understiga dubbelt så mycket som rotteckensnittsstorleken. Det idealiska eller föredragna värdet är inställt på "5vw", vilket är 5 % av visningsportens bredd vilket gör att den reagerar på olika skärmstorlekar. Det maximala värdet är satt till "3 rem" vilket säkerställer att teckensnittsstorleken inte är större än tre gånger rotteckensnittets storlek. Vice versa för styckestilen.

Det är bästa praxis att använda visningsportbredden "vw" eller procentandelen "%" för det ideala värdet, eftersom det gör att egenskapen kan skalas proportionellt baserat på tillgängligt utrymme, vilket gör designen mer responsiv. Se till att du vet vilken CSS-enhet du ska använda för ditt scenario.

Detta är den vanligaste typografitekniken som används av utvecklare. Det innebär att skapa mediefrågor för varje brytpunkt. Det låter dig tillämpa specifika stilar baserat på olika skärmstorlekar. Här är en illustration:

/* Standard teckenstorlek */
h1{
textstorlek: 38px;
}
sid{
textstorlek: 20px;
}
/* Teckenstorlek för små skärmar */
@media (maximal bredd:800 pixlar){
h1{
textstorlek: 32px;
}
sid{
textstorlek: 18px;
}
}
/* Teckenstorlek för mindre skärmar */
@media (maximal bredd:400 pixlar){
h1{
textstorlek: 28px;
}
sid{
textstorlek: 15px;
}
}

I det här exemplet är rubriken och stycket inställda på ett standardvärde på "38px" till "20px" respektive. Sedan ställs villkor för mindre skärmstorlekar för att göra layouten responsiv på mobiltelefoner. Du kan skapa så många mediefrågor du vill baserat på designen och den lyhördhet du vill, bland många andra media query CSS-trick du bör känna till.

3. Anpassade CSS-egenskaper

Även känd som anpassade CSS-variabler, lagrar den värden som kan återanvändas genom hela din styling. Den kan användas för typografi för att möjliggöra enkel hantering och anpassning. Här är ett exempel.

:rot {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
textstorlek: var(--heading-font-size);
}
sid{
textstorlek: var(--paragraph-font-size);
}
@media (maximal bredd:800 pixlar){
:rot {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (maximal bredd:400 pixlar){
:rot {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

I det här exemplet är CSS-egenskapen inställd på rotnivån, vilket gör att vi kan komma åt den globalt. --heading-font-size och --paragraph-font-size är beskrivande namn för rubriken respektive stycket, med standardvärden för båda. Denna teknik kan återanvändas för olika mediefrågor för att säkerställa konsekvens över hela linjen.

Bästa metoder för responsiv typografi

Det är vanligt bland utvecklare att använda viewport width (vw) direkt för att utföra typografi. Även om den är enkel och verkar fungera, blir den liten på små skärmstorlekar och extremt stor på stora skärmstorlekar. Detta inträffar också när du zoomar in och ut på din sida. Om du kan, undvik att använda viewport direkt så här;

h1{
textstorlek: 2vh;
 }

Testa alltid och se till att din typografi är läsbar över olika skärmstorlekar och testa alltid webbläsarkompatibiliteten. Tänk på läsbarheten och se till att teckensnittsstorlekarna inte är för små eller för stora

Responsiv typografi nyckeln till läsbar webbdesign

Responsiv typografi spelar en avgörande roll i webbdesign och utveckling. Genom att implementera metoderna och teknikerna som klämning, mediafrågor och anpassade CSS-egenskaper kan du säkerställa att din typografi skalas över olika skärmstorlekar och enheter. Det finns så många tekniker att utforska när du försöker skapa lyhördhet med hjälp av CSS – använd dessa tekniker för att börja utveckla expertis inom detta område.