Nyckelfaktorer för responsiv webbtypografi

6

Det sägs "Döm aldrig en bok efter dess omslag", men forskning visar att 50 millisekunder är vad det tar för en onlineanvändare att bestämma sig för om han inte ska stanna kvar på din webbplats.

En annan undersökning av Stanford som studerade webbens trovärdighet fann att 75 % av användarna medgav att de gjort sin bedömning om ett företags trovärdighet baserat på deras webbdesign. Bra webbtypografi är inkörsporten till att generera fler företagsförfrågningar och efterföljande konverteringar.

Det är självklart att information måste visas attraktivt och effektivt. Problemet är dock att det finns en stor variation av mobila enheter och därför måste typografi överensstämma med alla dessa plattformar.

Så hur använder vi webbtypografi på bästa sätt?

1 Omtänksam användning av teckensnitt säkerställer att typografin är responsiv men ändå effektiv

Ända sedan Font Face-funktionen introducerades välkomnade webbdesigners friheten att använda olika typsnitt i sina designs. Detta stod i skarp kontrast till den tidigare eran, då endast webbsäkra färger användes.

Med många teckensnitt tillgängliga till sitt förfogande måste designers veta det rätta sättet att använda dem. Responsiv webbdesign används av de flesta webbplatser och det har satt gränserna för spelet av typografi, som nu designas efter olika typer av enheter och respektive skärmstorlekar. Därför måste webbdesigners vara försiktiga när de kombinerar flera teckensnitt i ett responsivt webbdesignsystem. Använd inte för många typsnitt för en webbplats. Håll det hellre till en uppsättning av tre. Det kommer att säkerställa en renare och effektivare webbdesign. Undvik samtidigt att använda mycket populära typsnitt, eftersom det kanske inte ger din sida ett försprång gentemot andra.

Fallstudie: Checkout vox.com. Den här webbplatsen kombinerar två Sans-Serif-teckensnitt och gör det utan ansträngning. De använder Balto för alla sina rubriker, Alright Sans för brödtexten, förutom Harriet som varvas genom sajten internt. Det resulterande utseendet är rent och elegant.

Tvärtom, kolla in angelfire site. Den här sidan innehåller flera typsnitt och ser sjaskig och oprofessionell ut.

2 Markera dina rubriker

Studier inom webbtypografi har visat att en webbplatss typografi får sina rubriker att sticka ut. Detta leder till att dina webbbesökare spenderar mer tid på din webbplats. För att uppnå detta, använd glyfer och ligaturer för att ge dina rubriker ett unikt utseende.

Ligaturer är bokstäver som verkar vara sammankopplade. Till exempel är bokstäverna f och i, som utgör den första delen av ordet fisk, sammanfogade som ‘fi' i ett typsnitt. Du kan enkelt lägga till ligaturer genom webbläsarens font-feature-inställningar eller genom att arbeta med "Text Rendering-OptimiseLegibility" funktioner. Firefox har redan standardligaturer. Användning av specifik kombination av ligaturer i specifika teckensnittstyper kan lägga till skönhet och stil till din webbdesign. Ligaturer kan slås på eller av i menyerna Text, Typ eller Open Type i sidlayoutprogramvaran. Programvaran kommer att säkerställa automatisk infogning av ligaturer där de associerade bokstäverna möts.

Fallstudie: Kolla denna webbplats så kan du enkelt se hur eleganta deras ligaturer ser ut. Dessa vackert utformade rubriker när de läggs till på din webbplats skulle definitivt förbättra dess utseende och ge dina tittare en bättre användarupplevelse.

3 Få din webbplats att prata med sin publik genom lämplig användning av teckensnitt i olika storlekar och färger

Som framgår av figuren ovan måste vi välja de typsnitt som kan läsas och ses tydligt på mobilskärmar såväl som stationära skärmar. Stilen i vilken typsnitt visas på tryckta medier skiljer sig från hur de visas på digitala medier. Vi måste förstå teckensnittsfamiljen, stilen och effekten. Specifikationerna för webbteckensnitt ges i CSS-specifikationerna av W3C som anger att Serif, Sans-Serif, Monospace, Fantasy och Cursive är teckensnittsfamiljer.

För det andra, välj typsnitt enligt din webbplats tema eller kategori. Detta kommer att säkerställa att din webbsida kommer att tala till din målgrupp och producera det önskade resultatet. Serif-teckensnitt kan också användas för att öka textens läsbarhet, vilket ytterligare bidrar till att skärpa röstens genomslagskraft. Problemet här är att denna egenskap hos Serif fungerar bra på högupplösta skärmar, men kan leda till oönskade resultat för skärmar med lägre upplösning. Det är lämpligt att använda konstnärliga typsnitt för korta rubriker, medan mer dämpade teckensnitt för brödtexten.

4 Modulering av måttet är viktigt för responsiv typografi

Radlängden på en webbsida måste moduleras. Modulering av måttet eller radlängden för ett teckensnitt bidrar till typografins lyhördhet. Responsiv design inkluderar responsiva ändringar i teckensnitt enligt kraven för olika skärmstorlekar. Därför är detta ett måste.

Termen "mått" eller "radlängd" har ett samband med läsbarhet eller hur människor läser en text på webben. Att öka eller minska radlängden på teckensnittet är ett sätt att skapa responsiv webbtypografi. Den idealiska radlängden eller måttet är mellan 45-75 tecken per rad per utskrift eller webbsida, inklusive mellanslag och skiljetecken. Detta kan utökas till 45-85 tecken per rad. Detta har härletts från forskning om hur människor läser text och deras motsvarande ögonrörelser. På grundval av detta rekommenderar vissa experter vänsterjusterad text som lämplig för webbinnehåll eftersom ögonens läsrörelser följer en horisontell riktning från vänster till höger.

