Grunderna i typografi i webbdesign: Dessa saker bör du tänka på

Mark Max Henckel Senast uppdaterad den 21 oktober 2020
14 Min.
webbdesign för typografi
Senast uppdaterad den 21 oktober 2020

Enkelt är svårt. Det är min ledstjärna. Och så är det också med användning av typografi i webbdesign, av typsnitt på hemsidan - faktiskt ganska enkelt och ändå ganska komplicerat. Det är därför jag vill visa dig idag vilka grundläggande typografi regler du bör följa för att bäst representera text på din webbplats.

Det är ingen hemlighet att det är svårt för många människor att uttrycka sig tydligt och begripligt. Varför ska det vara lättare via media? För att göra detta enklare - kommunikation - det finns typografi. Å ena sidan är det undervisningen i skrifter, å andra sidan är det ett designelement för att skicka texter eller innehåll för att representera dem enligt målet eller "estetiskt tilltalande". Skillnaden mellan mikrotypografi och makrotypografi är irrelevant i detta led.

Typografi i webbdesign - Varför är det så viktigt?

typografi grunderna webfonts

Det råder ingen tvekan om att teckensnitt kan stärka och visuellt berika en webbplats. Teckensnitt - teckensnitt - är viktiga element i någon bra design. På Internet, det vill säga i webbdesign, är saken med typografi föremål för speciella villkor, som jag skulle vilja belysa här och som bör hjälpa dig att bättre förstå saken med skriften på webbsidor.

" Bra typografi letar inte efter allt som fortfarande är möjligt, men ber om vad som behövs."
Kurt Weidemann

Webbplatser tillverkas ofta inte av utbildade grafiska designers eller mediedesigners, men utformas och implementeras av nykomlingar. Detta kan förklara varför även de enklaste grafiska reglerna ignoreras på många sidor. Särskilt när det gäller typografi blir detta snabbt tydligt. Den okuvliga användningen av dåligt läsbar VERSALIA, bristen på kontrast mellan teckenfärg och bakgrund, samt den förvirrande strukturen i texterna gör det svårt för användarna att läsa.

Men det är just det typografi handlar om: texternas läsbarhet. Varför ska man annars ha texter på hemsidan om de inte är bra och trevliga att läsa? Förmodligen är spökena av hur lättlästa texter ska se ut i slutet uppdelade. Jag kan inte förstå det, eftersom vi har enkla, beprövade och mycket användbara typografiskaregler i grafiken för att skapalättlästa texter. Typografi.

En av dem är kontrast —det vill säga färgförhållandet mellan teckenfärg och bakgrund. I ett forum, kritiserade jag en gång en stolt presenterade webblayout för just denna anledning. I grafiken nämner vi fenomenet som den påstådda webbdesignern ville sälja här "vit örn på en vit bakgrund". I det här fallet hade den en mörkgrå text på en ljusgrå bakgrund, det vill säga en mycket dålig kontrast.

Detta kan se ganska trevligt - en smaksak, förmodligen - men det är extremt svårt att läsa. Jag rapporterade detta tillbaka och fann att detta inte är en bra design för mig om jag bara kan läsa texten med svårighet. Och jag har fortfarande friska ögon. Vad gör de som har nedsatt syn? Också ett ofta underskattat problem – tillgänglighet. I vilket fall som helst var designern den åsikten att detta skulle vara hans design och att han skulle göra just det. Vi vet också: "Du kan göra det på det sättet, men sedan äta sitta ner."

För mig är detta ytterligare ett bevis på hur lite kunskap om läsbarheten av texter är, dvs bra typografi. För många år sedan, i min utbildning som mediedesigner (tryck), hade jag en erfaren grafisk formgivare och typograf som jag kunde lära mig mycket av.

Webbdesign & typografi: De särskilda kraven

typografi grunderna webfonts

I webbdesign har vi dock andra krav på typgrafer än läsbarhet, nämligen tekniska. En bra läsbarhet inkluderar också det faktum att sidan laddas snabbt på Internet. Så när det är möjligt att integrera teckensnitt med webbplatsens prestanda hanterar vi det.

Dessutom måste det säkerställas att texterna är så lätta att läsa på så många utgångsenheter som möjligt, vilket är en annan utmaning. I slutändan, med möjligheterna för csS tilldelning språk, har du så många möjligheter att ingripa i typografin av en webbplats att saker och ting snabbt blir mer komplexa än du trodde.

