Teknisk Marknadsföring, Tjäna pengar på dina Bloggar och Prylar

Den definitiva guiden till HTML-teckensnitt och hur man använder dem

Den definitiva guiden till HTML-teckensnitt och hur man använder dem

Om det är något som kan göra eller bryta utseendet på en webbplats så är det HTML-teckensnitt. Att välja rätt typsnitt är avgörande för framgång, och det är inte bara ett estetiskt val, eftersom att välja ett svårläst typsnitt kan skrämma bort besökare.

Som sådan måste typsnittet vara lätt att producera, rätt storlek och en färg som inte smälter in i bakgrunden. Även om detta kan låta grundläggande, förstår många webbplatser det fortfarande inte, och chansen är stor att du antagligen har stött på en eller två webbplatser som är svåra att läsa.

Idag ska jag ta upp allt du behöver veta om HTML-teckensnitt i WordPress.

Vad är HTML-teckensnitt?

Ett HTML-teckensnitt eller webbteckensnitt är en textstil som visas på webbplatser skrivna i CSS. I de flesta fall kommer plattformen du bygger din webbplats på bara att ha ett begränsat urval av typsnitt att välja mellan, men i verkligheten finns det hundratals tillgängliga.

Men deras användning innebär en ganska stor kompromiss. De kanske inte lagras på de servrar som du är ansluten till.

Med andra ord kan din sida ta längre tid att ladda om du använder ett ovanligt teckensnitt eftersom servern och webbläsarna måste hitta teckensnittet du använder och installera det innan sidan kan laddas.

Det är därför de flesta webbplatser använder ett riktigt liknande typsnitt.

En annan aspekt av HTML-teckensnitt är deras förmåga att anpassa sig till olika skärmstorlekar. Eller, med andra ord, lyhördhet.

Det är också viktigt att nämna att varje typsnitt är anpassningsbart när det gäller storlek och färg som du väljer. Du kan också använda andra standardredigeringar, som fetstil och kursiv. Dessa alternativ är tillgängliga för nästan alla teckensnitt.

Hur ändrar jag typsnitt i WordPress?

Typsnitten du använder beror på vilket tema du använder. Varje tema erbjuder vanligtvis flera standardteckensnitt som du kan välja mellan. Som det mesta i WordPress kan du lägga till plugins.

Låt oss se hur man väljer ett teckensnitt i WordPress.

Metod 1: Temaanpassning

Före WordPress 5.9 tillät praktiskt taget alla WordPress-teman dig att ändra teckensnittet via temaredigeraren. Detta gör att du kan ändra teckensnittet i alla delar av din webbplats. Och det är verkligen lätt att göra.

Läsa:  Hur man får ett gratis domännamn 2024

Det enda problemet är att vissa teman inte har samma alternativ. Så om du inte ser typografialternativet, gå till metod 2.

I WordPress-instrumentpanelen klickar du på Utseende och väljer alternativet Anpassa.

Som jag sa tidigare är detta olika för varje tema. Ibland visas typografialternativet i inställningarna på översta nivån. Vid andra tillfällen är det begravt på en annan plats.

I mitt fall använder jag Astra-temat. Jag måste först klicka på Global innan jag kan välja ett typografialternativ.

De tillgängliga alternativen är temaspecifika, men i allmänhet kan du ändra mellanrum, marginaler, teckenstorlek och mer. Du kan använda teckensnittsväljaren för att välja bland standardalternativen som ditt tema erbjuder. Vissa erbjuder mer än andra.

Du kan se hur typsnittet ser ut i de områden som det ändras. Ibland är de allmänna alternativ, och ibland är de för specifika avsnitt.

Metod 2: Kod

Alla teman erbjuder inte typografi som ett alternativ, du måste koda typsnitten i stilmallen själv. Den goda nyheten är att det här låter mycket svårare än vad det faktiskt är.

Gå till din webbplatss backend och hitta ditt temas CSS-stilmall. Om du vill använda ett teckensnitt på hela din webbplats, lägg till följande kodrad överst på arket:

* {font-family:”Teckensnittsnamn”}

Du måste ersätta “font name” med det faktiska namnet på teckensnittet (som Arial). Spara dina ändringar och det är ditt nya typsnitt. Typsnittet måste vara ett standard HTML-teckensnitt, annars måste du ladda ner teckensnittet för att använda det.

I dessa fall kan du ibland bädda in en kodrad i ditt rubrikområde. Ett bra exempel på detta är Google Fonts.

Metod 3: Webbplatsredigerare (WordPress 5.9)

Webbplatsredigeraren är ett nytt tillägg till WordPress som börjar med den senaste uppdateringen 5.9. Det är inte tillgängligt för de flesta teman, och de som finns är fortfarande i beta. I framtiden kommer detta dock sakta men säkert att ersätta temaredigeraren.

