Изменяемые размеры шрифтов

16 Oct, 2006

Разумеется я имею ввиду изменяемые в ИЕ(6-) шрифты, поскольку во всех остальных броузерах они и так легко изменяемы. Задавать шрифты в пикселах - нехорошо по отношению к юзерам. Можно и нужно задавать их в других относительных единицах. Тут я расскажу скорее не о каком то оригинальнои приеме, а просто об общем подходе для создания страничек с резиновыми шрифтами для ИЕ.
Заметка(запоздалая) вызвана двумя постами на pepelsbey.net и mauzon.com и желанием поделиться своим простым подходом, вдруг кому то поможет.

Возможности

Задавать шрифты можно в пикселах(если бы не ИЕ так и нужно было бы делать всем), поскольку это все же не абсолютная единица как многие любят говорить - а относительная(от точек экрана зависит), так же можно использовать ЕМ'ы, проценты и ключевые слова. Ключевые слова немного глючат в IE - их значение там сдвинуто, хотя при желании можно использовать и их(с хаками). Пикселы для текста это табу - по причине существования ИЕ - там пользователь не сможет изменять размеры шрифта заданного пикселами. Остаются проценты и ЕМ. Они очень похожи. Потому их можно использовать смешанно - что Вам больше нравится. Далее я расскажу как с помощью ЕМ добиться точных нужных пиксельных размеров.

С чего начать

В своем темплейте я как правило сразу задаю размер шрифта для body, вот так:
  1. body{
  2. font: 62.5%/1.4 Arial, sans-serif
  3. }
По дефолту в броузерах размер шрифта 16 пикселов, таким образом 62.5% от 16 равняется ровно 10(я в столбик считал). То бишь этим нехитрым правилом дефолтовый шрифт мы сделали в броузере 10 пикселов. Теперь пускай у нас есть подобная страничка:
  1. <div id="header"></div>
  2. <div id="content"></div>
Вот такой вот CSS:
  1. #header{font-size:1.1em}
  2. #content{font-size:1.3em}
Задаст нам по дефолту размеры в 11 и 13 пикселов для текста этих дивов, причем шрифт останется изменяемым и в ИЕ, чего мы собственно и хотели. Все предельно просто, но есть камни.

Подводные камни

После тех 62.5% весь текст на страничке должен быть якобы размером 10пикселов, но для заголовков и инпут полей это не сработает, не стоит удивляться, нужно отдельно задавать размеры что бы они подействовали:
  1. input,select{font-size:1.1em}
  2. h1,h2,h3,h4{font-size:2em}
Подобные же несуразности возможны и для таблиц.

Во вторых если у вас есть сложные многоуровневые конструкции, к примеру вложенный список:

  1. <ul id="nav">
  2. <li>
  3. <ul>
  4. <li>...</li>
  5. </ul>
  6. </li>
  7. </ul>
то задав
  1. #nav li{font-size:1.1em}
Вы фактически зададите 1.1em и для #nav li и #nav li li (элементов вложенного списка), и таким образом во вложенном списке размер шрифта будет не 11пикселов, как ожидалось, а 1.1*1.1 ~ 1.2 - то бишь 12 пикселов. Потому что 1.1 для вложенного списка будет считаться от 1.1 для внешнего - и они попросту перемножатся.

Потому для вложенного списка нужно задавать 1.1/1.1~1em (желаемый размер в емах нужно делить на тот который сейчас получился из-за наследования, для 10 пикселов надо было 1.0/1.1=0.91) Тогда после дописания

  1. #nav li li{font-size:.1em} /* 1em для 11px, либо 0.91em для 10px */
размеры шрифта в обоих списках будут по 11 пикселов(при дефолтовом размере шрифта в броузере).

Об em нужно думать как о процентах 1.1=110%, 1=100%, в принципе в любом месте кода теперь font-size:110% и font-size:1.1em - будут абсолютно эквивалентны. И нужно помнить что проценты умножаются

Существуют так же способы в которых для body используется 100%(16px) или 76%(0.76*16~=12) - но в моем способе рассчеты размеров наиболее просты и глюков в нем я пока не заметил, потому остаюсь при своих. Если вы знаете какой либо глюк в нем буду рад услышать и проапдейтить пост.

Как перейти с пикселов на ЕМы

