Reglerne for lydhør web typografi

Responsive Web Typografi er hård - du skal have både design koteletter og teknisk knowhow. Men dog vanskelig, det kan være, at få det forkert, er ikke en mulighed, fordi typografi er hjørnestenen i webdesign.

Hvordan får du både design og kode til højre? Hvordan kommunikerer dine udviklere med pixel-pushing designere? Hvordan kan dine designere gøre nonchalant udviklere pleje om typografi? Den hurtigste og enkleste måde er at få dine designere og udviklere til at tale det samme sprog, respektere hinanden for deres håndværk og forsøge at forstå både principperne og begrænsningerne af web typografi.

Denne artikel har til formål at levere både designere og udviklere med instituttet, hvorfra man begynder at indlede kommunikation om typografi. Vi vil dække de nødvendige designprincipper og udforske praktiske løsninger til Responsive typografi. .

Hvad er god typografi?

'God' er altid subjektivt; Det er ikke et fast anker, som vi kan hænge kommunikation på. For designere og udviklere at kommunikere effektivt, skal vi begynde med at tale om en fællesnævner, at begge sider kan forstå. Denne nævner er formålet med typografi.

Typografi er udseendet af tekst; Vi dressing tekst op. Formålet med dressing er at gøre bæreren tiltalende nok til at tiltrække en samtale, men ikke holde så meget opmærksomhed, at den anden part bliver distraheret fra samtalen.

Ligeledes er formålet med typografi at gøre det muligt for læsere at fokusere og fordybe sig i indholdet af teksten. God typografi, pr. Definition, er typografi, der hjælper med at opfylde formålet med kommunikation.

To ting skal ske for læsere at fokusere og fordybe sig i teksten. For det første skal typografien formidle passende (hvis nogen) følelser. For det andet skal teksten være let at læse. Dette bringer os til fire vigtige egenskaber, du har brug for for at få ret.

• Font Family.
• Skriftstørrelse
• Linjehøjde (også kaldet førende)
• Tekstbredde (også kaldet tekstbeløb)

At få den rigtige font familie hjælper de underliggende følelser af teksten skinne igennem. At få de andre tre egenskaber ret sikrer, at din tekst er let at læse. For det meste er designere fremragende til at finde den rigtige skrifttype familie. Så for resten af ​​denne artikel vil vi fokusere på de andre tre faktorer.

Kunsten af ​​læsbar tekst

Det første skridt i ethvert projekt er at indstille skriftstørrelse Vi linjehøjde og bredde af din kropstekst. Denne proces kaldes typesetting. Begynd med at skrive med en side, der indeholder oplysninger, en bruger har brug for. Så meget som muligt skal denne side indeholde flere elementer, som H1, H2, H3, Body Text and Contotts, som du skal gøre et bevidst valg om, hvad der virker for dit design. Jo flere elementer din side indeholder, desto bedre er dine chancer for at indstille en type ordning, der fungerer over tavlen.

Når du vælger skriftstørrelse Vi linjehøjde og måle til din kropstekst, skal du sørge for at bruge ægte indhold. Hvis du ikke har det faktiske indhold, skal du bruge tekst fra Wikipedia i stedet for Lorem Ipsum.

Du skal også sætte dig selv i samme situation, du sætter på, fordi afstanden mellem en læsers øjne og skærmen er anderledes for forskellige enheder. Hvis du sætter dig til en mobil enhed, skal du se på din output gennem en telefon. Hvis du sætter på en bærbar computer, skal du sidde ved dit skrivebord med din bærbare computer og så videre.

Når du har afgjort dig selv i det rigtige miljø, skal du starte din typesetting-proces ved først at vælge skriftstørrelse , efterfulgt af foranstaltning og endelig linjehøjde . Husk på, at der ikke er nogen perfekt kombination - bare se på andre sider, du føler, har god typografi, og du vil se, at ingen af ​​dem bruger det samme skriftstørrelse Vi linjehøjde og måle. Så hvad du tilstræber er simpelthen tekst, der er let at læse.

Indstilling af de rigtige størrelser er sværere at forklare skriftligt, så jeg har lavet nogle videoer til at hjælpe dig med skriftstørrelse Vi måle og førende. .

Her er nogle hurtige retningslinjer for at hjælpe dig med at sikre, at du har en god skrifttypestørrelse, der fører og mål.

Din skrifttype er for lille, hvis:

• Du skal koncentrere dig om at læse teksten
• Du er nødt til at skubbe dine øjne
• Du har trang til at zoome ind

Din skrifttype er for stor, hvis:

• Du begynder at bemærke bogstaver i stedet for at læse indholdet
• Du kan kun læse en til tre ord ad gangen
• Du har trang til at zoome ud

