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

Mark Max Henckel Senast uppdaterad den 21 oktober 2020
14 Min.
typografi grunderna webbdesign
Senast uppdaterad den 21 oktober 2020

Enkelt är svårt. Det är min vägledande princip. Och så är det också med hjälp av typografi i webbdesign, av typsnitt på webbplatsen - 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 skulle det vara lättare via media? För att göra detta lättare - kommunikation - det finns typografi. Å ena sidan är det undervisningen av handstilarna, å ena sidan är det en designbeståndsdel för att överföra texter eller nöjt för att föreställa dem enligt målet eller "aesthetically tilltalande". Skillnaden mellan mikrotypografi och makrotypografi är irrelevant på denna punkt.

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 delar av någon bra design. På Internet, dvs i webbdesign, är sak med typografi föremål för särskilda villkor, som jag skulle vilja belysa här och som bör hjälpa dig att bättre förstå frågan med att skriva på webbsidor.

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

Webbplatser görs ofta inte av utbildade grafiska formgivare eller mediedesigners, men är utformade och genomförda av nykomlingar. Detta kan förklara varför även de enklaste grafiska reglerna ignoreras på många sidor. Speciellt när det gäller typografi blir detta snabbt tydligt. Den okuvliga användningen av dåligt läsbara VERSALIA, bristen på kontrast mellan teckenfärg och bakgrund, liksom den förvirrande strukturen i texterna gör det svårt för användare att läsa.

Men det är precis vad typografi handlar om: textens läsbarhet. Varför ska du annars ha texter på hemsidan om de inte är bra och trevliga att läsa? Förmodligen är spökena i hur lättlästa texter ska se ut i slutet delade. Jag kan inte förstå det, eftersom vi har i bilden Enkel, Bästa Och mycket användbara typografiska reglerför att skapa lättlästa texter. Typografi.

En av dem är kontrast, det vill än färgförhållandet mellan teckenfärg och bakgrund. I ett forum, kritiserade jag en gång en stolt presenteras webblayout av just denna anledning. I bilden nämner vi fenomenet att 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 ansåg designern 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 texternas läsbarhet är, det vill säga 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.

Webbdesign & typografi: De särskilda kraven

typografi grunderna webfonts

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

Dessutom måste man se till att texterna är lika lätta att läsa på så många utgående enheter som möjligt, vilket är en annan utmaning. I slutändan, med möjligheterna med css tilldelning språk, har du så många möjligheter att ingripa i typografi av en webbplats som saker och ting snabbt blir mer komplexa än du trodde.

Och naturligtvis vill vi ha en välstrukturerad text som också ökar läsbarheten, undviker trötthet och agerar på Google, det vill säga på rankningen i sökmotorn. Exempel på detta är rubriktaggarna H1, H2, H3 och så vidare, användning av listor och belöningsformulär som Fet/Stark och em/i, samt styckemärken och andra meningsfulla HTML-element.

Jag är en vän av vanliga teckensnitt. 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 teckensnitt, här är CI teckensnitt. Detta är ett typsnitt speciellt utvecklat för företaget, som har en viktig funktion i företagets identitet. Eller du är en riktigt bra designer, konstnär eller fotograf och fäster stor vikt vid en extravagant eller mycket individuell design-tung utseende. Men då är det inte nödvändigtvis en 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 servergrupp. 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 för befintliga tjänster - på beprövade webbteckensnitt – att integrera önskat teckensnitt på ett säkert sätt och performantly i din egen webbplats.

Ibland verkar det också nödvändigt att omvandla önskad typsnitt stil till webb-lämpliga format och att integrera dem individuellt. Om detta alltid kommer att fungera korrekt i det långa loppet är en annan fråga. Därför föredrar jag i ett sådant fall att Google-teckensnitteftersom det är snabbt, säkert och lätt att använda. Men även detta kan vara en smaksak.

Dessa 10 typografiregler hjälper dig att

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.

Texternas läsbarhet omfattas av vissa vetenskapligt grundade regler. De gäller inte bara själva skriften, utan också 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 ändra teckenstorleken i sin webbläsare eller smartphone när som helst. Försök att ta relativa teckenstorlekar, dvs %, EM/REM eller små/normal/medium/large.

2. Linjebredd

Detta är helt klart underskattat. Det bestämdes vilken textbredd människor fortfarande vill läsa: Det är en bredd upp till högst cirka 70 tecken, dvs en standard A4 textbredd för 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 manipuleras av bokstavsavstånd. Man bör vara mycket försiktig här och använda denna design mö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ög för flödestexter. Den maximala kontrasten är naturligtvis svart text på en vit bakgrund. Detta är lätt att läsa.

6. Struktur

