Reglerna för mottaglig webbtypografi

Responsive Web Typography är hård - du måste ha både designkoteletter och teknisk know-how. Men men knepigt det kan vara, att få det fel är inte ett alternativ, eftersom typografi är hörnstenen i webbdesign.

Hur får du både design och kod rätt? Hur kommunicerar dina utvecklare med pixel-pushing designers? Hur kan dina designers göra nonchalant utvecklare bryr sig om typografi? Det snabbaste och enklaste sättet är att få dina designers och utvecklare att tala samma språk, respektera varandra för deras hantverk och försöka förstå både principerna och begränsningarna för webbtypografi.

Denna artikel syftar till att ge både designers och utvecklare grunden för att börja kommunikationen om typografi. Vi kommer att täcka nödvändiga designprinciper och utforska praktiska lösningar för Responsiv typografi .

Vad är bra typografi?

"Bra" är alltid subjektivt; Det är inte ett fast ankare som vi kan gensa kommunikation på. För designers och utvecklare att kommunicera effektivt måste vi börja med att prata om en gemensam nämnare som båda sidor kan förstå. Den nämnaren är syftet med typografi.

Typografi är utseendet på text; Vi klä på text uppåt. Syftet med dressing är att göra bäraren tilltalande nog för att locka en konversation, men inte hålla så mycket uppmärksamhet att den andra parten blir distraherad från konversationen.

På samma sätt är syftet med typografi att göra det möjligt för läsarna att fokusera och fördjupa sig i innehållet i texten. God typografi, per definition, är typografi som hjälper till att uppfylla sitt syfte med kommunikation.

Två saker måste hända för läsare att fokusera och fördjupa sig i texten. Först måste typografin förmedla lämpliga (om någon) känslor. För det andra måste texten vara lätt att läsa. Detta leder oss till fyra väsentliga egenskaper du behöver få rätt.

• Typsnittsfamilj
• Textstorlek
• Linjehöjd (även kallad ledande)
• Textbredd (även kallad textmått)

Att få den högra fontfamiljen hjälper de underliggande känslorna av texten som skiner igenom. Att få de andra tre egenskaperna rätt garanterar att din text är lätt att läsa. För det mesta är designers utmärkta på att hitta den rätta fontfamiljen. Så, för resten av den här artikeln kommer vi att fokusera på de andra tre faktorerna.

Konsten av läsbar text

Det första steget i något projekt är att ställa in textstorlek , radavstånd och bredd av din kroppstext. Denna process kallas typsättning. Börja med att skriva med en sida som innehåller information som användaren behöver. Så mycket som möjligt bör den här sidan innehålla flera element, som H1, H2, H3, kroppstext och bildtexter, för vilka du måste göra ett medvetet val om vad som fungerar för din design. Ju fler element som din sida innehåller, desto bättre är dina chanser att ställa in ett typschema som fungerar över hela linjen.

När du väljer textstorlek , radavstånd och mäta för din kroppstext, se till att du använder riktigt innehåll. Om du inte har ett verkligt innehåll, använd text från Wikipedia istället för Lorem Ipsum.

Du måste också sätta dig i samma situation som du tyder på, eftersom avståndet mellan en läsarens ögon och skärmen är annorlunda för olika enheter. Om du lägger ut en mobil enhet, titta på din produktion via en telefon. Om du lägger ut en bärbar dator, sitta vid ditt skrivbord med din bärbara dator och så vidare.

När du har avgjort dig i rätt miljö, starta din typgivningsprocess genom att först välja textstorlek , följt av åtgärd och slutligen radavstånd . Tänk på att det inte finns någon perfekt kombination - bara titta på andra sidor du känner ha bra typografi och du får se att ingen av dem använder samma textstorlek , radavstånd och mäta. Så, vad du syftar till är helt enkelt text som är lätt att läsa.

Ställa in rätt storlek är svårare att förklara skriftligt, så jag har gjort några videor för att hjälpa dig med textstorlek , mäta och ledande .

Här är några snabba riktlinjer för att hjälpa dig att se till att du har en bra teckenstorlek, ledande och åtgärd.

Din typsnitt är för liten om:

• Du måste koncentrera dig för att läsa texten
• Du måste sänka dina ögon
• Du har uppmaningen att zooma in

Din typsnitt är för stor om:

• Du börjar märka brevformer istället för att läsa innehållet
• Du kan bara läsa en till tre ord i taget
• Du har uppmaningen att zooma ut

