Hvordan lage responsiv typografi med CSS

Å utvikle et nettsted med så mange bruddpunkter kan være utmattende. Det er mange nye teknikker å lære i CSS, enten du er en erfaren utvikler eller en utvikler på mellomnivå.

Men hvordan kommer du i gang med responsiv typografi? Slik tar du skritt for å tilpasse nettsider til alle skjermstørrelser.

Viktigheten av responsiv typografi

Typografi spiller en viktig rolle i webutvikling og design ved å sikre lesbarheten, brukervennligheten og den generelle estetikken til et nettsted. Alle vil ha en responsiv nettside. Ville det ikke vært flott om teksten eller skriftene automatisk tilpasser seg forskjellige skjermstørrelser? Andre fordeler med responsiv typografi i webutvikling inkluderer følgende;

• Det forbedrer den generelle brukeropplevelsen på ulike enheter eller skjermstørrelser ved å sikre lesbarhet og lesbarhet.
• Det øker tilgjengeligheten ved å imøtekomme brukere med synshemming eller andre funksjonshemminger. Den imøtekommer ulike brukerpreferanser, for eksempel justerbare skriftstørrelser.
  instagram viewer
• Konsekvent typografi på tvers av enheter og oppløsninger bidrar til å bevare merkeidentitet og visuell enhet.

Her er en kodemal du kan kopiere til kodeeditoren før du begynner, slik at du kan følge teknikkene som skal diskuteres.

HTML-kodefilen

index.html
html>
<htmllang="no">
<hode>
<metategnsett="UTF-8">
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0">
<linkrel="stilark"href="style.css">
<tittel> Responsiv typografi tittel>
hode>
<kropp>
<divklasse="container">
<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 og quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
s>
div>
kropp>
html>

CSS-kodefilen

/*style.css*/
kropp{
vise: bøye seg;
rettferdiggjøre-innhold: senter;
align-elementer: senter;
høyde: 100vh;
}
.container{
bredde: 400px;
bakgrunnsfarge: antikkhvit;
polstring: 15px;
boks-skygge:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
farge: hotpink;
}

La oss nå utforske noen effektive metoder og teknikker for å implementere responsiv typografi ved hjelp av CSS

1. Klemming

Dette er en moderne CSS-typografiteknikk som tillater og sikrer at skriftstørrelsen til et element holder seg innenfor et visst område. Klemmefunksjonen "Clamp()" tar inn tre parametere, minimumsverdien, idealverdien og maksimumsverdien. Klemmefunksjonen er ikke begrenset til typografi. Den kan brukes til bilder, kort, videoer og andre medier. Slik fungerer det.

Klemme (min-verdi, ideell verdi, maks-verdi):

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

I dette eksemplet er skriftstørrelsene for overskriften og avsnittet satt ved hjelp av "clamp()"-funksjonen. For overskriften "h1" er minimumsverdien satt til "2rem" for å sikre at skriftstørrelsen ikke går under det dobbelte av rotskriftstørrelsen. Den ideelle eller foretrukne verdien er satt til "5vw", som er 5 % av visningsportens bredde, noe som gjør den responsiv til forskjellige skjermstørrelser. Maksimumsverdien er satt til "3 rem" for å sikre at skriftstørrelsen ikke er større enn tre ganger rotskriftstørrelsen. Vice versa for avsnittsstilen.

Det er beste praksis å bruke visningsportbredden "vw" eller prosentandelen "%" for den ideelle verdien, siden det lar eiendommen skalere proporsjonalt basert på tilgjengelig plass, noe som gjør designet mer responsivt. Sørg for at du vet hvilken CSS-enhet du bør bruke for ditt scenario.

Dette er den vanligste typografiteknikken som brukes av utviklere. Det innebærer å lage mediespørringer for hvert bruddpunkt. Den lar deg bruke spesifikke stiler basert på forskjellige skjermstørrelser. Her er en illustrasjon:

/* Standard skriftstørrelse */
h1{
skriftstørrelse: 38px;
}
s{
skriftstørrelse: 20px;
}
/* Skriftstørrelse for små skjermer */
@media (maks-bredde:800 piksler){
h1{
skriftstørrelse: 32px;
}
s{
skriftstørrelse: 18px;
}
}
/* Skriftstørrelse for mindre skjermer */
@media (maks-bredde:400 piksler){
h1{
skriftstørrelse: 28px;
}
s{
skriftstørrelse: 15px;
}
}

I dette eksemplet er overskriften og avsnittet satt til en standardverdi på henholdsvis "38px" til "20px". Deretter er det satt betingelser for mindre skjermstørrelser for å gjøre oppsettet responsivt på mobiltelefoner. Du kan lage så mange medieforespørsler du vil basert på designet og responsen du ønsker, blant mange andre mediesøk CSS-triks du bør vite.

3. Egendefinerte CSS-egenskaper

Også kjent som tilpassede CSS-variabler, lagrer den verdier som kan gjenbrukes gjennom hele stylingen. Den kan brukes til typografi for å muliggjøre enkel administrasjon og tilpasning. Her er et eksempel.

:rot {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
skriftstørrelse: var(--heading-font-size);
}
s{
skriftstørrelse: var(--paragraph-font-size);
}
@media (maks-bredde:800 piksler){
:rot {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (maks-bredde:400 piksler){
:rot {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

I dette eksemplet er CSS-egenskapen satt på rotnivå, som lar oss få tilgang til den globalt. --heading-font-size og --paragraph-font-size er beskrivende navn for henholdsvis overskriften og avsnittet, med standardverdier gitt til begge. Denne teknikken kan gjenbrukes for ulike medieforespørsler for å sikre konsistens over hele linjen.

Beste praksis for responsiv typografi

Det er vanlig praksis blant utviklere å bruke viewport width (vw) direkte for å utføre typografi. Selv om den er enkel og ser ut til å fungere, blir den liten på små skjermstørrelser og ekstremt stor på store skjermstørrelser. Dette skjer også når du zoomer inn og ut av siden din. Hvis du kan, unngå å bruke viewport direkte som dette;

h1{
skriftstørrelse: 2vh;
 }

Test alltid og sørg for at typografien din er lesbar på tvers av forskjellige skjermstørrelser, og test alltid nettleserkompatibiliteten. Vurder lesbarheten, og sørg for at skriftstørrelsene ikke er for små eller for store

Responsiv typografi nøkkelen til lesbar webdesign

Responsiv typografi spiller en sentral rolle i webdesign og utvikling. Ved å implementere metodene og teknikkene som klemming, mediespørringer og egendefinerte CSS-egenskaper, kan du sikre at typografien din skalerer på tvers av ulike skjermstørrelser og enheter. Det er så mange teknikker å utforske når du prøver å skape respons ved å bruke CSS – bruk disse teknikkene for å begynne å utvikle ekspertise på dette området.