Och självklart vill vi ha en välstrukturerad text som också ökar läsbarheten, undviker trötthet och agerar på Google, dvs på rankningen i sökmotorn. Exempel är rubriktaggarna H1, H2, H3 och så vidare, användning av listor och tilldelningsformulär som Fet/Stark och em/i samt stycketecken och andra meningsfulla HTML-element.

Jag är en vän av standard typsnitt. Det är just nu. Jag menar, det är egentligen inte nödvändigt att inkludera speciella typsnitt på en webbplats. Som ett exempel, varför du integrerar ditt eget typsnitt, här är CI-teckensnittet. Detta är ett typsnitt speciellt utvecklad för företaget, som har en viktig funktion i företagsidentitet. Eller du är en riktigt bra designer, konstnär eller fotograf och fäster stor vikt vid en extravagant eller mycket individuell design-tunga utseende. Men då är det inte nödvändigtvis fråga om stora textblock eller skriftlig information.

Ett separat CI-teckensnitt används vanligtvis av större företag som arbetar med sin egen IT-avdelning och en servergård. Det finns inga prestandaproblem och inbäddningen av CI-teckensnitten övervakas tekniskt.

Om du är designer och vill visa vad du kan göra, är typografi rekommenderas att använda befintliga tjänster - beprövade webb typsnitt - i syfte att integrera önskat teckensnitt säkert och performantly i din egen webbplats.

Ibland verkar det också nödvändigt att omvandla önskad teckensnittsstil till webbanpassade format och att integrera dem individuellt. Huruvida detta alltid kommer att fungera ordentligt på lång sikt är en annan fråga. Därför föredrar jag i ett sådant fall Google Fonts eftersomdet ärsnabbt, säkert och lätt att använda. Men även detta kan vara en smaksak.

Dessa 10 typografiregler hjälper dig

typografi grunderna webfonts

Högsta och mycket enkla regler: Mindre är mer. Ta hänsyn till människors läsvanor. Orientera dig till webbplatser som representerar och lär dig omfattande redaktionella texter.

Texterna är läsliga och omfattas av vissa vetenskapligt grundade regler. De handlar inte bara om själva skrivandet, utan också om dess omgivning, kontrasten, texternas klarhet och struktur och skärpan i dess kanter.

1. Teckenstorlek

Det beror på teckensnittet och beror på den grundläggande utformningen av webbplatsen. Observera att användaren har möjlighet att när som helst ändra teckenstorleken i sin webbläsare eller smartphone. Försök att ta relativa teckenstorlekar, dvs % , EM / REM, eller liten / normal / medium / large.

2. Linjebredd

Detta är helt klart underskattat. Det bestämdes vilken textbredd folk fortfarande gillar att läsa: Det är en bredd upp till högst ca 70 tecken, dvs en standard A4-textbredd på ett Word-dokument. Kontrollera igen på SPIEGEL ONLINE och Co. hur breda deras textblock är.

3. Radavstånd

För optimal läsbarhet är det så kallade genomströmningen, dvs. Beroende på teckensnitt, en bra 140-150% "linje-höjd" har visat sin värde i nätet.

4:e löpsträcka

Detta är avståndet mellan bokstäverna manipulerade med bokstavsavstånd. Man bör vara mycket försiktig här och använda denna designmöjlighet endast noggrant - till exempel med vissa rubriker. I tveksamma fall, sluta inte.

5. Kontrast

Förhållandet mellan färg och bakgrundsfärg kallas kontrast. Detta bör vara mycket högt för flödestexter. Den maximala kontrasten är naturligtvis svart text på en vit bakgrund. Det här är lätt att läsa.

6. Struktur

Detta innebär: väl och semantiskt korrekt strukturerade texter! Detta innebär i HTML, till exempel, rubriken taggarna H1/H2/H3, stycket märken, lista utmärkelser, den intelligenta användningen av höjdpunkter med hjälp av fetning, kursiv stil och färg, etc.m. Har en direkt effekt på läsbarhet och även på Google ranking.

7. Högst två teckensnittstyper

Ofta räcker det med ett teckensnitt per webbsida, bok eller dokument. I speciella fall, mer arbete, men med användning av mer än 2 teckensnitt per dokument bör du vara försiktig.

8. Verser

Använd inte verser i rubriker och menyer. De är mycket svåra att läsa. Om det är enskilda ord, till exempel i NAVIGATION, kan du dock använda verser. Men skriv inte med versaler, utan lös via "text-transform:uppercase " medhjälp av CSS.

9. Standardteckensnitt

Vid tveksamhet och som reserv bör du välja beprövade systemtypsnitt. Arial, Verdana, Georgien är sådana lättlästa system typsnitt som har nästan alla utenheter och alltid är väl visas.