Detta innebär: bra och semantiskt korrekt strukturerade texter! Detta innebär i HTML, till exempel rubriken taggar H1/H2/H3, stycket märken, lista utmärkelser, intelligent användning av höjdpunkter med hjälp av fet, kursiv stil och färg, etc. 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 särskilda fall, mer arbete, men med hjälp 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. Men om det är enskilda ord, till exempel i NAVIGATION, kan du använda verser. Men skriv inte med stora bokstäver, men via CSS om "text-transformering:versaler" lösa.

9. Standardteckensnitt

I tveksamma fall och som reserv, bör du välja beprövade systemteckensnitt. Arial, Verdana, Georgien är så lättlästa systemteckensnitt som har nästan alla utdataenheter och alltid är väl visade.

En återgång är följande teckensnitt i CSS, som i BMW: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif; Här är Arial, Helvetica och Sans-Serif (dvs. det första teckensnittet som finns under Sans-Serif) de reserver som visas när teckensnittet framför det ("bmwTypeWebBoldAll") inte är tillgänglig.

10. Utbildning

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

Skriva med CSS: Är det vettigt?

Ett ord om teckensnittsdesign eller inställning med hjälp av CSS: Inte minst sedan införandet av CSS3 ange teckensnitt för en sida är tillgängliga för utvecklare. 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. De gör ibland allt som står i vår makt. De ändrar inte bara linjehöjden, vilket ibland orsakar problem med höjder, avstånd och positionering, utan även bokstavsavstånd eller placera skuggor runt texten ("text-skugga"). Dåligt, vilket ibland kan ses.

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

Teckensnittsformat för webben: Webbteckensnitten

typografi grunderna webfonts

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

Lyckligtvis finns det nu många webb font leverantörer som fungerar bra och är oftast lätt att integrera. Tyvärr är dessa "webb typsnitt" vanligtvis avgiftsbelagda, även om priserna varierar kraftigt. Som exempel är det, förutom att Google-teckensnitt, nämns fortfarande: Adobe-teckensnitt (Typekit), Webbtyp, Webbteckensnitt för Adobe Edge och många fler - en smaksak.