Таким образом если вы все еще используете пикселы вместо ЕМов, просто вставляете размер в процентах для body, а затем последовательно заменяете все 11px на 1.1em, 12px на 1.2em, 9px на 0.9em и так далее, но с учетом подводных камней описанных выше - избегайте более чем двухразового наследования. Иначе потом становится трудно считать размеры шрифта вложенных элементов. Вдобавок при увеличении шрифта в броузерах размеры могут начать расти заметно быстрее чем хотелось бы.

В конце

Надеюсь кому то это поможет избавиться от атавизма в виде пиксельных шрифтов :). Хотя если бы не ИЕ то они были бы единственно правильным способом задавания шрифтов, ИМХО. Работает во всех современных броузерах, для 5го ИЕ требуется немного лишнего кода(см. ссылки внизу), после которого и он работает корректно. Никаких глюков с данным способом указания шрифтов мною пока не было замечено. Ссылки по теме:

Если вы знаете другие способы или какие то уточнения и апгрейды(глюки) к этому методу буду рад услышать!
Учиться никогда не поздно.

39 комментариев к “Изменяемые размеры шрифтов”

1.memyself | 16 Oct, 2006
Напомнило статью МакЛеода про эластичные шаблоны, в ней мне впервые встретились 62,5% Оригинал отсутствует, в своё время переводил - http://www.memyself.info/node/16
2.akella | 16 Oct, 2006
Кстати отчасти из похожей статьи(может и этой даже) я эту цифру и почерпнул - там тоже это число использовалось для простоты вычислений. Да и мне нравится больше чем банальное целое 75% )
3.CB | 17 Oct, 2006
2akella: Свойства: Экран - Параметры - Дополнительно - Общие - Масштаб
4.Mkdir | 16 Oct, 2006
Классная статья! Занёс к себе в del.icio.us. Полезность для меня - 5 (по пятибальной шкале). Спасибо.
5.Flack | 17 Oct, 2006
Слишком много подводных камней. Все-таки классическое сочетание 100%/em мне нравится больше. Будет время — напишу, сейчас некогда совсем.
6.uggallery | 17 Oct, 2006
Остроумное решение. Хотя уже говорят, что благодаря седьмому IE, пикселы -- это новыe em-ы :)
7.Serj | 17 Oct, 2006
Спасибо, особенно за алгоритм перехода.
8.akella | 17 Oct, 2006
2Flack: было бы действительно интересно послушать, чем там лучше в плане камней. Может стоит взять на вооружение... Напишешь сделаю апдейт в линках внизу. 2uggallery:лучше бы благодярая 7му ИЕ исчезли все остальные ИЕ ) 2доброход: ну как бы емных шрифтах надо думать как будет выглядеть ваш дизайн при увеличении шрифта, что бы ничего особо не взрывалось. У меня вот 19 монитор, в своем примере - http://akella.org.ua/pro/portal/ поставил самый крупный шрифт(предварительно заткнув уши ;)) - и вроде ничего такого... Это скорее неувязки с версткой дизайна непродуманного для увеличения шрифта. Или Вы что то другое имели ввиду?
9.akella | 18 Oct, 2006
Спасибо! И самое главное надеюсь веб станет чуточку дружелюбнее для юзеров ) К такому методу действительно быстро привыкаешь и не за горами становится совсем элементарным эластики. Про фикс долго сомневался - пожалуй ты прав он не такой большой и достаточно важный что бы добавить. Наверно вложенные списки чуть ли не единственный такой "камень наследственности" который трудно обойти. И приходится пересчитывать. Спасибо еще раз!
10.доброход | 17 Oct, 2006
С указанием для BODY шрифта в процентах есть такая гадость: на 19" LCD мониторах пользователи частенько ставят в установках "крупный шрифт". В этом случае IE эти 60-70% просто "взрывает" на пол-экрана. В случае, если размер шрифта для BODY указан в em, такого не происходит.
11.Mourner | 18 Oct, 2006
Молодец! Думаю, эту статью очень многие найдут полезной. Сам перешёл на em'ы уже давно и никогда теперь не задаю размеры шрифтов в пикселях. При чем уже настолько к этому привык, что делаю это на полном автомате, с лёгкостью обходя все возможные проблемы. Чтобы избежать упомянутых выше камней, советую, например, вместо того, чтобы задать размер шрифта элементу #header, задать его, скажем #header p, #header li - тогда не нужно выполнять этих пересчётов, 1 em остаётся равен 10 пикселям - размер шрифта не наследуется, а перекрывается в таком случае. Еще ты бы лучше включил в статью упоминание о фиксе IE ("* {font-size: 100.01%}"), не ограничившись ссылкой в конце - это важный момент, он стоит того.
12.Krait | 09 Nov, 2006
Спасибо за статью. Позволю себе не согласиться, что "pixels были бы единственно правильным способом задавания шрифтов" pixels это очень плохо. 16 пикселов на обычном экране это нормально, а на экране с 180dpi? Да сейчас это редкость, но развите железа не стоит на месте… И будут потом будем городить workaround что в одном логическом пикселе у нас будет n физических…
13.akella | 09 Nov, 2006
Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.(w3c)
По идее пикселы должны быть всегда именно тем что нам удобно читать - независимо от ДПИ. Так что я думаю уж если в мире на что то и можно полагаться то пускай это будут пикселы ) А Игры с EM это как по мне скорее восполнение недостатка Интернет Эксплорера по изменению шрифтов. Впрочем, это моё ХО.
14.akella | 28 Nov, 2006
Только там 100.01% нужен для несколько других целей и он не мешает тому чсто 1.1em остается 11 пикселами. Это что бы решить проблемы с округлением недонаследованостью.
15.YoYurec | 28 Nov, 2006
2memyself: >Напомнило статью МакЛеода про эластичные шаблоны угу, оттуда и юзаем. пока проблем не было. 2Mourner: >Еще ты бы лучше включил в статью упоминание о фиксе IE (”* {font-size: 100.01%}”), не ограничившись ссылкой в конце - это важный момент, он стоит того. дык для всех браузеров работает, не только ИЕ. другое дело 1em будет равн 16px, что не очень удобно при подсчёте :(, имхо 62,5% - идеал.
16.Михаил Савин | 04 Dec, 2006
2akella &all В свое время экспериментальным путем нашел обратный от твоего вариант. В body устанавливается 0.6em (условные 10px); финальные размеры указываются в процентах. Но твой более обоснован. ("По дефолту в броузерах размер шрифта 16 пикселов") Куда интереснее вопрос с line-height. Каким образом можно назначить базовый размер line-height в значение 10px через % или em? Чему оно будет равно? Экспериментальным же путем установлено, что, по всей видимости, line-height наследуется от указанного конечного размера шрифта. Т.е.: body { font-size: 62.5%; line-height: 62.5%; } .text { font-size: 120%; line-height: 120%; } В этом случае берется не 120% от указанного в body, а 120% от вычисляемого font-size: 120% в .text. Как же сделать так, чтобы не заниматься муторными вычислениями, а сразу задавать реальные line-height 12px четким процентым соотношением 120%? Нужно именно процентным, а не пиксельным, дабы при увеличении шрифта через стандартные средства броузера гибко менялся не только размер шрифта, но и интелиньяж. (В противном случае, при указании line-height сразу в px, мы имеем грамотное увеличение размеров шрифта, но при этом - накладывающиеся строки.)
17.akella | 04 Dec, 2006
Я думаю что как раз для этого и предназначены "единицы" при указании line-height. Таким образом если вы хотите задать 120%(20%) от размера шрифта для высоты промежутков между строками то достаточно указать font-size:whateverpx(%) line-height:1.2; По моему это и есть решение вашей проблемы. Таким образом 1.2 будет умножено на унаследованный размер шрифта, и вам не нужно беспокоится о расчетах - это всегда будет 20% от размера шрифта. Я использую только такой способ.
18.Макс | 25 Dec, 2006
А как насчет использования таких единиц как pt (points)? Имхо, более удобен как вариант для страниц с 2-3 типоразмерами шрифта. Да и для каждой настройки системы размер определяется автоматически вроде.
19.akella | 25 Dec, 2006
Да, но пользователи Интернет Эксплорера тогда не смогут изменять их размеры... А это не очень хорошо.
20.Серёга | 27 Jan, 2007
akella ты чё! подумай сколько процентов этих самых пользователей делает это... меняет шрифты? =))))))
21.akella | 28 Jan, 2007
В человеке должно быть красиво все, и душа и тело и одежда" (с) Чехов
"Копейка рубль бережет" :)
22.Я | 19 Feb, 2007
akella сказал(а) 28 января: В человеке должно быть красиво все, и душа и тело и одежда” А Чехов сказал: "В человеке все должно быть прекрасно - и душа и одежда и мысли." Будьте внимательнее к класике...
23.akella | 19 Feb, 2007
Больше не буду доверять гуглу. :)
24.Aykroyd | 17 May, 2007
Хорошая статья. Но вот где собака порылась: Потому для вложенного списка нужно задавать 1.1/1.1 = 1.0em (желаемый размер в емах нужно делить на тот который сейчас получился из-за наследования, для 10 пикселов надо было 1.0/1.1=0.91). В общем, ошибочка в расчетах, однако. ) для 11 пикселов во вложенном списке – 1.0em для 10 пикселов во вложенном списке – 0.91em для 9 пикселов во вложенном списке – 0.82em для 8 пикселов во вложенном списке – 0.73em
25.rmaksim | 10 May, 2007
...=0.83...размеры шрифта в обоих списках будут по 11 пикселов... однако... размер шрифта во втором списке остался 11... но общая ошибка, всего на 6-ти пунктах в менюшке составила 1px...(была рамка - сразу бросилось в глаза - так бы и не заметил...) и причем только в FF :( а число там получается на самом деле 0,8333333........ т.е. на самом деле FF только правильно посчитал :)))... вот и поставил 0,833 - все ОК везде... т.ч. надо смотреть конечный рез-т
26.akella | 18 May, 2007
да, действительно ошибся, Спасибо большое! не глядя перенес рассчеты для 1.2 на 1.1 и запутался :)
27.Рома | 02 Mar, 2008
что-то у меня такая фишка не прокатила! все шрифты стали огромными в опере вышел из положения прописав условный файл стилей для ИЕ и запихнув туда font-size: 62.5%; вродебы нормально отображает
28.CSS XHTML &#8220;Шпаргалка на промокашке&#8221; &laquo; Студия AlterEgo. Блог | 06 Apr, 2008
[...] --------------------------------------------------------------- Работа с размерами шрифтов для ИЕ и FF * «Изменяемые размеры шрифтов» cssing.org.ua/2006/10/16/.. [...]
29.akella | 17 Apr, 2008
Перезалить что?
30.Lost_Sense | 17 Apr, 2008
"Напомнило статью МакЛеода про эластичные шаблоны, в ней мне впервые встретились 62,5% Оригинал отсутствует, в своё время переводил - http://www.memyself.info/node/16" вот эту статью. и ответьте, пожалуйста, для чего использовать font: 62.5%/1.4 зачем нужно /1.4
31.Lost_Sense | 17 Apr, 2008
Зачем задавать для body{ 2. font: 62.5%/1.4 Arial, sans-serif 3. } font: 62.5%/1.4 зачем это 1.4? "Напомнило статью МакЛеода про эластичные шаблоны, в ней мне впервые встретились 62,5% Оригинал отсутствует, в своё время переводил - http://www.memyself.info/node/16" Статья отсутствует - можете перезалить куда-нить или скинуть на мыло? hobot88@bk.ru
32.akella | 17 Apr, 2008
Не могу нагуглить оригинал. Не совсем понял - куда ее перезалить? Какой файл? 1.4 - это величина line-height. Я раньше всегда указывал 1.4 для читабельного текста. Теперь указываю 1 =)
33.Lost_Sense | 18 Apr, 2008
да не оригинал, мне б эту статью на русском языке достать любым доступным способом =)
34.Павел | 04 Aug, 2011
Здравствуйте, Юрий. Спасибо за статью! Скажите, то, что написано в статье еще актуально? Вы пользуетесь таким способом, когда верстаете? P.S. В статье написано"Существуют так же способы в которых для body используется 100%(16px) или 76%(0.76*16~=12)", здесь вместо 76% Вы скорее всего имели 75%.
35.akella | 04 Aug, 2011
Современные браузеры уже все масштабируют шрифты заданные в пикселах, потому все чаще я их и использую. Em для сайтов где есть переключалки размеров шрифтов - там это удобно.
36.akella | 04 Aug, 2011
76 там нужно для каких-то проблем с округлением, также как и 100.1% часто пишут =)
37.akella | 04 Aug, 2011
раньше была, просто недавно блог весь упал, это уже восстановленный вариант =(
38.Павел | 04 Aug, 2011
Спасибо за ответ! Жалко, что нет подписки на комментарии(галочки внизу), было бы здорово :)
39.pikasso | 03 Aug, 2012
ХОРОШАЯ (сбольшой буквы) статья , мне очень помогла така как сейчас пытаюсь изучить css и мне было сложно понять эти мелочи которые основа визуального восприятия сайта...а особенно мне пригодилось "Как перейти с пикселов на ЕМы" Спасибо автору.