En reserv är i CSSen av efter stilsorten, som i BMW: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif; Här är Arial, Helvetica och Sans-Serif (det första teckensnittet som finns under Sans-Serif) de reservbitar som visas när teckensnittet framför den ("bmwTypeWebBoldAll") inte är tillgängligt.

10. Utbildning

Mitt tips: Ta dig igenom workshops, böcker och tidskrifter eller en YouTube-video i ämnet. Jag kan e.B. rekommendera den här videon. I sin föreläsning på "MobileTechCon" avråder Sven Wolfermann från systemtypsnitt – i motsats till mig – men ger en hel del värdefull information om ämnet här!

Skriva med CSS: Är det vettigt?

Ett ord om teckensnittsdesign eller inställning med CSS: Inte minst sedan introduktionen av CSS3 har utvecklare subtila inställningar för teckensnitten på en sida. Men är de verkligen alltid vettiga? Vad använder jag dem till när? Vad vill jag uppnå? Läsbarhet? Vacker design? Inte alla kodare – eller deras kunder – verkar tänka på detta. Ibland gör de allt som är möjligt. Du ändrar inte bara linjehöjden, vilket ibland orsakar problem med höjder, avstånd och positionering, utan också bokstavsavståndet eller placerar skuggor runt texten ("textskugga"). Dåligt, vilket ibland kan ses.

Jag råder dig därför att vara mycket försiktig med dessa inställningar och använda dessa tekniker klokt. De fungerar inte överallt och hindrar till och med displayen på små displayer. Då måste man ta tillbaka instruktionerna för skrivbordet via "Media Queries", som i sin tur kostar tid och kod. Är det verkligen vettigt? Svaret bör vara mycket tydligt och exakt.

Teckensnittsstilar för webben: Webbtypsnitten

typografi grunderna webfonts

Förresten: BMW använder detta på sin hemsida som sett tidigare: font-familj: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif;font-vikt: normal; – i flödestexten ganska normal Arial. Amazon använder också Arial på butikssidan. Apple, å andra sidan, naturligtvis använder sitt eget teckensnitt som en webb typsnitt. Oljebolaget TEXACO använder Adobe-teckensnitt. Endast som små exempel.

Lyckligtvis finns det nu många webbteckensnitt leverantörer som fungerar bra och är oftast lätt att integrera. Tyvärr är dessa "webb typsnitt" oftast debiterbara, även om priserna varierar kraftigt. Exempel, förutom Google Fonts, nämnsfortfarande: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts och många fler - en smaksak.

Fördelen med dessa tjänster är uppenbar: du har inga licensbekymmer (se nedan "Observera: Licenser!"), teckensnitten fungerar och det finns hjälp eller instruktioner för att integrera teckensnitten på din egen webbplats (dvs. support eller forum). Priserna är ofta expanderbara och du har ett visst urval av spännande teckensnitt.

Missförståndet med Google Fonts

När den så kallade PUL introducerades för alla, fick nätverksgemenskapen panik över användningen av Google Fonts. Det fanns farhågor om att användningen av Googles webbtypsnitt Google som en "datakrasch" mot vilken denna lagstiftning riktades – inte skulle följa dataskyddslagar och skulle därför riskera dyra varningar.

Denna fortfarande utbredda rädsla kastar ljus över den tyvärr fortfarande pågående stora förvirringen kring PUL . Till förmån för advokater och advokatbyråer webben, naturligtvis. Om du har slutfört en orderbehandling med Google på grund av användningen av Google Analytics och påpekar användningen av teckensnitten – och vid tveksamhet om cookies – i sekretesspolicyn är problemet utanför bordet.

Om du fortfarande är rädd, kan du också integrera alla Google-teckensnitt lokalt,dvs ladda ner Google webb typsnitt och spara dem i sin egen webspace.

Dessutom var prestanda upprepade gånger skarpt kritiseras, vilket var förmodligen så illa när du laddar teckensnitt via Google. Det nämns inte att Google har en snabb och extremt stabil serverarkitektur och att det fortfarande finns fallbacks (se ovan). Du läser också in teckensnitten från en annan webbadress, vilket kan ske samtidigt som du läser in filerna från din egen server. Men än en gång du är beroende av Google.

Uppmärksamhet: Laddningstider!

Det är väldigt enkelt. Externt integrerade webbteckensnitt kan öka sidans laddningstid. Den nödvändiga koden för att integrera dina egna teckensnitt i sidan, alltför. Endast standard typsnitt, systemet teckensnitt på datorer och smartphones av användarna, behöver inte en laddningstid, eftersom de inte laddas via en server, inte via Internet.