Fördelen med dessa tjänster är uppenbar: du har inga licensbekymmer (se nedan "Uppmärksamhet: 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 utbyggbara och du har ett visst urval av spännande teckensnitt.

Missförståndet med Google Fonts

När den så kallade PUL infördes för alla, var nätverkssamfundet skrämd av användningen av Google-teckensnitt panik tillbaka. Det fanns farhågor om att användningen av Google WebfontsGoogle som en "datakrasch" som denna lagstiftning riktades mot, överensstämmer den inte med dataskyddslagar och riskerar därför att bli dyra varningar.

Denna fortfarande utbredda rädsla belyser den tyvärr fortfarande pågående stora förvirringen kring PUL . Till förmån för advokater och webb advokatbyråer, naturligtvis. Om du är orolig för användningen av Google Analytics Med Google har slutfört beställningsbehandling och pekar på användningen av teckensnitten – och i tveksamma fall av tvivel på cookies – i sekretesspolicyn är problemet inte aktuellt.

Om du fortfarande är rädd kan du Inkludera Google-teckensnitt lokalt, dvs ladda ner Googles webbteckensnitt och spara dem till sin egen webbutrymme.

Dessutom var resultatet upprepade gånger fördömdes, vilket var förmodligen så illa när du tror att teckensnitten var Google Massor. Det nämns inte att Google har en snabb och extremt stabil serverarkitektur och att det fortfarande finns reserver (se ovan). Du läser också in teckensnitten från en annan WEBBADRESS, vilket kan inträffa samtidigt som du läser in filerna från din egen server. Men återigen är du beroende av Google.

Uppmärksamhet: Laddningstider!

Det är väldigt enkelt. Externt integrerade webbteckensnitt kan öka sidans inläsningstid. Den kod som krävs för att integrera dina egna teckensnitt på sidan också. Endast standardteckensnitt, systemteckensnitten på användarnas datorer och smartphones, behöver inte en laddningstid, eftersom de inte laddas via en server, inte över Internet.

Med andra ord, om din webbplats behöver snabba laddningstider, kanske inte rätt värd bakom det, och företaget inte har en CI teckensnitt som absolut måste ingå, skulle jag alltid sätta standarden. Så på systemteckensnitt, som Amazon gör med Arial Gör. Det låter vettigt.

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

Uppmärksamhet: Licenser!

Vad är definitivt att beakta är licenserna för de teckensnitt som används. Om du Google-teckensnitt eller systemteckensnitt, som laddas av användarens dator, är på den säkra sidan. För alla andra teckensnitt du använder på webbplatsen, måste du se till att du antingen har licens att göra det - och det kan snabbt bli ganska dyrt - att använda den på din egen webbplats, eller om det är en Gratis teckensnitt som ibland orsakar andra problem när vi tänker, till exempel, av de tyska omljuden och Eszett (ß).

För att undvika alla dessa problem använde jag bara systemteckensnitt eller Google-teckensnitt. Om kunden nu absolut vill ha sitt eget teckensnitt, 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-satser och här, till exempel, vad jag alltid tycker är riktigt dåligt, när du hittar rätt teckensnittsnamn, för att kunna styra teckensnittet för att visa HTML-taggar korrekt.

Inkludera egna teckensnitt

typografi grunderna webfonts

Med webbteckensnitt och/eller dina 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 inträffar:

  • Flimrande teckensnitt när du läser in sidan (inte ovanligt, ibland kommer du att se ett annat teckensnitt tills CSS skriver över den med webbteckensnittet.
  • Längre laddningstider av mycket komplexa teckensnitt (sällan).
  • Oftare, Göra teckensnittet oskarp, Distorsion på 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å webbplatsen. Du kan använda dessa format gratis med Webfont Generator Producera. Sedan kan du läsa in alla format på ditt teckensnitt i en katalog på servern och inkludera dem i din formatmall (CSS-fil) med sökväg 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-format('/deinfont.ttf') ('ttf'),
      Format för url("/deinfont.eot") ("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 på denna @font ansiktskod, som integrerar ditt teckensnitt, hur komplext det är – och därmed hur felbenägen.

Sedan kan du använda dem i css-koden och tilldela dem till klasser och ID. På så sätt kan det finnas vissa fel som jag inte vill ta itu med i detta skede. Som jag sa rekommenderar jag standard- eller systemteckensnitt eller Google-teckensnitt, som lätt kan inkluderas via den länkade filen i rubriken på webbplatsen:

Typografi och mobil representation

typografi grunderna webfonts

Denna aspekt försummas i grunden. Ur min synvinkel är det absolut inte nödvändigt att ladda ett speciellt teckensnitt på en liten skärm eller en smartphone. Hur är det med reserverna, systemet skript av mobiltelefoner? Om jag måste göra en mobil sida eller optimera den på språng, sparar jag 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 ser inte ett enda argument som talar för en webb typsnitt eller sitt eget teckensnitt i den mobila representationen.

Naturligtvis finns det inte alla systemteckensnitt 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 tittar på frågan ur två huvudsynpunkter, nämligen lastningshastigheten och designen, måste vi dra slutsatsen att ett separat typsnitt är överflödigt för mobil representation. Å ena sidan försämrar teckensnittet laddningshastigheten på 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 ett buffed-out webbteckensnitt?

Det viktigaste är alltid läsbarhet eller vad vi vill uppnå: förmedla kunskap, litterär underhållning, köpa en produkt, kontakta, beställa ett nyhetsbrev eller visa 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ågon av systemteckensnitten är lämpliga för ditt projekt. En komplett samling av 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 med css-inställningar för att välja flera teckenuppsättningar som ser likadana ut och är installerade på de olika system som du stöder Vill. Om du vill använda andra teckensnitt än förinstallerade på CSS3 kan du använda Inställningar för dessa webbteckensnitt Använda.

Slutsats

Du bör tänka mycket noga på om ett system teckensnitt gör samma eller till och med bättre än en webb typsnitt eller ditt eget teckensnitt. Beprövade teckensnitt som Verdana, Arial, Trebuchet, Georgien, Times New Roman bland annat kan du använda dem 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, till exempel laddningstid eller ombrusning av teckensnitten, men också användarvänligheten i din typografiska design, dvs läsbarhet, kontrast och linjehöjd.

Fundera noga på om du vill använda ditt eget eller ett externt teckensnitt eller om du förlitar dig på vanliga teckensnitt eller systemteckensnitt. Om du väljer ditt eget typsnitt, undrar sedan om du har detta teckensnitt eller en liknande variant med Google-teckensnitt kan användas. Eller om du verkligen vill integrera teckensnitt för hand via CSS och ladda upp dem till servern i alla format i förväg. De standardteckensnitt som användaren har på datorn eller smartphone och som laddas därifrån är beprövade och behöver inte någon 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 webbteckensnitt. Om en WordPress - Theme Google Fonts redan ombord, naturligtvis använder jag detta. Annars måste jag sabba eller skriva över det hela. Det är inte riktigt meningsfullt.

Om det inte är klart att Företagets identitet ägs av ett företag, är en separat font 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 förmodligen inte. Med systemteckensnitt, med standardteckensnitt, underbara mönster 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.

Post bild: Ksenia Makagonova [Unsplash]
Övriga 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 arbetar som webbdesigner sedan 2000. Ursprungligen på 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ömmen programmering / redigering avdelning. Senare på SPIEGEL marknadsförare Quality Channel (Spiegel QC / Spiegel Media). Arbetar som frilansare för libri.de och olika grafik & IT-byråer. Sedan 2008 har han specialiserat sig på WordPress .

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

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