Din tekstforanstaltning er for lang, hvis:

• Du skal gøre hovedet for at læse teksten
• Du mister koncentrationen midtvejs igennem

Din tekstforanstaltning er for kort, hvis:

• Du føler dig irriteret, når teksten bryder til næste linje
• Dine øjne bliver trætte af at hoppe til venstre og højre hurtigt

Din førende er for smal, hvis:

• Teksten føles tæt og overvældende
• Du læser den forkerte tekstlinje ved et uheld

Din førende er for stor, hvis:

• Du bliver distraheret af det hvide rum mellem rækker af ord

Husk altid definitionen af ​​god typografi: Du er ikke efter perfektion, du er simpelthen gunning for tekst, der er let at læse. Mens du gør det, vil du gerne teste dine typesetting valg med dit publikum (venner og kolleger gør også gode testere) for at sikre, at du har ret. Gå kun videre til at indstille størrelserne af andre elementer, når du er færdig med at skrive kroppens tekst.

Typesetting andre elementer

Mange designere og udviklere valgte skriftstørrelse For elementer som H1 og H2 visuelt, og bare håber, at disse magiske tal fungerer godt i deres design. Men der er ikke behov for bare at trække numre ud af tynd luft; Typografier har brugt typografi skalaer i århundreder for at hjælpe med dette. Hvad du gør er at vælge et nummer fra typografi skalaen som størrelsen på dit element. Desværre kan disse skalaer ikke direkte bruges til internettet, fordi de er bygget til print design.

Tim Brown, en ekspert inden for typografi, kom op med en løsning kaldet en modulær skala. Det fungerer nøjagtigt som en typografi skala, bortset fra at du konstruerer den modulære skala med den kropsekst, du har besluttet.

For at skabe den modulære skala tager du kroppen tekst skriftstørrelse (Også kaldet Base Font-Size) og multiplicere det med et forhold adskillige gange, indtil du får en skala. Ofte er det forhold, du bruger, afledt af musik (da musik har rødder i harmoni). Ovenfor er et eksempel på en skala, der er skabt ved hjælp af a Modular Scale Calculator. .

Når du er færdig med at konstruere den modulære skala, kan du gå videre til at skrive resten af ​​dine elementer, vælge et nummer fra skalaen som din skriftstørrelse . Sæt derefter ledende og mål med samme proces, indtil du får en god balance mellem læsbare elementer.

Lodret rytme

Det næste skridt er at hjælpe gel de enkelte elementer sammen ved hjælp af en teknik kaldet lodret rytme. For et element at flyde harmonisk ind i det næste, skal vi tweak det, der slutter sig til dem: det hvide rum. Dette hvide rum skal være stort nok til at differentiere et element fra det næste tydeligt, men det skal være lille nok til at sikre, at strømmen ikke er brudt.

Hvor meget hvidt rum skal du bruge? Mange designere vælger en figur som 10px, der er let for dem at designe rundt. Mange udviklere har på den anden side en tendens til at piske et tilfældigt tal (som 6px) enten fra et andet gittersystem eller en artikel, de har læst online. Ikke underligt, at disse to ikke kan kommunikere.

Som du måske forestiller dig, er der ingen grund til at stole på et magisk nummer til det hvide rum; Vi kan bruge et flertal af linjehøjde værdi af vores krops tekst. Dette skyldes, at vi instinktivt genkender hvide rummønstre inden for tekst. Jo stærkere mønsteret, jo sikrere vi føler, og jo lettere er det at lade vores sind vandre ind i indholdet.

For at bruge lodret rytme, er alt hvad du gør, er:

1. Indstil det hvide mellemrum mellem elementer til et flertal af basen linjehøjde
2. Indstil linjehøjde af alle andre elementer til et flertal af basen linjehøjde

Det pågældende multipelt behøver ikke at være et helt tal. Du kan bruge værdier som 0,5x og 1,25x af bunden linjehøjde at give dig mere fleksibilitet. Disse værdier arbejder, fordi lodret rytme bruger princippet om gentagelse.

Baseline grid eller nej?

Når vi nævner lodret rytme, kommer begrebet et baseline-gitter uundgåeligt ind i billedet. Selvom Baseline Grid potentielt kan være nyttigt, er det for det meste et togvrag, fordi begyndere fokuserer så meget energi på at gøre teksten sidde mellem (eller på) basislinjer, som de føler, at det er umuligt at få lodret rytme til højre.

