Да изясним шрифтовете и размерите.

от 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