Да изясним шрифтовете и размерите.
от Fuedo - Уеб дизайн енциклопедия
Много се говори за шрифтовете и за поддръжката им от браъзурите. Всички знаем за многобройните проблеми на IE и размерът на шрифтовете е един от тях. Разбира се проблемът не идва когато задаваме размера в пиксели, а когато искаме да се борим за достъпност и задаваме шрифта в em.
Защо да задаваме шрифта в em? Ами за да може хората дето недовиждат да си увеличат шрифта според нуждите. Ако в Firefox, Opera и т.н. шрифта се увеличава без значение дали е зададен в пиксели или в em то в любимото ни IE нещата не стоят така. Ако зададете размера на шрифта в пиксели например font-size:12px; той няма да се увеличи ако отидете на View -> Text Size ->...(или задържите Ctrl + Scroll), стандартния начин по който хората с проблеми увеличават шрифта за да виждат текста. За да може текста да променя размера си, трябва да бъде дефиниран в em.
Задаването на шрифта в em не е чак толкова страшно. Просто трябва нещата да се уеднаквят навсякъде. Ето го кода който прави това:
html { font-size:100.01%; }
body { font:1em Verdana, Arial, sans-serif; }
Странната стойност 100.01% помага да се компенсират редица бъгове. На първо място, задаването на шрифта в проценти, помага да се елиминира бъга в IE с разтягането на шрифтовете при задаване на стойности в em в поделементи. В добавка, някой версии на Opera(моя любим браузър :-)) изрисуват шрифта зададен с размер 100% по малък сравнено с другите браузъри. От друга страна, Safari има проблем с 101%. Понастоящем най-добрата стойност е 100.01%. При тази стойност 1em ще бъде равно на 16px. И от тук натаък с прости сметки изчисляваме другите размери. Ето и едно списъче за улесенение:
0.5em - 8px 0.5625 - 9px 0.625em - 10px 0.688em - 11px 0.75em - 12px 0.82em - 13px 0.875em - 14px 0.94em - 15px 1em - 16px 1.07em - 17px 1.125em - 18px 1.2em - 19px 1.25em - 20px 1.32em - 21px 1.38em - 22px 1.44em - 23px 1.5em - 24px 1.563em - 25px 1.625em - 26px 1.688em - 27px 1.75em - 28px 1.813em - 29px 1.875em - 30px