Under de kommande månaderna kommer teman att släppas exklusivt med denna redigerare, och nuvarande teman kommer att lägga till den som en ersättning eller i kombination med metod 1-temaredigeraren.

TL;DR: Webbredigeraren är här för att stanna och låter dig göra ändringar på hela din webbplats på en gång. Och ja, detta inkluderar typografialternativ.

Klicka på Utseende och välj alternativet Editor.

Det första du bör se är alternativet Typografi till höger. Klicka på det.

Du kommer då att bli ombedd att välja mellan text eller länkar. Länkar hänvisar till skapade hyperlänkar, medan text hänvisar till allt annat. Välj alternativet Text.

Välj det teckensnitt som ska användas från rullgardinsmenyn Font Family. Som tidigare är de tillgängliga alternativen temaspecifika.

Och det är allt. Denna redigerare kommer definitivt att utökas i framtida uppdateringar, så det kommer definitivt att finnas fler alternativ för dig att dra nytta av i framtiden.

Hur är det med tillägg?

WordPress har ett stort urval av plugins som låter dig lägga till anpassade typsnitt, men anpassade typsnitt betyder inte vanliga HTML-teckensnitt. Dessa är unika typsnitt som du kan använda gratis.

Läsa:  Hur man skriver en uppsats på 500 ord

Nu kan detta låta inbjudande, men för det mesta finns det ett enormt problem med att använda dessa typsnitt. De saktar ner din webbplats.

Jag nämnde detta tidigare, men för att sidan ska laddas måste webbläsaren som används av besökaren ladda ner typsnittet från servern som det är lagrat på. Detta är ett extra steg, och ju fler anpassade typsnitt du använder, desto längre tid tar det.

Detta är en stor anledning till varför HTML-teckensnitt används i stor utsträckning. De är standard och kan hittas var som helst. Och det är därför de flesta webbplatser använder ett typsnitt. Ju mer du lägger till, desto längre tid tar det att ladda.

Den goda nyheten är att Google har arbetat med att utöka utbudet av teckensnitt som är tillgängliga med Google Fonts.

Vad är Google Fonts?

Google Fonts är anpassade typsnitt tillgängliga direkt från Google. Och de erbjuder över 1000 typsnitt att välja mellan. Det viktigaste är att de undviker de problem som anpassade typsnitt stöter på eftersom de lagras direkt på Googles servrar.

Sedan levererar den typsnittet till alla användare på bästa möjliga sätt. Slutresultatet är att din webbplats kommer att laddas snabbare än annars med hjälp av en tredjepartsfil.

Eftersom Google Fonts inte är i fokus för den här guiden lämnar jag den här, men om du är intresserad har vi redan en guide för att hosta dem lokalt på WordPress.

Tips för att göra dina HTML-teckensnitt läsbara

Ett av de största problemen för nybörjare är läsbarheten. Halva tiden inser de inte ens att det är ett problem. Om besökarna inte kan läsa ditt innehåll kommer de inte tillbaka efter mer. Och de är mindre benägna att dela det.

Låt oss ta en titt på de viktigaste övervägandena som alla webbplatser bör tänka på när de väljer sitt typsnitt.

1. Använd inte kursiv stil

Det finns flera typsnitt att välja mellan, varav många använder kursiv stil. Även om det kan vara bra för vissa webbplatser, till exempel de som fokuserar på historia, är det inte det bästa valet för tillgänglighet.

För det första är det viktigt att ta itu med den största bristen i detta designval, många människor kan inte läsa kursivt.

Faktum är att många skolor i Amerika har eliminerat kursiva klasser, så denna grupp växer bara. Och chansen är stor att inte bara amerikaner tittar på din webbplats.

Människor som lär sig engelska som andraspråk kämpar också med att läsa kursiv.

Du kanske tycker att det är snyggt, men jag kan försäkra dig om att det kommer att avvisa många från innehållet.

Läsa:  Hur man hittar utkast på Instagram 2024

2. Välj rätt färg

Ett av de största misstagen nybörjare gör är att ändra teckensnittsfärgen. Detta kan lätt göra texten mycket svår att se för vanliga besökare och omöjlig för synskadade.

Särskilt bör du tänka på att färgblindhet finns. Bara i Amerika, över 12 miljoner människor har någon form av färgblindhet.

Du behöver dock inte bara oroa dig för texten, utan även bakgrundsfärgen. Till exempel är svart text ett utmärkt val för de flesta webbplatser, men inte för svarta eller mörka bakgrunder. Istället fungerar vit text bättre.

Färger är lätt en av de största faktorerna som gör onlineinnehåll svårt att läsa.

3. Gör inte texten för liten

Nu vet jag vad du tänker, folk kan bara använda zoomfunktionen för att göra texten läsbar? Även om detta är helt sant, hur många människor tar sig tid att justera zoomnivåerna? Hur många vet egentligen hur?

Sanningen är att om någon tycker att texten är för liten så går de bara.