Din textmått är för lång om:

• Du måste vända huvudet för att läsa texten
• Du förlorar koncentrationen halvvägs genom

Din textmått är för kort om:

• Du känner dig irriterad när texten bryts till nästa rad
• Dina ögon blir trött från studsar till vänster och rätt snabbt

Din ledande är för smal om:

• Texten känns tät och överväldigande
• Du läser felaktigt textlinje

Din ledande är för stor om:

• Du blir distraherad av det vita utrymmet mellan rader av ord

Kom alltid ihåg definitionen av god typografi: Du är inte efter perfektion, du är helt enkelt gunning för text som är lätt att läsa. När du gör det, vill du testa dina typgivarval med din publik (vänner och medarbetare gör också bra testare) för att du är rätt. Flytta bara på för att ställa in storleken på andra element när du är klar med att skriva kroppstexten.

Typeetting andra element

Många designers och utvecklare valde textstorlek För element som H1 och H2 visuellt, och hoppas helt enkelt att dessa magiska nummer fungerar bra i sin design. Men det är inte nödvändigt att bara dra siffror ur tunn luft; Typografer har använt typografi vågar i århundraden för att hjälpa till med detta. Vad du gör är att välja ett nummer från typografiska skalan som storleken på ditt element. Tyvärr kan dessa skalor inte användas direkt för webben eftersom de är byggda för utskriftsdesign.

Tim Brown, en expert på typografi, kom upp med en lösning som kallades en modulär skala. Det fungerar precis som en typografi skala, förutom att du konstruerar den modulära skalan med den kroppstext du har bestämt dig för.

För att skapa den modulära skalan tar du kroppstexten textstorlek (även kallad basfontstorlek) och multiplicera den med ett förhållande flera gånger tills du får en skala. Ofta är det förhållandet du använder från musik (eftersom musik har rötter i harmoni). Ovan är ett exempel på en skala som skapats med hjälp av a Modulär skala kalkylator .

När du är klar med att bygga den modulära skalan, kan du gå vidare för att skriva resten av dina element och plocka ett nummer från skalan som din textstorlek . Ställ sedan in den ledande och mäta med samma process tills du får en bra balans av läsbara element.

Vertikal rytm

Nästa steg är att hjälpa till att gela de enskilda elementen tillsammans med en teknik som kallas vertikal rytm. För att ett element ska flöda harmoniskt i nästa, måste vi tweak den sak som ansluter sig till dem: det vita utrymmet. Detta vita utrymme måste vara tillräckligt stort för att skilja ett element från nästa tydligt, men det måste vara tillräckligt liten för att flödet inte är trasigt.

Hur mycket vitt utrymme ska du använda? Många designers väljer en figur som 10px som är lätt för dem att designa. Många utvecklare, å andra sidan, tenderar att piska ut ett slumptal (som 6px) antingen från ett annat gallersystem eller en artikel som de har läst online. Inte konstigt att dessa två inte kan kommunicera.

Som du kan tänka dig är det inte nödvändigt att förlita sig på ett magiskt nummer för det vita utrymmet; Vi kan använda en multipel av radavstånd värde av vår kroppstext. Detta beror på att vi instinktivt känner igen vita rymdmönster inom text. Ju starkare mönstret, den säkrare vi känner, och det är lättare att låta våra tankar vandra in i innehållet.

Att använda vertikal rytm är allt du gör:

1. Ställ in det vita utrymmet mellan element till en multipel av basen radavstånd
2. Ställa in radavstånd av alla andra element till en multipel av basen radavstånd

Den aktuella aktuella frågan behöver inte vara ett heltal. Du kan använda värden som 0,5x och 1,25x av basen radavstånd att ge dig mer flexibilitet. Dessa värden fungerar eftersom vertikal rytm använder repetitionsprincipen.

Baslinje galler eller nej?

När vi nämner vertikal rytm, kommer begreppet ett baslinjenät oundvikligen in i bilden. Även om baslinjens nät kan vara till hjälp är det för det mesta ett tågbrott eftersom nybörjare fokuserar så mycket energi på att göra text sitta mellan (eller på) baslinjer som de tycker att det är omöjligt att få vertikal rytm rätt.

