De regels van responsieve webtypografie

Responsive Web Typografie is moeilijk - je moet zowel ontwerpkarbonades en technische knowhow hebben. Maar hoewel het misschien is, het is verkeerd om het verkeerd te krijgen is geen optie, omdat typografie de hoeksteen van het webdesign is.

Hoe krijg je zowel het ontwerp als de code toch? Hoe communiceren uw ontwikkelaars met pixel-duwende ontwerpers? Hoe kunnen uw ontwerpers nonchalante ontwikkelaars geven om typografie? De snelste en eenvoudigste manier is om uw ontwerpers en ontwikkelaars te krijgen om dezelfde taal te spreken, elkaar te respecteren voor hun ambacht en streven naar zowel de principes als beperkingen van webtypografie.

Dit artikel is bedoeld om zowel ontwerpers als ontwikkelaars de fundering te bieden waaruit de communicatie over het onderwerp typografie te beginnen. We dekken de benodigde ontwerpprincipes en verkennen praktische oplossingen voor responsieve typografie ​

Wat is goede typografie?

'Goed' is altijd subjectief; Het is geen vast anker waar we communicatie op kunnen schijnen. Voor ontwerpers en ontwikkelaars om effectief te communiceren, moeten we beginnen met het praten over een gemeenschappelijke noemer die beide partijen kunnen begrijpen. Die denominator is het doel van typografie.

Typografie is het uiterlijk van tekst; We dragen tekst op. Het doel van aankleden is om de drager aantrekkelijk te maken om een ​​gesprek aan te trekken, maar niet zoveel aandacht te houden die de andere partij uit het gesprek wordt afgeleid.

Evenzo is het doel van typografie om lezers in staat te stellen zich te concentreren en onderdompelen in de inhoud van de tekst. Goede typografie, per definitie, is typografie die de tekst helpt om het doel van communicatie te vervullen.

Twee dingen moeten gebeuren voor lezers om zich in de tekst te concentreren en onderdompelen. Ten eerste moet de typografie passend (indien aanwezig) emotie overbrengen. Ten tweede moet de tekst gemakkelijk te lezen zijn. Dit brengt ons naar vier essentiële eigenschappen die je nodig hebt om goed te krijgen.

• Font-familie
• Lettertypegrootte
• Lijnhoogte (ook leidend genoemd)
• Tekstbreedte (ook wel tekstmaat genoemd)

Het krijgen van de juiste lettertype-familie helpt de onderliggende emoties van de tekst door. Krijgt de andere drie eigenschappen recht zorgt ervoor dat uw tekst gemakkelijk leesbaar is. Voor het grootste deel zijn ontwerpers uitstekend in het vinden van het juiste lettertype-familie. Dus, voor de rest van dit artikel richten we ons op de andere drie factoren.

De kunst van leesbare tekst

De eerste stap in elk project is om de lettertypegrootte ​ lijnhoogte en breedte van je lichaamstekst. Dit proces wordt Tattetting genoemd. Begin met het plaatsen met een pagina met informatie die een gebruikersbehoeften bevat. Met deze pagina moet deze pagina meerdere elementen bevatten, zoals H1, H2, H3, lichaamstekst en bijschriften, waarvoor u een bewuste keuze moet maken over wat voor uw ontwerp werkt. Hoe meer elementen uw pagina bevat, hoe beter uw kansen om een ​​type schema in te stellen dat over het bestuur werkt.

Wanneer u de lettertypegrootte ​ lijnhoogte en meet voor uw lichaamstekst, zorg ervoor dat u echte inhoud gebruikt. Als u geen echte inhoud heeft, gebruik dan tekst uit Wikipedia in plaats van Lorem Ipsum.

Je moet ook jezelf in dezelfde situatie plaatsen waar je voor wordt, omdat de afstand tussen de ogen van een lezer en het scherm anders is voor verschillende apparaten. Als u voor een mobiel apparaat wordt gezet, kijk dan naar uw uitvoer via een telefoon. Als je voor een laptop wordt gezet, zit dan aan je bureau met je laptop, enzovoort.

