Vad brukar standard storlekar och inställningar vara för en hemsida när det kommer till texter som ska läsas?

Permalänk
Inaktiv

Vad brukar standard storlekar och inställningar vara för en hemsida när det kommer till texter som ska läsas?

Bootstrap är en bra lathund att använda för att lösa det mesta på en hemsida, men just nu vill jag inte använda det då jag vill lära mig. Jag undrar vad är en standard storlek och font-family på hemsidor där man läser exempelvis artiklar? Det måste ju skifta i storlekarna när det kommer till datorskärm och mobil?

Har ni också tips på andra inställningar som ni brukar använda? Såna inställningar som andra kanske oftast missar.

Om ni har tips på design med mera också får ni gärna tipsa om det. Mina inmatningsrutor och knappar brukar inte se så hyfsade ut, även om jag försöker lägga till färger med mera.

Glömde lägga till design
Permalänk
Inaktiv

Mina webbskills är inte dom mest slipade nuförtiden, men jag brukar sätta font-size på html elementet till 14pt, och sedan sätta font storlekar på typ artikelblock till säg 1rem, footers till 0.75rem osv. Då kommer allt skala efter vad du satt html till. Och sen använder jag em ist för rem i saker som p, h1, h2, li osv. Då em skalar efter sin parent iställer.

Permalänk
Inaktiv
Skrivet av anon334363:

Mina webbskills är inte dom mest slipade nuförtiden, men jag brukar sätta font-size på html elementet till 14pt, och sedan sätta font storlekar på typ artikelblock till säg 1rem, footers till 0.75rem osv. Då kommer allt skala efter vad du satt html till. Och sen använder jag em ist för rem i saker som p, h1, h2, li osv. Då em skalar efter sin parent iställer.

Alright. Använder du någon standard font-family?

Permalänk
Inaktiv
Skrivet av anon338341:

Alright. Använder du någon standard font-family?

Brukar köra någon sans för headers, serif för paragrafer, och mono för kodblock osv.

Har egentligen ingen särskild family jag kör, utan brukar hitta på fonts.google.com för varje hemsida.

Permalänk
Medlem

... eller så går du in på regeringen.se / försäkringskassan.se och kollar deras css vad de har, som du själv betalat för skall vara bästa lösningen för bredast massa. Och ja, de kan sin skit, jag jobbar där, inga duvungar eller ogenomtänkt direkt.

Visa signatur

ASRock X870E Nova WIFI / Ryzen 9800X3D (CO: -45 AC) / Corsair Vengance 64GB DDR5 6000MHz CL30 / Crucial T705 1TB Gen5 + 5.5TB sekundära / ASUS TUF 4080 Gaming OC / Seasonic Focus GX 850W ATX 3.1 / Acer Predator XB273UGX 1440p 270 Hz G-Sync / FD Torrent Compact / Phantom Spirit 120 SE / Evo 4 / Sennheiser IE 300 / Rode NT1-A
Synology 1621+ 6*16 / 1513+ 5*8 / LG CX 65" / XBox Series X / Switch 2 / Steamdeck OLED

Permalänk

Som alltid, det beror på vad du vill förmedla. Det finns ingen perfekt fontstorlek för alla områden.

Men som referens:
Lite information = Större storlek
Mer information horisontellt = Lägre storlek.
Starta med 16px för majoriteten av texten på din sida. När det känns som att man måste scrolla för att hitta vad man söker, designa om sidan först, om det inte går, dra ner till 14px.
Om du försöker få användare att navigera öka storleken.

Gå inte lägre än 12px.

Men allt beror på vilken upplevelse du vill att dina besökare ska ha.
Ovana web användare eller fokus på rubriker, mindre information och större font.

Tex.
omni.se (24px-18px),
svt.se (72px-17px)
shl.se (12.8px-14.4px)

Permalänk
Medlem

Brukar använda denna som referens ibland:
https://grtcalculator.com/

Man brukar säga att längden på raderna skall ligga på mellan 45 och 85 tecken (inklusive punkt och mellanslag) för att det skall vara "bekvämt" att läsa. Testa dig fram och justera font-size samt line-height* för att få till något som känns bra.

* line-height är som default satt till "normal" om jag inte minns fel, vilket tolkas olika beroende på webbläsare. Därför är det bra att specifikt ange en line-height. När du gör det så är det bäst att använda rena siffror (ingen speciell enhet). Det multipliceras med elementets font-size. Tror att det är rekommenderat att inte gå under 1.5 för paragrafer som skall "läsas" så att säga.

line-height: 1.5;

Använd media-queries för att sätta upp olika storlekar vid olika upplösningar. När bredden är > 1000px så vill du kanske använda 22px som font-size, medans det kan vara lämpligt att använda 14-16px när bredden är < 400px. Nu var det ett tag sen jag gjorde något anpassat för mobiler, så storlekarna kanske är orimliga, men det jag vill förmedla är att man behöver anpassa beroende på upplösning.

Jag brukar även ändra min font-size på html till 62.5% (oftast är default-storleken i webbläsaren 16px, detta gör att den blir 10px) för att enklare arbeta med rem-enheter.

html { font-size: 62.5%; // 10px } p { font-size 1.6rem; // 16px }

Sen finns det ju en del andra faktorer som spelar in vad gäller läsbarhet, men jag tycker att man kommer tillräckligt långt genom att ha en bra storlek på typsnittet och korrekt radavstånd, samt en lämplig bredd på raderna

Visa signatur

Grubblare