Arnel's WebbProceduren med att välja färger, bilder, layout, etc. för en webbsida är viktigt och kan vara nog så svårt när man är börjag bygga en ny webbplats. Men att välja storlek och använda rätt enhet för texterna på webbsidorna är minst lika viktigt. Först och främst rekommenderas användning av CSS för att ange textstil (font) och storlek för texten.
Utan text har sökmotorerna förstås ingen möjlighet att indexera sidans innehåll. Utan tydligt läsbar text kan inte besökare läsa innehållet på ett behagligt sätt och kan då välja att lämna sidan. Denna korta genomgång av textstorlek och storleksenheter kan förhoppningsvis hjälpa till att välja det bästa sättet att visa sidornas textinnehåll.
Standard textstil och storlek för de flesta webbläsare är Times New Roman med 12 punkter, men det kan variera mellan webbläsare eftersom användarna alltid har möjlighet att ändra på webbläsarens standardinställningar. Stilmallar (CSS) har tre huvudsakliga fördelar jämfört med det gamla "font size" som gör det till ett bättre alternativ för textkontroll:
De gamla fonttaggarna begränsar möjligheterna medan CSS också erbjuder en större variation av måttenheter att använda:
| Måttenhet | Skrivs | Beskrivning |
| Centimeter | cm | Standard metrisk centimeter som finns på linjaler etc. |
| Em | em | Motsvarar bredden för versala bokstaven "M" i den aktuella textstilen och storleken. |
| Ex | ex | Motsvarar höjden för gemena bokstaven "x" i den aktuella textstilen och storleken. |
| Inch | in | Standard amerikansk tum (inch) som också finns på en tumstock etc. |
| Millimeter | mm | Standard metrisk millimeter som också finns på tumstock etc. |
| Procent | % | Textstorleken är relativ till textens basstorlek för sidan och sätts till ett procentvärde. Exempelvis en textstorlek angiven till 125% motsvarar en storlek som är 25% större än basstorleken. Textstorleken 50% är hälften av basstorleken för sidan. |
| Pica | pc | Standardmått för texter som ska skrivas ut. En pica motsvarar 12 punkter. |
| Pixel | px | En pixel motsvarar en pixels storlek på den skärm som texten ses i. |
| Point | pt | Standardmått för texter som ska skrivas ut. 72 punkter motsvarar 1 tum. |
De mest använda enheterna för webbsidor är pixel och procent. Pixel är dock inte en bra enhet då textens storlek varierar mycket beroende på de olika skärmupplösningar som används. På en skärm med 800x600 pixels upplöstning blir texten stor, men på en skärm med hög upplösning kan den bli närmast oläsligt liten!
Det är viktigt att förstå hur dessa olika måttenheter visas och syns i olika webbläsare och skärmar, annars kan man få en del riktigt oväntade resultat! Här nedan visas hur olika texter i de olika måttenenheterna ser ut i en webbläsare:
| Måttenhet | Ser ut så här på din skärm | I upplösning 1024x768 |
| Centimeter | Text i storlek 0.3cm |  |
| Em | Text i storlek 1.2em |  |
| Ex | Text i storlek 2ex |  |
| Inch | Text i storlek 0.33in |  |
| Millimeter | Text i storlek 5mm |  |
| Relativ (%) | Text i storlek 150% |  |
| Pica | Text i storlek 2pc |  |
| Pixel | Text i storlek 10px |  |
| Point | Text i storlek 14pt |  |
Kolumnen till höger innehåller bilder för att visa texten i den upplösningen, om du inte har samma upplösning på skärmen. Notera att en del texter ser "feta" ut även med ganska "normal" storlek, för en del av måttenheterna. Notera också att 10px ger så liten text att den för många blir svårläst redan i den i kolumnen angivna upplösningen. Ändå förekommer denna textstorlek på många webbsidor!
Det många tycks glömma är att en webbsida inte ser likadan ut i alla webbläsare och skärmar, det är oftast bara den egna skärmen man använder som referens! Man bör komma ihåg att det inte är möjligt att få en webbsida som alltid ser exakt likadan ut i alla webbläsare, operativsystem och skärmar. Man kan inte få en absolut kontroll och ska därför inte heller försöka få det, genom att till exempel försöka använda HTML-koder till att "styra" besökarens webbläsare.
Det bästa man kan göra är att producera sidor som ser något så när likadana ut, men framför allt fullt användbara, tydliga och läsliga för alla besökare. Då kan det vara bra att komma ihåg följande:
Ökning av textstorlek i Internet Explorer: Många med synnedsättningar använder Visa > Textstorlek i IE för att öka textens storlek så att den blir läslig för dem. Men om textens storlek är angiven i pixels (px) kan storleken inte ändras!
Webbläsare och operativsystem visar samma textstil och storlek olika. Texten kan därför variera något beroende på vad besökaren har i sin dator.
Kontroll av CSS-specifikationen. En felfri CSS-specifikation är av stor vikt. En del webbläsare är ganska "förlåtande" och ignorerar felen medan resten visas enligt specifikationen. Andra webbläsare ignorerar hela CSS-specifikationen även om den bara innehåller ett fel. Men i båda fallen visas antagligen inte texten exakt som avsett.
Måttenhet måste alltid anges. En måttenhet måste alltid anges direkt efter måttet som anges i CSS-specifikationen. Det får inte finnas något mellanslag mellan måttet och enhetsförkortningen. Exempelvis är inget av nedastående korrekt:
body {font-size:100;}
body {font-size:100 %;}
Specifikationen måste se ut så här:
body {font-size:100%;}
Kontroll av HTML-kodningen. Kontrollera noga att både start- och slut-taggar finns och på rätt platser, samt att sluttaggarna ligger i rätt sekvens. Lättast att hitta eventuella fel i en sida med mycket kod, är det med hjälp av W3C Validatorn.
En trend bland webbdesigners är att tro att man med liten text gör webbsidorna elegantare och ger mera plats per sida för innehållet.
Detta resulterar ofta i en oresonligt liten text som inte kan läsas av alla.
Om storleken också är angiven i 'px' eller 'pt' går den inte att förstora heller, för att på det sättet försöka göra den läslig.
En bra design ska se bra ut utan att besökaren behöver förstora texten.
Det riktiga och moderna sättet att ange textstorlek är att använda CSS istället för <font> taggen i HTML. CSS är flexiblare, lättare att underhålla och sparar bandbredd.
Källa: W3C