Rekommenderad storlek på texten i bloggen är 16-20 pixlar. Det är viktigt att inte heller ignorera datoranvändare, eftersom mobilanvändare är mycket känsligare för liten text. Återigen, även om det är enkelt att zooma, vet de flesta inte eller vet att det finns.

Korrekt textstorlek är avgörande för framgång.

FAQ

Hur stor är HTML-teckensnittsfamiljen?

Även om det finns många teckensnitt att välja mellan, består den faktiska HTML-teckensnittsfamiljen av endast fem medlemmar:

  1. Serif
  2. Sans serif
  3. Kursiv
  4. Fantasi
  5. Monospace

Familjer hänvisar till en viss stil som alla typsnitt inom följer, åtminstone för det mesta. Det finns några avvikelser, men du kan förvänta dig att den kursiva familjen producerar teckensnitt som ser väldigt kursiva ut.

Varje teckensnittsfamilj har hundratals teckensnitt att välja mellan, och listan växer för varje år. De flesta är dock inte nätverkssäkra.

Vad är webbsäkra typsnitt?

Webbsäkra typsnitt är de mest använda typsnitten på Internet. De är webbsäkra eftersom alla enheter och webbläsare är vana vid att använda dem.

Det totala antalet webbsäkra typsnitt är svårt att avgöra, men det finns runt 20. Listan växer i takt med att fler och fler webbplatser väljer olika typsnittsstilar.

Som ett resultat stöder fler och fler webbläsare de mest populära typsnitten, så listan växer.

Här är några av de mest använda typsnitten på Internet och familjerna de kommer från:

  • Arial (sans-serif)
  • Times New Roman (serif)
  • Verdana (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Effekt (sans-serif)
  • Didot (serif)
  • Georgien (serif)
  • Amerikansk skrivmaskin (serif)

Är typsnittet ett typsnitt?

Per definition är ett teckensnitt bokstäver, siffror och tecken som alla har samma utseende. Ett teckensnitt är en specifik stil som ett typsnitt använder med en viss bredd, storlek och vikt.

Detta kan fortfarande vara förvirrande, så jag ska ge ett exempel. Tänk på Times New Romania; det är per definition ett typsnitt. Men när du ger den en viss storlek, säg 20 pixlar, och gör den fet, blir den ett typsnitt.

Läsa:  Hur man förbättrar livskvaliteten – arbetstips

De två är väldigt lika och används ofta omväxlande, men de är faktiskt inte samma sak.

Är fet ett typsnitt?

Det är en ganska vanlig användning I fetstil, Kursiveller Fet kursiv stil för att hjälpa sökord eller fraser att sticka ut. Men fetstil är egentligen inte ett typsnitt.

Istället är det själva teckensnittsredigeraren. Det kan dramatiskt hjälpa ditt innehåll att bli mer läsbart, särskilt när fler och fler användare börjar bara skumma sidor för att hitta en specifik fras eller term. Och i detta avseende är det mycket effektivt.

Det är dock inte en ersättning för den faktiska titeln.

Vad är skillnaden mellan ett webbteckensnitt och ett skrivbordsteckensnitt?

Ett skrivbordsteckensnitt installeras på din dator med syftet att använda det i ett specifikt program. Tänk dig till exempel att installera ett teckensnitt som ska användas i Microsoft Word eller Photoshop.

Ett webbteckensnitt är speciellt framtaget för webbplatser och använder CSS för att visa på webbsidor. Många typsnitt kan faktiskt existera som både webb- och skrivbordsteckensnitt, som Times New Roman eller Arial, men de är faktiskt väldigt olika ur ett kodperspektiv.

Således har gränsen mellan dem suddats ut med tiden.

Ska jag använda en HTML-teckensnittstagg?

Jag nämnde inte HTML-teckensnittstaggen eftersom den klassiska editorn är långt ifrån oss. Men om du fortfarande använder det kan du använda en HTML-redigerare för att redigera teckensnittet. Detta är dock onödigt eftersom det finns en visuell redigerare.

För den intresserade är teckensnittsetiketten ““, och det låter dig redigera teckensnittet på texten eller sidan. Det används fortfarande, men antalet minskar.

HTML-teckensnitten du väljer är verkligen viktiga

Det är obestridligt att det mesta av innehållet på de flesta webbplatser är i form av text. Eller med andra ord, använd ett typsnitt.

Därför kan typsnittet du väljer göra eller förstöra din webbplats. Och det är inte bara dess stil. Du måste se till att den har rätt storlek, färgad på ett sätt som gör att den sticker ut och matchar stämningen på din webbplats.

Många nybörjare väljer bara ett generiskt typsnitt som Arial, vilket faktiskt är ett smart val eftersom det är det mest populära. Men att välja det kan dramatiskt förbättra upplevelsen du erbjuder dina besökare.

Vilka HTML-teckensnitt använder du på din webbplats? Använder du ett webbsäkert typsnitt?