webbdesign för typografi

Grunderna i typografi för ditt nästa projekt

Enkelt är svårt. Det är min vägledande princip. Och så är det med hjälp av typografi i webbdesign, av teckensnitt på webbplatsen - faktiskt ganska enkelt och ändå ganska komplicerat. Det är därför jag idag vill visa dig vilka typografigrunder du bör överväga för att presentera text på din webbplats på bästa möjliga sätt.

Det är ingen hemlighet att det är svårt för många människor att uttrycka sig tydligt och begripligt. Varför skulle detta vara enklare via media? För att underlätta detta – kommunikation – finns typografi. Å ena sidan är det doktrinen om skrifterna, å andra sidan ett designelement för att presentera texter eller innehåll skickligt, enligt målet eller "estetiskt tilltalande". Det faktum att man skiljer mellan mikrotypografi och makrotypografi är inte relevant i detta skede.

Varför typografi grunder i webbdesign?

typografi grunderna webfonts

Det råder ingen tvekan om att teckensnitt kan liva upp och visuellt berika en webbplats. Teckensnitt är viktiga element i all 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 kasta ljus över här och som borde hjälpa dig att bättre förstå saken med teckensnittet på webbplatser.

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

– Kurt Weidemann

Webbplatser skapas ofta inte av utbildade grafiska formgivare eller mediedesigners, utan av sidodeltagare. Detta kan förklara varför många webbplatser ignorerar även de enklaste grafiska reglerna. Särskilt när det gäller typografi blir detta snabbt tydligt. Den irrepressiva användningen av dåligt läsbara VERSER, bristen på kontrast mellan teckenfärg och bakgrund, liksom texternas förvirrade struktur gör det svårt för användare att läsa.

Men det är precis vad typografi handlar om: texternas läsbarhet. Varför ska du annars ha texter på webbplatsen om de inte är bra och trevliga att läsa? Förmodligen skiljer sig åsikterna om hur lättlästa texter ska se ut i slutändan. Jag kan inte förstå det, eftersom vi har enkla, beprövade och mycket användbara typografiska regler i grafiken för att skapa lättlästa texter. Typografi.

En av dem är kontrasten – färgförhållandet mellan teckenfärgen och bakgrunden. I ett forum hade jag en gång kritiserat en stolt presenterad webblayout just av denna anledning. I grafiken kallar vi fenomenet att den påstådda webbdesignern ville sälja här "vitörn på vit bakgrund". I det här fallet hade han en mörkgrå kontinuerlig text på en ljusgrå bakgrund, det vill säga otillräcklig kontrast.

Det kan se trevligt ut – förmodligen en smaksak – men det är svårt att läsa. Jag rapporterade detta tillbaka och fann att detta inte var en bra design för mig om jag bara kunde 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 – sökordstillgänglighet. I vilket fall som helst tog designern positionen att detta var hans design och han skulle göra det bara så. Vi vet också: "Du kan göra det så, men sedan bara äta skit."

För mig är detta ytterligare ett bevis på hur lite kunskap om texternas läsbarhet, det vill säga om bra typografi, är. Under min utbildning som mediedesigner (tryck) för många år sedan hade jag en erfaren grafisk formgivare och typograf, som jag kunde lära mig mycket av.

Webbdesign och typografi

typografi grunderna webfonts

Inom webbdesign har vi dock andra krav på typografi än läsbarhet, nämligen tekniska. En bra läsbarhet på Internet inkluderar det faktum att webbplatsen laddas snabbt. Så när det gäller att integrera teckensnitt har vi att göra med WordPress-prestanda.

Dessutom måste det säkerställas att texterna är lika läsbara på så många utgångsenheter som möjligt, vilket är en annan utmaning. I slutändan, med möjligheterna med markeringsspråket CSS, har du så många möjligheter att ingripa i typografin på en webbplats att frågan snabbt blir mer komplex än förväntat.

Och naturligtvis vill vi ha en välstrukturerad text som också ökar läsbarheten, undviker trötthet och påverkar Google, det vill säga på rankningen i sökmotorn. Exempel är rubrikerna Taggarna H1, H2, H3 osv., användningen av listor och markeringsformulär som Fet/Stark och em/i, samt styckemärken och andra användbara HTML-element.

Jag är en vän av standardteckensnitt. Först av allt. Jag menar, det är inte riktigt nödvändigt att inkludera specifika egna teckensnitt på en webbplats. Som ett exempel på varför du integrerar ditt eget teckensnitt bör CI-teckensnittet nämnas här. Med andra ord ett typsnitt speciellt utvecklat för företaget, som har en viktig funktion i företagsidentiteten. Eller så är du en riktigt bra designer, konstnär eller fotograf och fäster vikt vid ett extravagant eller mycket individuellt designtungt utseende. Men då handlar det inte nödvändigtvis 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 då inga prestandaproblem och inbäddningen av CI-teckensnitten övervakas tekniskt.