Zodra u uzelf in de juiste omgeving hebt ingesteld, start u uw type-testproces door eerst te selecteren lettertypegrootte , gevolgd door maat en ten slotte lijnhoogte ​Houd er rekening mee dat er geen perfecte combinatie is - kijk gewoon naar andere pagina's die u een goede typografie hebt en u zult zien dat geen van hen hetzelfde gebruikt lettertypegrootte ​ lijnhoogte en meet. Dus, waar je naar streeft, is gewoon tekst die gemakkelijk te lezen is.

De juiste maten instellen is moeilijker om schriftelijk uit te leggen, dus ik heb wat video's gemaakt om u te helpen lettertypegrootte ​ meten en leiding ​

Hier zijn enkele snelle richtlijnen om u te helpen ervoor te zorgen dat u een goede lettergrootte hebt, toonaangevend en meten.

Je lettertype is te klein als:

• Je moet je concentreren om de tekst te lezen
• Je moet je ogen plakken
• Je hebt de drang om in te zoomen

Je lettertype is te groot als:

• U begint met het opmerken van letterformaties in plaats van de inhoud te lezen
• Je kunt slechts één tot drie woorden tegelijk lezen
• Je hebt de drang om uit te zoomen

Uw tekstmaat is te lang als:

• Je moet je hoofd draaien om de tekst te lezen
• Je verliest de concentratie halverwege

Uw tekstmaat is te kort als:

• Je voelt je geïrriteerd als de tekst in de volgende regel breekt
• Je ogen worden moe van het stuiteren naar links en rechts snel

Je toonaangeven is te smal als:

• De tekst voelt dicht en overweldigend
• Je leest de verkeerde lijn van tekst per ongeluk

Je toonaangeven is te groot als:

• Je wordt afgeleid door de witte ruimte tussen de rijen van woorden

Onthoud altijd de definitie van goede typografie: Je bent niet na perfectie, je gaat gewoon gunnen voor tekst die gemakkelijk te lezen is. Toen u dit doet, wilt u uw type-keuzes met uw publiek testen (vrienden en medewerkers maken ook geweldige testers) om ervoor te zorgen dat u gelijk hebt. Ga alleen verder met het instellen van de formaten van andere elementen wanneer u klaar bent met het plaatsen van de tekst.

Het plaatsen van andere elementen

Veel ontwerpers en ontwikkelaars kozen de lettertypegrootte Voor elementen zoals H1 en H2 visueel, hopen gewoon dat deze magische getallen goed werken in hun ontwerp. Maar het is niet nodig om gewoon nummers uit de lucht te trekken; Typografen hebben eeuwenlange typografieschalen gebruikt om hiermee te helpen. Wat u doet, is een nummer uit de typografieschaal kiezen als de grootte van uw element. Helaas kunnen deze schalen niet rechtstreeks worden gebruikt voor het web omdat ze zijn gebouwd voor afdrukontwerp.

Tim Brown, een expert op het gebied van typografie, bedacht een oplossing die een modulaire schaal wordt genoemd. Het functioneert precies zoals een typografieschaal, behalve dat u de modulaire schaal construeert met de body-tekst die u hebt besloten.

Om de modulaire schaal te maken, neemt u de teksttekst lettertypegrootte (Ook gebeld BASE FONT-SIZE) en vermenigvuldig het met een verhouding talloze keren totdat u een schaal krijgt. Vaak is de verhouding die u gebruikt is afgeleid van muziek (omdat muziek roots in harmonie heeft). Hierboven is een voorbeeld van een schaal die is gemaakt met behulp van een Modulaire schaalcalculator ​

