Как сказал один человек “Сколько шрифты не выставляй, все равно найдется человек, который изменит их размер в своем браузере”. Мысль верна. Но что если предложить пользователю изменить размер шрифтов прямо на сайте? Технология проста и не нова, однако сейчас про нее немного забыли.

Итак, первым делом базовый CSS-файл, который будет использоваться по умолчанию:

/* default font size*/
@import url(small.css);

/* font sizes */
body, div, p, th, td, li, dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

h1 {
  font-size: 130%;
  font-weight: bold;
}

h2 {
  font-size: 110%;
  font-weight: bold;
}

Затем создаем альтернативные таблицы стилей. Для примера мега-супер маленький, супер маленький, маленький, средний и большой (xx-small, x-small, small, medium, large).

xx-small.css будет иметь вид:

/* xx-small.css*/

body, body div, body p, body th, body td, body li, body dd {
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small
}

html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
  font-size: x-small
}

По аналогии делаются и другие стили:

/* x-small.css*/

body, body div, body p, body th, body td, body li, body dd {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small
}

html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
  font-size: small
}

/* small.css*/

body, body div, body p, body th, body td, body li, body dd {
 font-size: small;
 voice-family: "\"}\"";
 voice-family: inherit;
 font-size: medium
}

html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
 font-size: medium
}

/* medium.css*/

body, body div, body p, body th, body td, body li, body dd {
 font-size: medium;
 voice-family: "\"}\"";
 voice-family: inherit;
 font-size: large
}

html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
 font-size: large
}

/* large.css*/

body, body div, body p, body th, body td, body li, body dd {
 font-size: large;
 voice-family: "\"}\"";
 voice-family: inherit;
 font-size: x-large
}

html>body, html>body div, html>body p, html>body th, html>body td, html>body li, html>body dd {
 font-size: x-large
}

В HTML документе объявляем основной и альтернативные таблицы стилей:

<link rel="stylesheet" href="style.css" » type="text/css" />
<link rel="alternate stylesheet" » type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet" » type="text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet" » type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet" » type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet" » type="text/css" href="xx-small.css" title="A–" />

Затем ставим переключатель между таблицами стилей:

<script
  language="JavaScript1.2"
  src="fontswitcher.js"
  type="text/javascript">
</script>  

Содержимое которого (fontswitcher.js) выглядит так:

<form name="font_select" action="GET">
    <input
      type="button"
      onclick="javascript:fontsizedown();"
      value="Уменьшить шрифт"
    />
    <input
      type="button"
      onclick="javascript:fontsizeup()"
      value="Увеличить шрифт"
    />
</form>

Кстати, данный метод применим не только к шрифтам, но и практически ко всему оформлению. Важно только помнить, что для работы необходимо включить поддержку JavaScript в браузере и что ИЕ как всегда может  выеживаться.

Оригинал статьи: Power To The People: Relative Font Sizes 

А какие методы изменения шрифтов знаете вы?