Om du är designer och vill visa vad du kan göra är det lämpligt att använda befintliga tjänster - beprövade webbteckensnitt - för typografi för att integrera önskat teckensnitt säkert och performantly på din egen webbplats.

Ibland verkar det också vara fallet att omvandla önskad teckensnittsstil till webbkompatibla format och att integrera dem individuellt. Om detta alltid fungerar perfekt på lång sikt är en annan fråga. Därför föredrar jag i ett sådant fall Google Fonts, eftersom det är snabbt, säkert och lätt att använda. Men även detta är kanske en smaksak.

Samtycke*
Det här fältet är avsett för validering och bör inte ändras.

Dessa 10 typografiregler hjälper dig

typografi grunder webfonts

Topp och mycket enkla regler: Mindre är mer. Tänk på människors läsvanor. Orientera dig till webbplatser som presenterar och lär dig omfattande redaktionella texter.

Texternas läsbarhet omfattas av vissa vetenskapligt sunda regler. De gäller inte bara själva teckensnittet, utan också dess omgivning, kontrasten, texternas klarhet och struktur, liksom skärpan i deras 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 tydligt underskattat. Det bestämdes vilken textbredd personer fortfarande gillar att läsa: Det är en bredd upp till högst cirka 70 tecken, dvs. en standard A4-textbredd för ett Word-dokument. Ta bara en titt på SPIEGEL ONLINE och Co. för att se hur breda deras textblock är.

3. Radavstånd

För optimal läsbarhet är den så kallade punkten, det vill säga avståndet mellan de enskilda raderna i en text – inklusive höjden på ett stycke – av stor betydelse. Beroende på teckensnitt har en bra 140–150 % "linjehöjd" visat sig på 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! I HTML betyder detta till exempel rubrikerna H1/H2/H3, styckemärkena, listmarkeringar, intelligent användning av markering med hjälp av fetstil, kursiv stil och färg. Har en direkt effekt på läsbarheten och även på Google-rankningen.

7. Högst två teckensnittstyper

Ofta räcker det med ett teckensnitt per webbplats, bok eller dokument. I speciella fall fungerar mer, men du bör vara försiktig med att använda mer än 2 teckensnitt per dokument.

8. Verser

Undvik verser i rubriker och menyer. De är svåra att läsa. Men om det är enskilda ord, till exempel i navigering, kan du använda verser. Men skriv inte med stora bokstäver, utan lös med CSS via "texttransformning:versaler".

9. Standardteckensnitt

I händelse av tvivel och som reserv bör du välja beprövade systemteckensnitt. Arial, Verdana, Georgia är så utmärkta läsbara systemteckensnitt att nästan alla utgångsenheter har och alltid visas väl.

En reserv är det efterföljande teckensnittet i CSS, till exempel på BMW: "bmwTypeWebBoldAll","Arial","Helvetica", sans-serif; här Arial, Helvetica och Sans Serif (dvs. det första teckensnittet som är tillgängligt under Sans Serif) är reserverna som visas om teckensnittet framför det ("bmwTypeWebBoldAll") inte är tillgängligt.

10. Utbildning

Mitt tips: Utbilda dig när det gäller typografi genom workshops, böcker och tidskrifter eller till och med genom en YouTube-video om ämnet. Jag kan rekommendera e.B. den här videon . Även om Sven Wolfermann avråder från systemteckensnitt i sin presentation på "MobileTechCon" – till skillnad från mig – ger han mycket värdefull information om ämnet!

Teckensnittsdesign med CSS: Är det vettigt?

Ett ord om teckensnittsdesign, mer exakt inställning med CSS: Inte minst sedan introduktionen av CSS3 har utvecklare haft subtila inställningsalternativ för teckensnitten på en WordPress-webbplats till sitt förfogande. Men är de verkligen alltid vettiga? Vad använder jag dem till och 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 de kan. Ändra inte bara punkten ("linjehöjd"), vilket ibland orsakar problem med höjder, avstånd och placering, utan också bokstavsavståndet eller skuggorna runt texten ("textskugga"). Dåligt, vilket ibland kan ses.

Jag råder er därför att vara mycket försiktig med dessa attityder och att använda dessa tekniker på ett klokt sätt. De fungerar inte överallt och hindrar till och med skärmen 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 på sin webbplats som just sett detta: font-familj: "bmwTypeWebBoldAll","Arial","Helvetica", sans-serif;font-weight: normal; – i den kontinuerliga texten helt normalt Arial. Amazon använder också Arial på butikens webbplats. Apple, å andra sidan, använder naturligtvis sitt eget teckensnitt som webbteckensnitt. Oljebolaget TEXACO använder Adobe Fonts. Precis som små exempel.