Fallstudie: Webbplatssviten begränsar tecken per rad till ungefär 75 tecken. Som du kan se ser den elegant ut och kan hålla tittarna intresserade medan de läser den.

Å andra sidan har webbplatsen gatesnfences minst 120 tecken per rad. Som ett resultat ser det osmakligt ut och skulle avskräcka en från att läsa innehållet.

5 Användning av olika teckenstorlekar förbättrar läsbarheten på olika avstånd från skärmen. Detta är ett krav för responsiv typografi.

Välj den teckenstorlek som säkerställer att teckensnittet är synligt och läsbart. Detta kan behöva komma med en kompromiss om den "ideala åtgärden", vilket kan vara lite svårt för designers. Det knepiga är att det "ideala måttet" kommer med antingen en minskning av teckenstorlek eller en ökning av teckenstorlek vilket kan göra texten oläslig. Summan av kardemumman är att innehållet ska vara bekvämt att läsa för tittarna. Därför är ett av nyckelelementen i responsiv typografi att säkerställa att olika teckenstorlekar används för olika läsavstånd. Det finns en metod för att beräkna teckenstorleken som uppfattas vid olika läsavstånd och storlekskalkylatorer finns tillgängliga för att åstadkomma detta.

Fallstudie: Kolla in webbplatsen moonbase. Det här är en webbplats som hjälper kunder att designa sina webbplatser och varumärken sina företag. Texten i mitten av bilden sticker ut och förmedlar meningen om vad webbplatsen handlar om. Vi kan se det med en blick. Detta fångar en användares uppmärksamhet och tvingar sedan att gå igenom resten av webbplatsen som är skriven i en standard teckenstorlek.

6 Responsiv typografi kräver att webbläsare kan stödja olika typsnitt

När du designar webbplatser med specifika anpassade typsnitt måste du se till att webbläsaren kan stödja inläsning och visning av dessa typsnitt. Även om din kod är felfri och tydlig kan problem med webbläsarens inkompatibilitet motverka dina ansträngningar. Du måste också kontrollera om formatet som dina teckensnittsfiler sparas i är kompatibelt med det teckensnitt du vill använda på webbsidan. Inkompatibilitetsproblem kan påverka laddningen av dina teckensnitt och därmed visningen av dina webbsidor.

Fallstudie: Vi kan dra slutsatsen av ovanstående att vi antingen måste använda standardteckensnitt eller använda "fontstackar". Det första steget är "teckensnittstestning" för att ta reda på om typsnittet är "webbsäkert" eller inte. I huvudsak ser en webbläsare på varje sekvens av teckensnitt som första teckensnittsval, andra teckensnittsval, tredje teckensnittsval och så vidare. Om en webbläsare inte kan hitta något av teckensnitten i sekvensen kommer den att återgå till en standard Serif, Sans Serif eller Monospace, beroende på vilken typsnittsklassificering som används.

Till exempel har en stor andel av operativsystemen typsnittet Century Gothic. Du kan därför skapa en teckensnittsstack som började med Century Gothic som ditt första teckensnittsval, följt av Arial, Helvetica och slutligen en Sans-Serif generisk klassificering. I CSS, notera, typsnitt med flera ord i titeln måste placeras inom citattecken. Till exempel teckensnittsfamilj: "Century Gothic", Arial, Helvetica, Sans-Serif.

Detta skulle berätta för webbläsaren att först leta efter typsnittet Century Gothic. Eftersom en stor del av systemen har detta typsnitt, skulle de flesta av dina tittare se webbplatsen visas med Century Gothic. För tittare utan Century Gothic skulle webbläsaren först falla tillbaka till Arial, sedan Helvetica och slutligen till ett Sans-Serif-alternativ.

7 Faktorer relaterade till teckensnitts fysiska egenskaper kan påverka flexibiliteten i användningen av teckensnitt för design

Även om det finns en stor möjlighet till flexibilitet med avseende på mått, radavstånd, teckenstorlek och även om variationerna i dessa kan göras för att passa layouten, kan responsiv typografi begränsas av faktorer som påverkar själva glyferna. Dessa är vikt, bredd, slagkontrast, nedstigning och optisk storlek. Ändringar i dessa parametrar kan påverka webbplatsen. Det finns tillgängliga verktyg som hjälper designers att övervinna dessa begränsningar genom att designa olika typer av typsnittsstilar genom matematiska interpolationer mellan typsnittsfamiljer inom de fysiska parametrar som de ställer in.

Två exempel på sådana verktyg är Superpolator eller FlowType.js. När skärmstorleken minskar, förstoras den relativa proportionella skillnaden mellan skalorna. Därför måste det finnas en balans mellan storleken på skärmen och den relativa skalan. Vissa skalor har utformats med detta i åtanke, och dessa kan användas för design av mer effektfulla webbplatser. Andelen avser antalet gånger rubrikens teckensnitt är större eller mindre än brödtexten. Det är därför vi behöver responsiv typografi. Vi behöver typografi som anpassar sig för att krympa vid brytpunkter eftersom designers inte kan gå igenom besväret att återställa alla sina baslinjestilar för varje typografiskt element på sin sida.

Fallstudie: Kontrollera flödestyp. Dra skjutreglaget så ser du vad responsiv typografi gör, tack vare verktyg som Superpolator och FlowType.js.

Responsiv typografi fulländas med övning. Med lite kunskap om hur man använder mediafrågor och en uppsättning enheter med olika skärmstorlekar att testa på kan du bemästra detta. Nu när du är medveten om vad som behöver göras för att få den bästa typografin, attrahera fler visningar och konvertera fler potentiella kunder, kan du implementera ovanstående principer för att se dem förverkligas i fysisk verklighet.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More