Ærligt, du får aldrig baseline grids til at fungere perfekt på nettet, fordi matematikken i typografi altid indeholder subpixel (som 24.8px), og alle browsere håndterer subpixeler anderledes. For eksempel forårsager nogle browsere hvert element på siden at være slukket med 1px. Disse 1px-fejl akkumuleres og skubber eventuelle elementer, der er placeret nedre ned på siden, endnu længere væk fra nettet. Som følge heraf anbefaler jeg imod at bruge et baseline gitter.

At gå videre, lad os gå ind i rektor for lydhør praksis og designe til flere skærme.

Typografi til flere skærme

Design typografi for flere skærme er ingen gennemsnitlig feat. Der er tre ting, vi skal gøre fra et designperspektiv.

For det første afhænger afstanden mellem en brugers øjne og deres skærm af hvilken slags enhed de bruger. Generelt vil brugeren placere enheden længere væk, når du bruger en større skærm. Dette fænomen betyder, at du skal øge dine skrifttypestørrelser, da enhedens bredde øges.

For det andet ønsker vi at holde proportionerne mellem kroppseksten og andre elementer konsekvente. Det betyder, at vi skal øge størrelserne på alle elementer, da vi øger kroppens tekststørrelse.

For det tredje, på specifikke breakpoints ønsker vi at øge skriftstørrelse af specifikke elementer (som H1) ved at vælge et andet nummer fra den modulære skala. Hvis du gør det muligt for os at styre det visuelle hierarki og sikrer, at elementerne garanterer lige nok opmærksomhed på at trække en bruger til at læse videre.

Kodning for lydhør typografi

Vi ved, at vi skal øge vores tekststørrelser proportionalt. Den nemmeste måde at gøre dette på er at øge skriftstørrelse indenfor html. vælger. Vi vil også bruge relative enheder til at respektere en brugers skriftstørrelse præference.

 HTML {FONT-STØRRELSE: 100%;}
@media (min bredde: 40em) {
 HTML {FONT-STØRRELSE: 112,5%;}
} 

Vi ønsker også at bruge en relativ enhed til andre elementer, så de skalere i henhold til HTML skriftstørrelse ( H2. i eksemplet nedenfor). Hvis du har brug for at ændre skriftstørrelse til et andet nummer i den modulære skala, er alt hvad du gør, ændrer skriftstørrelse følgelig ( H1. under).

 H1 {FONT-STØRRELSE: 2.369EM;}
@media (min bredde: 40em) {
 HTML {FONT-STØRRELSE: 3.147EM;}
}

H2 {FONT-STØRRELSE: 1.777EM;} 

Selv om processen ser enkle, kan nye udviklere stå over for et ton hovedpine på grund af de involverede matematik, hvorfor jeg anbefaler at bruge funktioner og mixiner til at hjælpe. Jeg bruger ofte Frk() fra Modular Scale Library . Med dette kan du skrive MS (4) i stedet for 3.157EM. og MS (3) i stedet for 2.369EM. .

Et eksempel på en funktion, der kan lette lasten af ​​beregning af lodret rytme, er:

  @function vr ($ rytme) {@return $ rhythm / 16 * 1rem;} 

Det her Vr. funktionen giver dig mulighed for at skrive VR (3) for et flertal af tre basisiner i stedet for at beregne det selv. For at hjælpe dig (og mig selv) ud endnu mere, har jeg lavet et lydhørt typografi bibliotek kaldet Typi. .

Relative enheder

Alle diskussioner om relative enheder slutter med et spørgsmål om, hvorvidt du skal bruge REM. eller Em. enheder. Det tror jeg på REM. og Em. har deres unikke brugssager, og du bør bruge dem under forskellige omstændigheder. Her er to regler, der kan hjælpe dig med at vælge, hvilken enhed der skal bruges:

1. Brug Em. Hvis ejendommen har brug for at skalere med skriftstørrelse
2. Hvis ikke, brug REM.

For mere information om valg mellem disse enheder, Se denne artikel .

Opsummering det up.

I denne artikel har du lært de væsentlige ting for lydhør web typografi. Selvfølgelig finder du flere detaljer, når du dykker dybere, både i teori og implementering, men hvad du har her dækker 80 procent af det, du har brug for i et rigtigt projekt. Udstyret med denne viden, er du klar til at begynde at tale med både designere og udviklere om, hvordan man designer og kode god typografi for det responsive web.

Responsive typografi er ikke utroligt vanskelig. Det er bare udfordrende, fordi du har brug for en enorm mængde tålmodighed og omhu for at afdække relevante principper og anvende dem på en måde, der passer til internettet.

Denne artikel optrådte oprindeligt i Net Magazine. . Abonner her .

Relaterede artikler:

• Master Accessible Web Typografi
• Design et lydhørt sted med EM-baseret dimensionering
• 10 regler for at lave brugervenlige webformularer