Wanneer je klaar bent met het construeren van de modulaire schaal, kun je verder gaan om de rest van je elementen te plaatsen, een nummer uit de schaal te kiezen als jouw lettertypegrootte ​Stel vervolgens de toonaangevende en meet met hetzelfde proces totdat u een goede balans hebt van leesbare elementen.

Verticaal ritme

De volgende stap is om de individuele elementen samen te helpen met behulp van een techniek die verticaal ritme wordt genoemd. Voor één element om harmonieus in de volgende te stromen, moeten we het ding aanpassen dat zich aansluit: de witte ruimte. Deze witte ruimte moet groot genoeg zijn om het ene element van de volgende duidelijk te onderscheiden, maar het moet klein genoeg zijn om ervoor te zorgen dat de stroom niet kapot is.

Hoeveel witte ruimte moet je gebruiken? Veel ontwerpers kiezen een figuur zoals 10px die gemakkelijk voor hen is om rond te ontwerpen. Veel ontwikkelaars, aan de andere kant, hebben de neiging een willekeurig getal (zoals 6px) uit een ander rasterysteem of een artikel dat ze online hebben gelezen. Geen wonder dat deze twee niet kunnen communiceren.

Zoals je me mag voorstellen, is het niet nodig om te vertrouwen op een magisch nummer voor de witte ruimte; We kunnen een veelvoud van de lijnhoogte waarde van onze lichaamstekst. Dit komt omdat we intensief witte ruimtepatronen in de tekst herkennen. Hoe sterker het patroon, de veiliger die we voelen, en hoe gemakkelijker het is om onze geest te laten dwalen in de inhoud.

Om verticaal ritme te gebruiken, is alles wat je doet:

1. Zet de witte ruimte tussen elementen naar een veelvoud van de basis lijnhoogte
2. Stel de lijnhoogte van alle andere elementen tot een veelvoud van de basis lijnhoogte

Het meerdere in kwestie hoeft niet een geheel getal te zijn. U kunt waarden zoals 0.5x en 1,25x van de basis gebruiken lijnhoogte om u meer flexibiliteit te bieden. Deze waarden werken omdat verticaal ritme het principe van herhaling gebruikt.

Baseline raster of nee?

Wanneer we verticaal ritme noemen, komt het concept van een baseline-rooster onvermijdelijk in de afbeelding. Hoewel het baseline-raster mogelijk behulpzaam kan zijn, is het meestal een treinwrak omdat beginners zoveel energie focussen op het maken van de tekst zitten tussen (of on) basislijnen die ze voelen dat het onmogelijk is om een ​​verticaal ritme goed te krijgen.

Eerlijk gezegd krijg je nooit baseline-roosters om perfect op het web te werken omdat de wiskunde in typografie altijd subpixels (zoals 24.8px) bevat, en alle browsers omgaan met subpixels. Sommige browsers zorgen ervoor dat bijvoorbeeld elk element op de pagina is uitgeschakeld door 1px. Deze 1PX-fouten accumuleren en drukken alle elementen die de pagina onder de pagina verder van het raster worden geplaatst. Als gevolg hiervan raad ik aan tegen het gebruik van een basislijnraster.

Ga verder, laten we een stap in het rijk van responsieve praktijken en ontwerpen voor meerdere schermen.

Typografie voor meerdere schermen

Het ontwerpen van typografie voor meerdere schermen is geen gemiddelde prestatie. Er zijn drie dingen die we van een ontwerpperspectief moeten doen.

Ten eerste hangt de afstand tussen de ogen van een gebruiker en hun scherm af van wat voor soort apparaat ze gebruiken. Over het algemeen zal de gebruiker het apparaat verder weg plaatsen bij het gebruik van een groter scherm. Dit fenomeen betekent dat u uw lettergroottes moet verhogen, aangezien de apparaatbreedte toeneemt.

Ten tweede willen we de verhoudingen tussen de lichaamstekst en andere elementen consistent houden. Dit betekent dat we de grootte van alle elementen moeten verhogen, omdat we de tekstgrootte van het lichaam vergroten.