Lyckligtvis finns det nu många leverantörer av webbteckensnitt som fungerar bra och vanligtvis är lätta att integrera. Tyvärr är dessa "webbteckensnitt" vanligtvis föremål för en avgift, även om priserna skiljer sig mycket. Exempel, förutom Google Fonts , är: Adobe Fonts (Typekit), Webtype , Adobe Edge Web Fonts och många fler - en smakfråga.

Fördelen med dessa tjänster är uppenbar: Du har inga licensbekymmer (se nedan "Attention: Licenses!"), teckensnitten fungerar och det finns mer exakt 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 i maj 2018 PULintroducerades på ett bindande sätt för alla, fick internetgemenskapen panik innan google fonts användes. De var rädda för att användningen av Googles webbteckensnitt – Google som en "data octopus", mot vilken denna lagstiftning riktades – inte skulle följa dataskyddslagarna och att dyra varningar därför skulle riskeras.

Denna fortfarande utbredda rädsla belyser den tyvärr fortfarande pågående stora förvirringen om PUL. Till förmån för advokater och webbjuridiska byråer, naturligtvis. Om du har slutfört orderbehandlingen med Google på grund av användningen av Google Analytics och hänvisar till användningen av teckensnitt – och i tveksamma fall till cookies – i sekretesspolicyn är problemet borta från bordet.

Om du fortfarande är rädd kan du också integrera alla Google Fonts lokalt, dvs. ladda ner Google Webfonts och spara dem på ditt eget webbutrymme.

Dessutom kritiserades prestandan upprepade gånger, vilket påstås vara så illa när du laddar teckensnitten via Google. Det nämner inte att Google har en snabb och extremt stabil serverarkitektur och att det fortfarande finns reserver (se ovan). Dessutom läser du in teckensnitten från en annan URL, vilket kan göras samtidigt som du läser in filerna från din egen server. Men återigen är du beroende av Google.

Uppmärksamhet: Laddningstider!

Frågan är ganska enkel. Externt integrerade webbteckensnitt kan öka laddningstiden för WordPress-webbplatsen. Den nödvändiga koden för att integrera dina egna teckensnitt på WordPress-webbplatsen också. Endast standardteckensnitten, systemteckensnitten på användarnas datorer och smartphones, kräver ingen laddningstid, eftersom de inte laddas via en server, inte via Internet.

Eller för att uttrycka det på ett annat sätt: Om din WordPress-webbplats behöver snabba laddningstider, kanske lämplig WordPress-värd inte ligger bakom det och företaget inte har ett CI-teckensnitt som absolut måste integreras, 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 av de teckensnitt som ska laddas. Poängen är att dessa kommer överst, dvs måste laddas ner dessutom och att servern som ska leverera dem kan försvagas. Det ser inte bra ut och är ... Onödig.

Uppmärksamhet: Licenser!

Vad som i vilket fall som helst måste beaktas är licenserna för de teckensnitt som används. Om du använder Google Fonts eller systemteckensnitt, som är kända för att laddas av användarens dator, är du på den säkra WordPress-webbplatsen. Med alla andra teckensnitt som du använder på webbplatsen måste du se till att du har licensen för dem. Och detta kan snabbt bli ganska dyrt. Vare sig det är att använda dem på din egen webbplats, eller om det är ett gratis teckensnitt, vilket ibland orsakar andra bekymmer, om vi tänker på de tyska omljuden och Eszett (ß).

För att undvika alla dessa problem förlitade jag mig bara på systemteckensnitt eller på Google Fonts. Om kunden nu absolut vill ha sitt eget teckensnitt bör du generöst inkludera ansträngningen för det i beräkningen, eftersom integrationen av externa teckensnitt på webbplatsen ibland kan orsaka vissa problem. Till exempel med CSS-instruktionerna och här, till exempel, vad jag alltid tycker är riktigt uselt, när jag söker efter rätt teckensnittsnamn, för att kunna styra teckensnittet för visning av HTML-taggarna korrekt.

Inkludera egna teckensnitt

typografi grunderna webfonts