Ärligt talat kommer du aldrig att få baslinjegrångs att fungera perfekt på webben eftersom matematik i typografi alltid innehåller subpixlar (som 24.8px), och alla webbläsare hanterar subpixels annorlunda. Till exempel orsakar vissa webbläsare varje element på sidan att vara avstängd av 1px. Dessa 1px-fel ackumuleras och trycker på några element som är placerade nedåt nere sidan ännu längre av gallret. Som ett resultat rekommenderar jag att du använder ett baslinjegrång.

Flytta vidare, låt oss gå in i realm av lyhörd praxis och designa för flera skärmar.

Typografi för flera skärmar

Att designa typografi för flera skärmar är ingen genomsnittlig prestation. Det finns tre saker vi behöver göra ur ett designperspektiv.

För det första beror avståndet mellan en användares ögon och deras skärm på vilken typ av enhet de använder. Generellt kommer användaren att placera enheten längre bort när du använder en större skärm. Detta fenomen innebär att du måste öka dina teckensnittstorlekar när enhetens bredd ökar.

För det andra vill vi hålla proportionerna mellan kroppstexten och andra element som är konsekventa. Det innebär att vi måste öka storlekarna på alla element när vi ökar kroppstextstorleken.

För det tredje, vid specifika brytpunkter vill vi öka textstorlek av specifika element (som H1) genom att välja ett annat nummer från den modulära skalan. Om du gör det möjligt för oss att kontrollera den visuella hierarkin och säkerställer att elementen ger tillräckligt med uppmärksamhet åt att dra en användare att läsa vidare.

Kodning för responsiv typografi

Vi vet att vi måste öka våra textstorlekar proportionellt. Det enklaste sättet att göra detta är att öka textstorlek inom html väljare. Vi vill också använda relativa enheter för att respektera en användares textstorlek preferens.

 HTML {FONT-STORLEK: 100%;}
@Media (min-bredd: 40EM) {
 HTML {FONT-STORLEK: 112,5%;}
} 

Vi vill också använda en relativ enhet för andra element, så de skala enligt HTML textstorlek ( h2 i exemplet nedan). Om du behöver ändra textstorlek Till ett annat antal i modulskalan är allt du gör ändrat textstorlek Följaktligen ( h1 Nedan).

 H1 {FONT-STORLEK: 2.369;}
@Media (min-bredd: 40EM) {
 HTML {FONT-STORLEK: 3.147EM;}
}

H2 {FONT-STORLEK: 1.777EM;} 

Även om processen ser enkel ut, kan nya utvecklare stå inför massor av huvudvärk på grund av de inblandade matematik, varför jag rekommenderar att du använder funktioner och mixins för att hjälpa till. Jag använder ofta Fröken() från Modular Skala Bibliotek . Med detta kan du skriva MS (4) istället för 3.157EM och MS (3) istället för 2.369 .

Ett exempel på en funktion som kan underlätta belastningen av beräkning av vertikal rytm är:

  @Function VR ($ Rhythm) {@return $ rhythm / 16 * 1rem;} 

Detta vr Funktion gör att du kan skriva VR (3) För en multipel av tre baslinjer istället för att beräkna det själv. För att hjälpa dig (och jag själv) ut ännu längre, har jag skapat ett lyhörd typografibibliotek som heter Typi .

Relativa enheter

Alla diskussioner om relativa enheter slutar med en fråga om du ska använda rem eller em enheter. jag tror det rem och em Har sina unika användningsfall, och du bör använda dem under olika omständigheter. Här är två regler som kan hjälpa dig att välja vilken enhet som ska användas:

1. Använda sig av em Om egendomen behöver skala med textstorlek
2. Om inte, använd rem

För mer information om hur du väljer mellan dessa enheter, Se den här artikeln .

Summera upp det

I den här artikeln har du lärt dig väsentliga av mottaglig webbtypografi. Självklart hittar du mer detaljer när du dyker djupare, både i teorin och implementering, men det du har här täcker 80 procent av vad du behöver i ett riktigt projekt. Utrustad med denna kunskap är du redo att börja konversera med både designers och utvecklare om hur man designar och kodar bra typografi för den lyhörda webben.

Responsiv typografi är inte oerhört svårt. Det är bara utmanande eftersom du behöver en stor mängd tålamod och noggrannhet för att avslöja relevanta principer och tillämpa dem på ett sätt som passar webben.

Denna artikel uppträdde ursprungligen i nätmagasin . Prenumerera här .

Relaterade artiklar:

• Master tillgänglig webbtypografi
• Designa en responsiv webbplats med EM-baserad limning
• 10 Regler för användarvänliga webbformulär