Med andra ord, om din webbplats behöver snabba laddningstider, kanske inte lämplig värd bakom den, och företaget inte har ett CI-teckensnitt som absolut behöver inkluderas, skulle jag alltid sätta standard. Så på systemteckensnitt, som Amazon gör med Arial. Det låter vettigt.

Naturligtvis handlar det inte om kilobyte teckensnitt som ska laddas. Det handlar om att dessa kommer ovanpå, så de måste laddas ner dessutom, och att servern som ska leverera dem bara kan försvagas. Det ser inte bra ut och är ... Onödig.

Uppmärksamhet: Licenser!

Vad som definitivt bör övervägas är licenserna för de teckensnitt som används. Om du använder Google-teckensnitt eller systemteckensnitt, som läses in av användarens dator, är du på den säkra sidan. Med alla andra typsnitt som du använder på hemsidan, måste du se till att du antingen har licens att använda den - och det kan snabbt bli ganska dyrt - att använda den på din egen hemsida, eller om det är en gratis typsnitt, som ibland oroar andra, till exempel när vi tänker på den tyska omljud och Eszett (ß).

För att undvika alla dessa problem, jag använde bara system typsnitt eller Google-teckensnitt. Om kunden nu absolut vill ha sitt eget typsnitt, bör du inkludera ansträngningen för detta generöst i beräkningen, eftersom integrationen av externa teckensnitt i webbplatsen ibland kan orsaka vissa problem. Till exempel med CSS-satserna och här, till exempel, vad jag alltid tycker är riktigt dåligt, när man hittar rätt teckensnittsnamn, för att kunna styra teckensnittet för att visa HTML-taggarna korrekt.

Inkludera egna teckensnitt

typografi grunderna webfonts

