RWD-fokus: Responsiv typografi, del 2

Mitt første segment på responsiv typografi dekket ved hjelp av en responsiv arbeidsflyt og prototypemetode for å bruke innholdet og teksten som din første guide til å utvikle et responsivt nettsteddesign. I dette andre og siste stykket vil jeg gjennomgå den endelige innsnevring og valg av skrifttyper, bruke en modulær skala ved hjelp av flere online verktøy for å konvertere piksler til Ems, og til slutt, vil vi sjekke og sette standard linjehøyden for å oppnå det ferdige syn på demonstrasjonen.

Velg skrifttyper

Når du har testet flere skrifttyper og tilhørende fontstabel mens du blir vist med modellinnholdet på nettstedet ditt, kan du deretter begrense feltet for din standardprototype av vanlige koder og elementer som overskrifter

...

og avsnitt

. Kjennetegn du vil se etter inkluderer stilen, formen, lesbarheten og den tiltenkte bruken av skrifttypen. Du vil også sørge for at skriften ser bra ut på flere enheter, operativsystemer og nettleserkombinasjoner.

Velg en modulær skala

Modulær skala, som definert av Tim Brown for skrifttyper, ligner Golden Ratio i matte. Dette forholdet (også funnet i kunst og design) er lik 1, 61803398875, eller representert som forholdet 1: 1, 61803398875, der summen av mengdene til den større mengden er lik forholdet mellom større mengde og mindre. Dette tilsvarer også den perfekte fjerde, som setter musikalske intervaller av lyder som er gruppert i en harmonisk serie. Ved å bruke Tims Modular Scale kan vi utlede vår egen skala for skrifttype, og dette gjør det mulig for oss å lage en mer perfekt passform for innholdet vårt. I demonstrasjonen velger jeg en 16px ideell tekststørrelse med en betydning av 1px, og velger deretter Golden Ratio, som vist i figur B nedenfor. Totalt sytten forhold å velge mellom inkluderer 1: 4 Double Octave, 1: 3 Major Twelfth, 1: 2 Major Octave, 3: 4 Perfect Fourth og 15:16 Minor Second.

Figur B

Når du har klikket på "Send" -knappen, vises den resulterende utgangen for den valgte modulskalaen, i dette tilfellet, 16px @ 1: 1.618 og 1px @ 1: 1.618 med de resulterende Pixels, Ems, Ems @ 16 og% of 13 som vist i figur C nedenfor.

Figur C

Tabellen genererer alternativer for en rekke piksler som enkelt lar deg konvertere dem til Ems; Ems er den aksepterte standarden for skriftstørrelser siden de reagerer på variabler i skjermstørrelser og skjermbilder, mens pikslen er mer av en fast størrelse og ikke skalerer godt. Et annet online verktøy er Px til Em-omformeren, som lar deg angi basepikselstørrelse (i dette tilfellet satte jeg den til 16px) og deretter px eller em for å konvertere (36px). Ved å klikke på "Konverter" -knappen vises resultatet, 2.250 em i dette tilfellet, som vist i figur D. Verktøyet lar deg også ta et sett med CSS konstruert fra Em-konverteringene dine basert på normalize.css.

Figur D

CSS-kodebiten nedenfor viser flere av de konverterte stilene:

 kropp { 
 margin: 0 0 4.500em; 
 skriftstørrelse: 1em; 
 linjehøyde: 1, 125 em; 
 bakgrunnsfarge: # eeeee2; 
 farge: # 333; 
 } 
 .container_16 { 
 bakgrunnsfarge: #fff; 
 polstring-bunn: 2.250 em; 
 } 
 #Overskrift { 
 polstring-topp: 0, 750 em; 
 border-top: 1em # ddddd2 solid; 
 } 
 #footer { 
 polstring-bunn: 2.250 em; 
 border-top: 105em # ddddd2 solid; 
 font: 0.813em / 1.313em 'Linden Hill', serif; 
 farge: # 888882; 
 } 
 #footer span { 
 margin: 0; 
 } 

Sjekk linjehøyde og hvit plass

Linjehøyde er en endelig vurdering og er den vertikale avstanden mellom grunnlinjene for tekstlinjene i et avsnitt. Den visuelle appellen som linjehøyden legger til, kan utgjøre forskjellen mellom en lett lesbar tekst og en som anstrenger øynene. Som du kan se fra karosseriet i CSS-kodebiten ovenfor, er linjehøyden satt til 1, 125 em, som tilsvarer 18 piksler når den er satt innenfor 16 piksler. Det endelige eksemplet vises i figur E :

Når du bruker arbeidsflyten for typografien og trinnene som er demonstrert i denne artikkelen som en retningslinje, kan du komme nettstedet nærmere til å gi en responsiv typografiopplevelse for brukerne dine på hvilken som helst enhet.

© Copyright 2021 | pepebotifarra.com