Stilmallar

Tillgängliga fontstorlekar

Man kan visserligen ställa in en exakt fontstorlek med stilmallar - men på skärmen så avrundas detta så att flera olika inställningar ger exakt samma resultat. (Se översikt över fontstorlekar.)

Denna jämförelse har testat igenom olika storlekar på Arial på olika webbläsare. Omräknat till body {font-size: 100%} och med typsnitten i em bör det ge följande storlekssteg:

(Är inte säker på att omräkningen funkat rätt, det tycks som att typsnitten här är mindre än dem i skärmdumpen. Kan dock bero på mitt micklande med upplösningen.)

.6em

(Blir aningen större för IE/pc än för IE/mac och Opera/pc)

Arial	abcdåäöABCÅÄÖ123
Times New Roman	abcdåäöABCÅÄÖ123
Verdana	abcdåäöABCÅÄÖ123
Georgia	abcdåäöABCÅÄÖ123
Tahoma	abcdåäöABCÅÄÖ123

.69em

Arial	abcdåäöABCÅÄÖ123
Times New Roman	abcdåäöABCÅÄÖ123
Verdana	abcdåäöABCÅÄÖ123
Georgia	abcdåäöABCÅÄÖ123
Tahoma	abcdåäöABCÅÄÖ123

.76em

Arial	abcdåäöABCÅÄÖ123
Times New Roman	abcdåäöABCÅÄÖ123
Verdana	abcdåäöABCÅÄÖ123
Georgia	abcdåäöABCÅÄÖ123
Tahoma	abcdåäöABCÅÄÖ123

.86em

(Blir större för IE/pc än för IE/mac och Opera/pc)

Arial	abcdåäöABCÅÄÖ123
Times New Roman	abcdåäöABCÅÄÖ123
Verdana	abcdåäöABCÅÄÖ123
Georgia	abcdåäöABCÅÄÖ123
Tahoma	abcdåäöABCÅÄÖ123

.93em

(Blir större för IE/pc än för IE/mac och Opera/pc)

Arial	abcdåäöABCÅÄÖ123
Times New Roman	abcdåäöABCÅÄÖ123
Verdana	abcdåäöABCÅÄÖ123
Georgia	abcdåäöABCÅÄÖ123
Tahoma	abcdåäöABCÅÄÖ123

Som jag varit inne på tidigare är det svåra problemet att hitta storlekar som överlever om användaren sätter IE:s textstorlek till minsta läget (något som kan hända av misstag utan att användaren är medveten om hur hon gjort det, och som sedan kan ligga kvar som förinställning för nya fönster).

Min bedöming är att de minsta läsbara storlek, med IE inställt på minsta läget, är:

Arial

.86em

Times New Roman

Inte ens .93em räcker för att göra det läsbart

Verdana

.69em (men .76em ger påtagligt bättre läsbarhet och är bara aningen större)

Georgia

.76em

Tahoma

.76em

Minsta typsnittet, som inte riskerar att få bokstavsformerna förstörda om användaren ställer in Internet Explorer på minsta läget är Verdana .69em. Använd dock hellre Verdana .76em.

En slutsats man kan dra är att för att vara säker i minsta läget måste man använda en storlek som är ganska stor i normal-läget. Frustrerande, men jag kan inte se hur man kan komma runt detta.

Perspektiv på box-modellen

För dig som har svårt att komma ihåg hur margin, padding och allt annat förhåller sig till varandra i CSS.

Textstorlek - inte lätt veta vad som är rätt sätt

Att sätta textstorleken med stilmallar så att användaren kan påverka den själv, men så att den samtidigt inte riskerar att bli för liten, tycks vara ett knepigt problem utan självklar lösning. Här är dock några försök:

• How to size text using ems - se även kommentarerna där fler metoder föreslås
• CSS Wiki - How Do I Size Fonts?

Har också hittat några äldre artiklar:

• Relative font sizing HOWTO
• Zeldman, Give Me Pixels or Give Me Death
• Size Matters

Det stora problemet tycks vara att undvika att text blir för liten om användaren har en lägre än normalt grundinställning (något som tydligen är lätt hänt både för Mac-användare, och för dem som bits av en bugg i IE som gör att 'Text size' som grundinställning står på 'smallest').

Har gjort en sida för att testa olika typsnittsstorlekar med olika webbläsare och inställningar, för att se var gränsen för oläslighet går.

Väldigt preliminärt och enbart testat med Windows IE 6, med textstorleken inställd på smallest, ser det ut som att typsnitten kan tas ner till dessa storlekar innan de blir för små (dvs innan bokstavsformerna börjar förstöras):

Verdana

57-63% (alla storlekar inom intervallet ger samma storlek på skärmen)

Georgia

70-76%

Arial

70-76%

Times New Roman

84-89%

Om du testar sidan med en annan webbläsare (eller med samma men kommer till en annan slutsats), skicka gärna resultaten. Skärmdumpar uppskattas.

Flytande spalter på enkelt sätt

Steg för steg-instruktion om hur man gör en stilmallsdesign med flytande spaltbredder.