Standarden för typografi på webben har skiftats. Designers går med större, lättare att läsa typografi som är mer sömlös och konsekvent över enheter. Utvecklingen mot större webtypografi började med överdimensionerade behandlingar ovanför rullningen, från rubriker till mer konstnärliga hjältehuvudtextelement.
Kroppstextstorlekar började samtidigt öka på mobila enheter för att förbättra läsbarheten. Och därifrån började trenden ner till nästan alla aspekter av webbtypen. Om du inte har tänkt på storleken på kopian på din webbplats nyligen, är det dags att återvända till den 12 eller 14-punkts / pixel kroppskopia. Stor text finns i!
Oversized Headlines
Den mest uppenbara och enklaste implementeringen av större text är att använda överdimensionerade rubriker för att kräva användarens uppmärksamhet.
En överdimensionerad rubrik fungerar bäst när det inte finns många långa eller komplicerade ord att överväga. Det här är en in-your-face behandling så att den faktiska bokstaven måste vara lätt att förstå.
Tips för framgång:
- Håll dig till en serif eller sans serif typsnitt som du kan använda i andra delar av designen. Nyhet eller skript alternativ kan bli svårt snabbt.
- Gör det stort - obehagligt stort - och sedan tillbaka lite för att hitta rätt harmoni i designen.
- Börja med text som är minst 80 poäng och expandera för att fylla skärmen. Se till att du använder en relativstorlek i den slutliga designen så att den ska skala på lämpligt sätt på alla enheter. (Den lämpliga CSS-regeln är? Typsnittstorlek, som använder en procentskala baserat på en standardstorlek som är 100 procent.)
Göra fallet för större kroppskopia
Om kroppskopian på din webbplats inte är minst 16 poäng är det dags att ompröva din typografisituation.
Denna? Regel? har rötter i mobilen eftersom text som är mindre än för inmatningar faktiskt kommer att zooma in på vissa enheter. (Detta kan vara irriterande när det gäller användarupplevelse.) Designfixningen är att skapa typfält som är tillräckligt stora för att läsa och förstå med lätthet.
Vidare är målet att text på en mobil enhet är bekvämt läsbar när den hålls på ett naturligt avstånd (vanligtvis ungefär en halv armlängd, som liknar att läsa en bok).
Större text kan vara lättare att läsa på detta avstånd och är mer lämpligt för skärmstorleken. Användare borde inte behöva knäppa eller föra enheten närmare sitt ansikte för att rimligen förstå texten.
Tips för framgång:
- Börja med en kropps kopi storlek på ca 16 poäng. Detta är vanligtvis acceptabelt för stationära och mobila enheter.
- Använd ett mycket läsbart teckensnitt med en vanlig slagbredd och rena linjer för att maximera läsbarheten.
- Justera storleken upp eller ner något för tecken som är tunna (gör det större) eller breda (gör det mindre).
- För text-tunga sidor, överväg att gå ännu större med kroppstext för att minska ögonsträckan, till exempel 18 poäng eller till och med 20 poäng. (Som en guide använder Medium 21-punkts kroppstext och Jeffrey Zeldmans webbplats är 24 poäng.)
Öka övergripande hierarki
Så du måste göra mer än bara justera textstorleken på en del av din webbdesign. Du måste ompröva hela typografihierarkin.
När storleken på kroppstexten ökar, vill du skala resten av typen i enlighet med detta. Annars kan du sluta med en skrynklig typografisk skala där vissa textstorlekar är svåra att skilja sig från varandra.
När det gäller att öka storleken på stor typografi, till exempel rubriker eller underrubriker, är det lite mindre viktigt att justera den övergripande typografiska skalan. Även när dessa element blir större kommer den naturliga skillnaden från kroppstexter att förbli (självklart). Du bör överväga att öka den totala kroppstextstorleken också om den börjar se ut ur platsen eller om storleken på den stora typen gör att kroppstexten verkar mindre än den egentligen är. (Optiska illusioner kan förstöra en designhierarki.)
Tips för framgång:
- Justera textstorlekar i proportion till varandra i hela designen.
- Var uppmärksam på hur färg och storlek kontrast påverkar utseendet att låta storlekar.
- Lita på dina ögon; Om texten ser alltför stor eller liten ut, fortsätt att göra justeringar tills det känns rätt.
Glöm inte att justera linjeavståndet
Under det att du gör anpassningar till textelementen, försumma inte mellanslag mellan linjer av typen. Större textstorlek kräver ofta ökad linjeavstånd.
Överväg att skapa regler för linjeavstånd baserat på en procentandel av textstorleken i stället för en fast höjd. (På så sätt ändras dessa justeringar automatiskt.)
Tips för framgång:
- Börja med 1,5 gånger (150 procent) kroppstypstorleken för linjeavståndet för samma block till text. Om det känns tätt, öka linjenavståndet.
- Bakgrunds- och textelement med extrem kontrast behöver ofta lite extra linjeavstånd för en mer harmonisk känsla. Lägg till linjeavstånd för vit text på en svart bakgrund, minska den lite för gråtoner i mittentonen.
- Var uppmärksam på uppstigningar och nedstigningar av ditt valda typsnitt och justera linjeavståndet i enlighet därmed.
Textstorlekar ökar offline, alltför
Och medan denna typografi trend är mestadels riktad mot webbdesign projekt, ökar textstorleken i allmänhet. Från e-post till tryckt material använder designers samma riktlinjer för digitala projekt med tryckta mönster av liknande storlek. (Du kan jämföra en mobil enhet till ett vykort.)
Bra design är bra design.
Och så många projekt innehåller flera komponenter där vi fokuserar på en gemensam användarupplevelse. Så du vill att utformningen av en webbplats ska tyckas likna utformningen av ett relaterat vykort.
Den andra commonalityen är att dina ögon börjar bli vana vid att se text i en viss storlek. Precis som att arbeta med användarmönster, gör visuella mönster det enklare att förstå och se snabbt. Större text är inget undantag.
Slutsats
Har du börjat märka ett skifte i de storlekar du använder för typografi i olika designprojekt? Personligen blev jag förvånad över hur snabbt det snurrade på mig. Jag tycker faktiskt att jag själv trycker på större och större typstorlekar hela tiden.
Så här börjar trender och förändringar i gemensamma designmönster. Jag skulle gärna höra dina erfarenheter med att prova större typ. Var det väl mottaget eller fick du mycket pushback? Låt mig veta på Twitter och tagga @designshack.