Ten derde, op specifieke breakpoints willen we de lettertypegrootte van specifieke elementen (zoals de H1) door een ander nummer uit de modulaire schaal te kiezen. Hiermee kunnen we de visuele hiërarchie regelen en zorgen voor dat elementen net genoeg aandacht krijgen om een ​​gebruiker te laten lezen.

Codering voor responsieve typografie

We weten dat we onze tekstmaten proportioneel moeten verhogen. De eenvoudigste manier om dit te doen is om de lettertypegrootte binnen de HTML selector. We willen ook relatieve eenheden gebruiken om een ​​gebruiker te respecteren lettertypegrootte voorkeur.

 HTML {FONT-SIZE: 100%;}
@media (min-breedte: 40em) {
 html {font-size: 112,5%;}
} 

We willen ook een relatieve eenheid gebruiken voor andere elementen, dus ze schaal volgens de HTML lettertypegrootte ​ H2 in het onderstaande voorbeeld). Als u de lettertypegrootte naar een ander getal in de modulaire schaal, alles wat u doet, is het wijzigen van de lettertypegrootte overeenkomstig ( H1 hieronder).

 H1 {FONT-SIZE: 2.369EM;}
@media (min-breedte: 40em) {
 html {font-size: 3.147EM;}
​

H2 {FONT-SIZE: 1.777EM;} 

Hoewel het proces er eenvoudig uitziet, kunnen nieuwe ontwikkelaars een ton hoofdpijn onder ogen zien vanwege de betrokken wiskunde, daarom raad ik aan functies en mixen te gebruiken om te helpen. Ik gebruik vaak Mevrouw() van de Modulaire schaalbibliotheek ​Hiermee kunt u schrijven MS (4) in plaats van 3.157EM en MS (3) in plaats van 2.369EM ​

Een voorbeeld van een functie die de lading van het berekenen van verticaal ritme kan verlichten is:

  @function VR ($ Rhythm) {@return $ rhythm / 16 * 1REM;} 

Dit VR Functie stelt u in staat om te schrijven VR (3) Voor een veelvoud van drie basislijnen in plaats van het zelf te berekenen. Om u (en ikzelf) nog verder te helpen, heb ik een responsieve typografie-bibliotheek gemaakt genoemd Typi ​

Relatieve eenheden

Alle discussies over relatieve eenheden eindigen met een vraag of u zou moeten gebruiken rem of em eenheden. ik geloof dat rem en em hebben hun unieke gebruiksgevallen, en u moet ze in verschillende omstandigheden gebruiken. Hier zijn twee regels die u kunnen helpen kiezen welke eenheid te gebruiken is:

1. Gebruik em Als het pand moet schalen met lettertypegrootte
2. Zo niet, gebruik rem

Voor meer informatie over het kiezen tussen deze eenheden, Zie dit artikel ​

Het optellen

In dit artikel heb je de essentie van responsieve webtypografie geleerd. Natuurlijk vind je meer details terwijl je dieper duikt, zowel in theorie als implementatie, maar wat je hier hebt, dekt hier 80 procent van wat je nodig hebt in een echt project. Uitgerust met deze kennis, ben je klaar om te beginnen met praten met zowel ontwerpers als ontwikkelaars over het ontwerpen en coderen van goede typografie voor het responsieve web.

Responsieve typografie is niet ongelooflijk moeilijk. Het is gewoon uitdagend omdat je een enorme hoeveelheid geduld en ijver nodig hebt om relevante principes bloot te leggen en ze op een manier toe te passen die bij het web past.

Dit artikel verscheen oorspronkelijk in netto tijdschrift ​ Abonneer hier ​

Gerelateerde artikelen:

• Master Toegankelijke Web Typografie
• Ontwerp een responsieve site met EM-gebaseerde maat
• 10 regels voor het maken van gebruiksvriendelijke webformulieren