Gör denna typ mitt design ser fett?

Ingenting kan förstöra en design som typografi som inte passar. Oavsett om det är för stort (eller för litet), är felaktig typskalning ett stort problem.

Det är ett problem för fler mönster än du kanske tror. Alltför ofta besöker du en webbplats där typen gör vackert på en skrivbords-webbläsare, bara för att återkomma senare från en telefon och det är svårt att läsa. Det händer hela tiden.

Problemet är att typen inte var verkligen skalad för varje enhet. Det är ett helt undvikbart problem när man överväger en typografisk skala för projekt.

Vad är en typografisk skala?

En visuell typografisk skala inkapslar storlekarna, utrymmet och proportionerna av typelement i förhållande till varandra i ett projekt. Detta inkluderar allt från huvudtextens textstil till rubriker, underrubriker, bildtexter och annat textelement.

Skalan hjälper till att bestämma storlek och placering av textelementen i förhållande till varandra. För webbdesign motsvarar visuell typskala ofta ofta taggar i din CSS (som h1, h2, h3, p osv.).

En typskala hjälper dig att skapa harmoni och rytm i designen. Det håller dig också borta från stilistiska problem eftersom textelementen motsvarar CSS-element så att varje del av konstruktionen använder samma element och konsistens.

Skalan ska baseras på kroppstypens storlek. (Ange alltid en typ och storlek för det först). Bygg sedan skalan runt denna huvudtypografi. Inte säker på var du ska börja? Google har en fast rekommendation :

1. Använd en basstorlekstorlek på 16 CSS-pixlar. Justera storleken baserat på egenskaperna för det teckensnitt som används.
2. Använd storlekar i förhållande till basstorleken för att definiera typografisk skala.
3. Texten behöver vertikalt utrymme mellan tecken; Den allmänna rekommendationen är att använda webbläsarens standardlinjehöjd på 1,2 em.
4. Begränsa antalet typsnitt som används och typografisk skala.

Skapa harmoni och rytm

En typskala gör det lättare för användare att flytta genom kopian, det skapar harmoni och rytm för textflödet. Detta är viktigt på vilken enhet som helst.

Så var börjar du?

UX Matters har några av de bästa forskningen som finns tillgängliga på minimum textstorlekar per enhet . Observera att dessa är minsta storlekar och eftersom kroppstypstorlekarna fortsätter att öka (liksom linjeavståndet) bör du starkt överväga större punktstorlekar. Steven Hoober rekommenderar att man börjar minst 40 procent större än de rekommenderade miniminivåerna. Vidare kan förbättrade innehållsstilar gå upp till 80 procent över minimumet, men du bör vara försiktig med exceptionellt stor typ också.

När kroppstextstorleken är inställd kan du bestämma hur du storlekar på stödjande textelement. Det finns en fin konst och ögontestet är ofta ett bra ställe att börja.

Det finns nästan inget sådant som en rubrik som är för stor. Säg vad du behöver säga och storlek för att skala orden i utrymmet. En rubrik med två linjer kommer att känna sig större än en linje även om texten är exakt densamma.

Det enklaste sättet att tänka på att skala upp för rubriker och andra större testelement fungerar i procent baserat på kroppstexten. Medan varje formgivare har en annan utgångspunkt är 250 procent större än kroppstexten en bra ballpark för rubriken; 150 procent för h2, 75 procent för h3 och 50 procent för element som block citat. (Detta är inte en regel, bara en utgångspunkt.)

Här är varför procentuellt, snarare än inställda storlekar, är viktiga: När du har bestämt storleken på kroppstypen justerar storleken på storlekarna oavsett skärmstorlek. Varje typelement är i förhållande till kroppstypen.

Tecken och distansriktlinjer

Det finns några andra riktlinjer som designers ser lika bra ut när det gäller att skriva på skärmen. När det gäller avstånd, har en av tumreglerna varit att titta på tecken per rad för att säkerställa läsbarhet.

• Skrivbord och stora enheter: 60 till 75 tecken per rad
• Telefoner och små enheter: 35 till 40 tecken per rad

Observera att läsbarheten på mindre skärmar är baserad på att ha färre tecken (större text).

Samma idé gäller också avstånd. Du behöver mer utrymme mellan textrader när skärmstorleken är begränsad för att göra det enklare för användare att läsa och skanna innehåll. Överväg att lägga till 25 procent mer radavstånd på mindre enheter än för skrivbords typografi.

Den extra storleken och avståndet underlättar den täta eller knäppta känslan som användarna kan känna när de försöker läsa på mindre enheter. Eftersom duken är liten är läsarens flöde och läsbarhet avgörande för att användarna ska bläddra.

Tips för att komma igång

Det finns många sätt att skapa en typografisk skala och se till att texten inte får din design att bli fet. Hur du handlar om det beror sannolikt på din komfortnivå med kod och utveckling utöver designen.

Det bästa alternativet är att använda en responsiv design med mediefrågor. Detta är alternativet designer-developer som ger störst kontroll över textspecifikationerna. (För mer gå tillbaka till de här Google-rekommendationerna ovan.)

En annan väg är att designa olika versioner. Även om detta är en ganska gammal koncept, finns det fortfarande vissa ställen med hjälp av mobila webbadresser och stationära webbadresser för sina webbplatser. Det rekommenderas inte i de flesta fall, men för vissa webbplatser där designen är dramatiskt annorlunda eller användarna upplever olika saker kan det vara ett alternativ.

Det enkla alternativet är att börja med ett tema för din webbplats. Var noga med att välja ett fullt mottagligt alternativ. När du använder ett högkvalitativt responsivt tema tas det mesta av gissningen ut av det för dig. Allt du behöver tänka på är kroppens textstorlek. Se bara till att kontrollera allt för att säkerställa att mobiltypstorlekarna uppfyller dina standarder.

3 verktyg för att skapa en typskala

Det finns ett antal verktyg tillgängliga för att hjälpa dig att se den exakta effekten av en visuell typografi skala. Här är några av de bästa och mest användarvänliga alternativen.

• Typ skala : Ange text och spela med alternativ som storlek, skala och typsnitt direkt på skärmen. gradera CSS eller redigera koden direkt från verktyget;
• Modular Scale : Skalan fungerar som en regel för att bestämma storlekar för typ; ladda sedan resultaten som ett Sass eller JS-plugin eller se dem på skärmen;
• Golden Ratio Typography Calculator : Verktyget optimerar storlek, linjens höjd, bredd och tecken per rad med hjälp av det gyllene förhållandet

Slutsats

Den rätta typografiska skalan gör att din design ser trim och svelte. Det är den extra harmoni som användarna kanske inte förstår, men bidrar till övergripande läsbarhet och användbarhet.

Det är troligt att skalan är avstängd om designen "bara inte ser rätt ut." Felaktig storlek kan vara svår att bestämma men är ofta en plats att se när något om en design är ojämnt. Spela med några olika alternativ för skalan innan du bestämmer dig för någonting, och kom ihåg att trenden just nu är för typen som är lite större än tidigare.

• ← Möt mannen bakom Comic Sans
• WeTransfer avslöjar ny varumärkesidentitet och användargränssnitt →