Med webbteckensnitt och / eller dina egna teckensnitt, som du har gjort användbara för din WordPress-webbplats via ett verktyg, kan du snabbt hantera ett antal problem för din WordPress-webbplats. Inte sällan uppstår följande fenomen:

  • Flimrande teckensnitt när du laddar WordPress-webbplatsen (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 (ganska sällsynta).
  • Vanligare är oskärpa av teckensnittet, förvrängning på grund av felaktig rendering (på vissa system).

För att kunna visa önskat teckensnitt på så många utdataenheter som möjligt behöver du olika varianter av samma. "TTF" är tydlig och välkänd, men du behöver också "EOT" och de två "WOFF" -varianterna. Detta är viktigt om du vill integrera dina egna teckensnitt på din WordPress-webbplats. Du kan skapa dessa format gratis med Webfont Generator . Sedan läser du in alla format av teckensnittet i en katalog på servern och integrerar 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');
}

I den här @font-ansiktskod som integrerar ditt teckensnitt kan du se hur komplex saken är – och därmed hur felbenägen.

Sedan kan du använda dem i din CSS-kod och tilldela dem till klasserna och ID: erna. På detta sätt kan vissa fel uppstå som jag inte vill täcka vid denna tidpunkt. Fortfarande: Jag rekommenderar standard- eller systemteckensnitt eller Google Fonts, som du helt enkelt integrerar via den länkade filen i webbplatsens rubrik:

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

Typografi och mobil display

typografi grunderna webfonts

Denna aspekt försummas i grunden. Från 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, systemteckensnitten i mobiltelefoner? Naturligtvis, om jag måste bygga en mobil WordPress-webbplats eller optimera den på mobilen, är det första jag sparar att ladda ner ett webbteckensnitt eller mitt eget 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å frågan ur två viktiga synvinklar, nämligen laddningshastigheten och designen, måste vi dra slutsatsen att ett separat teckensnitt för mobil representation är överflödigt. Å ena sidan försämrar teckensnittet laddningshastigheten på den mobila WordPress-webbplatsen, vilket är särskilt viktigt när det kallas upp vid busshållplatsen. Å andra sidan har vi (förhoppningsvis) minskat innehållet och designen av mobilversionen av webbplatsen till det väsentliga av dessa skäl. Varför ladda ett utformat webbteckensnitt?

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 ett av systemteckensnitten är lämpligt för ditt projekt. En komplett samling av så kallade webbsäkra CSS-instruktioner för systemteckensnitt mer exakt webbsäkra teckensnitt finns på CSS Font Stack.

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 installeras på de olika system som du vill stödja. Om du vill använda andra teckensnitt än förinstallerade teckensnitt kan du använda inställningarna för dessa webbteckensnitt om du vill använda andra teckensnitt än förinstallerade teckensnitt.

Slutsats om typgrafi grunderna

Du bör tänka mycket noga på om ett systemteckensnitt gör detsamma eller till och med bättre än ett webbteckensnitt eller ditt eget teckensnitt. Beprövade teckensnitt som Verdana, Arial, Trebuchet, Georgia, Times New Roman och andra kan användas utan tvekan, eftersom de alltid är läsbara. Och vi har ännu inte talat om kvaliteten på innehållet i texterna, 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 laddningstid eller omljud av teckensnitten, 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 ett eget eller ett externt teckensnitt eller om du vill använda standardteckensnitt mer exakt systemteckensnitt. Om du väljer ditt eget teckensnitt frågar du dig själv om du kan använda det här teckensnittet eller en liknande variant med Google Fonts. Eller om du verkligen vill integrera teckensnitten manuellt via CSS och ladda dem på servern i alla format i förväg. De standardteckensnitt som användaren har på datorn eller smarttelefonen och som laddas därifrån är bevisade och kräver ingen laddningstid. Detta gäller desto mer för mobilladdning när du visar din WordPress-webbplats på smartphones.

För mig personligen finns det vanligtvis inte mycket att säga för att använda ett externt teckensnitt eller ett webbteckensnitt. Om ett WordPress-tema redan har Google Fonts ombord använder jag det naturligtvis. Annars måste jag skruva på det eller skriva över det. Det verkar inte vettigt.

Om det inte tydligt är en del av ett företags företags identitet är dess eget teckensnitt en gimmick. Och de flesta kunder har varken 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, kan underbara mönster och fantastiska webbplatser skapas och fyllas. Deras användning är det säkrare sättet och kommer att förbli så under en längre tid. Kanske är det en smaksak, men kanske är detta det mest förnuftiga tillvägagångssättet för teckensnitt på webbplatser.

Dina frågor om grunderna i typografi

Vilka frågor har du om grunderna i typografi? Använd gärna kommentarsfunktionen. Vill du bli informerad om nya inlägg om WordPress, webbdesign och mer? Följ oss sedan på Twitter, Facebook,LinkedIneller via vårt nyhetsbrev.

Tyckte du om artikeln?

Med din recension hjälper du oss att förbättra vårt innehåll ytterligare.

Skriva en kommentar

Din e-postadress kommer inte att publiceras.