Med webbteckensnitt och/eller egna teckensnitt som du har gjort användbara för din sida via ett verktyg kan du snabbt lösa ett antal problem för din sida. Det är inte ovanligt att följande fenomen förekommer:

  • Flimrande teckensnitt när du läser in sidan (inte ovanligt, ibland kan du se ett annat teckensnitt tills CSS skriver över det med webbteckensnittet.
  • Längre laddningstider på grund av mycket komplexa teckensnitt (sällan).
  • Vanligare är oskärpa av teckensnittet, förvrängningpå grund av felaktig rendering (på vissa system).

För att visa önskat teckensnitt på så många utdataenheter som möjligt behöver du olika varianter av det. "TTF" är tydlig och välkänd, men du behöver också "EOT" och de två "WOFF" -varianterna. Detta är viktigt om du vill inkludera dina egna teckensnitt på din webbplats. Du kan få dessa format gratis med Webfont Generator. Sedan läser du in alla format av ditt teckensnitt i en katalog på din server och inkludera dem i din formatmall (CSS-fil) med sökvägen enligt följande:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

Du kan se hur komplext det är i @font-ansikte kodsomintegrerar ditt teckensnitt - och därmed hur felbenägna.

Sedan kan du använda dem i din CSS-kod och tilldela dem till klasserna och ID:na. På så sätt kan det finnas vissa fel som jag inte vill ta itu med på denna punkt. Som jag sa, jag rekommenderar standard eller system typsnitt eller Google-teckensnitt, som lätt kan ingå via den länkade filen i huvudet på hemsidan:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Typografi och mobil representation

typografi grunderna webfonts

Denna aspekt är i grunden försummad. Från min synvinkel är det absolut inte nödvändigt att ladda ett speciellt teckensnitt på en liten display eller en smartphone. Hur är det med reserverna, systemskripten i mobiltelefonerna? Om jag måste göra en mobil sida eller optimera den på språng, jag sparar det första jag gör för att ladda ner en webb typsnitt eller teckensnitt på grund av laddningstiden.

Det är ett strategiskt beslut som uppenbarligen måste diskuteras med kunden, men jag kan inte se ett enda argument som talar för en webb typsnitt eller sitt eget teckensnitt i den mobila representationen.

Naturligtvis finns det inte alla system typsnitt tillgängliga för skrivbordet på din smartphone. Men här, enligt min mening, det spelar ingen roll om du har det ena eller det teckensnittet för Android-systemet. Det handlar om snabb information och god läsbarhet. Detta är definitivt garanterat på Android och Apple med sina webbsäkra teckensnitt.

Om vi ser på saken ur två huvudsakliga synpunkter, nämligen lastningshastigheten och konstruktionen, måste vi dra slutsatsen att ett separat typsnitt är överflödigt för mobil representation. Å ena sidan försämrar typsnittet laddningshastigheten för den mobila sidan, vilket är särskilt viktigt när det kallas upp vid busshållplatsen. Å andra sidan har vi (förhoppningsvis) minskat innehållet och utformningen av den mobila versionen av webbplatsen till det väsentliga av just dessa skäl. Varför ladda en buffed-out webb typsnitt?

Det väsentliga är alltid läsbarheten eller vad vi vill uppnå: förmedla kunskap, litterär underhållning, köpa en produkt, kontakta, beställa ett nyhetsbrev eller titta på adressen. Och för det tror jag inte att det finns ett behov av ett speciellt teckensnitt eller ett webbteckensnitt.

Webbsäkra teckensnitt

Du bör definitivt kontrollera om något av systemteckensnitten är lämpliga för ditt projekt. En komplett samling så kallade webbsäkra CSS-instruktioner för systemteckensnitt eller webbsäkra teckensnitt finns på www.cssfontstack.com .

Vad är webbsäkra teckensnitt? Webbsäkra teckensnitt är teckensnitt som är förinstallerade i många operativsystem. Även om inte alla system har samma teckenuppsättningar installerade, kan du använda ett webbsäkert block av CSS-inställningar för att välja flera teckenuppsättningar som ser likadana ut och som är installerade på de olika system som du vill stödja. Om du vill använda andra teckensnitt än förinstallerade teckensnitt som börjar med CSS3 kan du använda inställningarna för dessa webbteckensnitt.

Slutsats

Du bör tänka mycket noga på om ett system typsnitt gör samma eller till och med bättre än en webb typsnitt eller ditt eget teckensnitt. Beprövade typsnitt som Verdana, Arial, Trebuchet, Georgia, Times New Roman, etc. kan användas utan att tveka, eftersom de alltid är lätta att läsa. Och vi har ännu inte talat om texternas kvalitet, som naturligtvis spelar en avgörande roll. Men det är en annan fråga. Underskatta inte ämnet typografi på webbplatser. Tänk på de tekniska aspekterna, som inläsningstid eller återbrus av typsnitten, men också användarvänligheten i din typografiska design, dvs läsbarhet, kontrast och linjehöjd.

Tänk noga igenom om du vill använda ditt eget eller ett externt teckensnitt eller om du förlitar dig på standardteckensnitt eller systemteckensnitt. Om du väljer din egen typsnittstyp, sedan undrar om du kan använda detta teckensnitt eller en liknande variant med Google Fonts. Eller om du verkligen vill integrera teckensnitten för hand via CSS och ladda upp dem till servern i alla format i förväg. Standardtypsnitten som användaren har på datorn eller smarttelefonen och som laddas därifrån är beprövade och behöver ingen laddningstid. Detta är desto mer sant för mobil laddning, när du tittar på din sida på smartphones.

För mig personligen finns det oftast inte mycket att säga för användning av ett externt teckensnitt eller ett webb typsnitt. Om en WordPress - Theme Google Fonts redan ombord, naturligtvis jag använder detta. För annars måste jag klanta mig eller skriva över det hela. Det är inte riktigt meningsfullt.

Om det inte är klart en del av företagsidentiteten i ett företag, är dess eget typsnitt en gimmick. Och de flesta kunder har inte tid eller pengar att göra det. Många vägar leder till Rom – men felaktig användning av typografi på en webbplats och i webbdesign gör förmodligen inte det. Med systemteckensnitt, med standardteckensnitt, underbar design och bra webbplatser kan utformas och fyllas. Deras användning är det säkrare sättet och det kommer att förbli så under ganska lång tid. Kanske är det en smaksak, men kanske är detta det mest förnuftiga sättet att skriva på webbplatser.

Bild: Ksenia Makagonova [Unsplash]
Andra bilder: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel – Webbdesigner från Hamburg. Utbildad mediedesigner (tryck), som arbetat som webbdesigner sedan 2000. Inledningsvis i mobile.de, från 2003 på egen hand. Från 2005 bloggare om olika ämnen på olika egna bloggar. Som frilansare från 2007 och 2008 på SPIEGEL ONLINE deltog han i lanseringen av einestages.de på sömprogrammering/redigeringsavdelningen. Senare på SPIEGEL marknadsförare Quality Channel (Spiegel QC / Spiegel Media). Att arbeta som frilansare för libri.de och olika grafik & IT-byråer. Sedan 2008 har han specialiserat sig på WordPress .

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.