Размер шрифта

[vla]

Размер шрифта​

В этой теме хочу собрать информацию об единицах измерения в web-дизайне! Думаю стоит ограничиться шрифтами.

У каждого способа задания размера шрифта найдутся положительные и отрицательные стороны! В этой теме я хочу их подчеркнуть!


Предлагаю сравнить четыре, всем известных, способа:

1. em <span style="font-size=1em;">Текст</span>
2. px <span style="font-size=16px;">Текст</span>
3. pt <span style="font-size=12pt;">Текст</span>
4. % <span style="font-size=100%;">Текст</span>


Хочу собрать здесь:

• Плюсы/Минусы
• Утверждения 'классиков', с которыми вы согласны/не_согласны
• Ваше предпочтение, описание каждого способа из вашего личного опыта
• Ссылки на полезную информацию
• Приемы комбинирования

_______________________________________________________​

Как я считаю:​

1. em. Вежливый подход

+ Задав изначально шрифт в "em" вы учли предпочтение пользователя, т.е. уважили его настройки компьютера/браузера.​

- Главным недостатком данного способа - проблемы с версткой! Непредсказуемых вариантов может быть больше чем вы думаете... Сайт будет выглядеть в разных браузерах по разному (спорный минус...)​

2. px. Строгий

+ Попиксельная верстка, удобен для табличных данных, элементов меню и лого.​

- Минимальный размер шрифта (в браузере) может вас 'удивить', также пользователю может не понравиться слишком мелкий/крупный шрифт. Это наглядно видно в мобильных браузерах: в зависимости от модели телефона пользоваель выбирает в Opera размер шрифта​

3. pt. Стили для печати. Не использовал "?"

Может кто нибудь поделится опытом...​

3. %. Для шрифтов не использовал "?"

Как я понимаю сравнимо с "em"​

В сети нашел кучу статей про "как задать размер шрифта через CSS". И очень мало ценной информации по практике использования единиц измерения...

Преобразование points в pixels, ems или в проценты в CSS
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты.
Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.

Размеры в em,ex,pt,px - в чем разница?
Попытка дать орисание каждому способу...

 

[BaNru]

3. %. Для шрифтов не использовал "?" Как я понимаю сравнимо с "em"

Насколько мне известно, тут заблуждение.
Ибо размер в процентах от базового размера шрифта, а вот EM от буковки M. А эта буква у всех шрифтов разная.
Еще я слышал про EN (вроде так)

Я сам пока не определился до конца. Но от пикселей я отказался.
В основном использую либо PT, либо проценты, и пробовал смесь. Результат один и тот же.

Можно сказать, что с процентами больше ограничений на размер, а следовательно боле типографический результат получается.

 

[vla]

[member=BaNru], ты не прав, "em" - высота шрифта элемента. Еще есть еще "ex" - высота маленькой буквы "x". Об этом сказано на htmlbook - font-size.

Я провел эксперимент. Смысл его таков:

<p style="font size, font family">Текст, а под ним квадрат
  <span style="display:block; with, height"> </span>
</p>

Выяснил:
От семейства шрифтов высота и ширина span'а не зависит ни при каких условиях
Если задать в em, то высота квадрата зависит от его значения height, заданной в em и значения font-size родителя p, заданного тоже в em. C шириной аналогично.
Ссылку дать не могу - хочу спать!

От px я отказался тоже (я про шрифт, если че ), правда в пользу em

Я сам пока не определился до конца. Но от пикселей я отказался.

Очень странно, что об этих тонкостях мало что известно. Мне кажется - ПЕРВОЕ, что нужно web-дизайнеру - научится работать со шрифтом и знать эти тонкости! Я просто удивлен...

Насколько мне известно, тут заблуждение.

В итоге я настаиваю на своей правоте, но надо будет проверить.

[member=BaNru], если будешь экспериментировать со шрифтами - кидай ссылку - будем думать, раз информации нету...

 

[BaNru]

Для начала по теме полезное
Ссылка (там соседние темы все интересные и дают основы о типографики)
и сама картинка (свг не вставляется в сообщение)

ты не прав, "em" - высота шрифта элемента. Еще есть еще "ex" - высота маленькой буквы "x".

Ну да, не правильно думал. Но я особо ими и не пользовался. И зря походу
Исчерпывающий ответ есть по ссылке http://www.w3schools...ss/css_font.asp
Пора переходить :biggrin:


Примерный перевод рекомендации

Использование смешивания Процентов и EM
Это решение работает во всех браузерах. Установите для BODY шрифт по умолчанию в процентах.

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Этот код работает отлично! Этот код показывает одинаковый размер текста во всех браузерах и позволяет всем браузерам увеличивать, изменять размер текста!

Так же, там есть такая фраза

The em size unit is recommended by the W3C.

Em рекомендован W3C

Думаю вопрос исчерпан.

И я буду переходить на это. Посмотрим какие костыли встречу.

 

[motek]

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Думаю вопрос исчерпан.

ничего толком не обьяснил, но вопрос уже исчерпан :laugh: ...
а если h1 будет внутри параграфа :blink:

что такое em ?...это некие условные единицы, с помощью которых высчитываются размеры
а вот как их высчитывают...

html {font-size:100.01%}

body {font-size: 62.5%}

вот такая конструкция говорит следущее : <html> имеет размер 100%, что соответствует примерно 16px, а <body> соответственно имеет 62.5% - это около 10px
а вот теперь можно высчитать размеры заголовков - h1 {font-size:2.5em;} будет 2.5*10=25px, а h2 {font-size:1.875em;} - 19px...

теперь "подводные камни"
вот такая конструкция:

<h2><a href"#">Какой-то заголовок</a></h2>

и стили к ней:

h2 {font-size: 2em}
h2 a {font-size: 1.5em}

в пикселях мы получим h2 = 20px; h2 a=30px; потому, что размер шрифта высчитывается относительно родителя элемента
h2 = 2*10=20px h2 a = 1.5*20(!!!)=30px

Если пользователь в браузере изменит размер шрифта, то изначальный em для body будет уже не 10 рх.

И если шрифт будет установлен пользователем крупнее, то дизайн может развалиться. h34r:

 

[BaNru]

а если h1 будет внутри параграфа :blink:

То это будет говнокод :biggrin:

 

[motek]

а если h1 будет внутри параграфа :blink:

То это будет говнокод :biggrin:

хорошо h2

 

[BaNru]

А что меняется?

 

[tigra60]

Браузер, увидав H1, сразу отметит конец параграфа. Так что физически заголовок в параграфе получить не удастся.

 

[BaNru]

а вот как их высчитывают...

html {font-size:100.01%}
body {font-size: 62.5%}

вот такая конструкция говорит следущее

Кстати, тоже зачетный говнокод.
Зачем в HTML и BODY разные размеры?
Ты что, 100% будешь писать заголовки в браузере? :biggrin:

 

[tigra60]

Та нифига!
Не говнокод это, а общепринятое начало файла typography.css
Здесь учтено сразу несколько факторов, о которых писано-переписано.
И не надо искать в этих двух строках какой-то скрытый смысл - это эмпирически подобранная формула, здорово облегчающая работу с относительными размерами шрифтов элементов (в em).

И смысл здесь примерно такой же, как и при применении reset.css от Эрика Мейера - не пользоваться ни одним из стилей по умолчанию для элементов. Иначе, рано или поздно, вылезет жопа.

 

[vla]

Про вложенность элементов есть в теме Блок внутри ссылки. Здесь немного другая темаю.

[member=motek], твой вопрос понял, его немного перефразирую:

<body>
 <div style="font-size:1em;">
  <h1 style="font-size:2em;">Заголовок</h1>
  <p style="font-size:1.5em;">Абзац <span style="font-size:0.5em;">Строка</span></p>
 </div>
<body>

В зависимости от настроек компьютера/браузера, например:

Если шрифт по умолчанию 16px:
Заголовок будет 32px
Абзац 24px
Строка 12px

Если число пикселей дробное - браузер округлит, т.е. 16px и 15.5px - один размер

 

[motek]

а вот как их высчитывают...

html {font-size:100.01%}
body {font-size: 62.5%}

вот такая конструкция говорит следущее

Кстати, тоже зачетный говнокод.
Зачем в HTML и BODY разные размеры?
Ты что, 100% будешь писать заголовки в браузере? :biggrin:

я когда первый раз увидел такую конструкцию, спросил -а почему 100.01% ?...

вот такая конструкция:

body {font-size:100%;}

дает команду браузеру использовать размер шрифта установленный пользователем по умолчанию

а вот такая конструкция:

html {font-size:100.01%}
body {font-size: 62.5%}

говорит, что первый дочерний элемент бади будет иметь размер em*10 - что существенно облегчает расчеты размеров любой вложенности элементов

 

[tigra60]

Давайте подытожим, правда не в том порядке, как были заданы вопросы:

1. Пункты - pt - это единицы кегля (размера) шрифта, применяемые в полиграфии. Пункт равен 1/72 дюйма (примерно 0,38 мм). Естественно, эта единица воспроизводима на экране с таким же "успехом", как и другие размеры в сантиметрах, дюймах и проч.
Отсюда вывод - пункты однозначно отбрасываем.

2. Пиксели - px - это истинно экранная единица измерения. Единственная абсолютная. Если размер указан 20 рх, то это будет именно 20 пикселей и воспроизведено будет точно на всех экранах с точечным формированием изображения. (Если есть другие - скажите мне, пожалуйста)

3. Ширина большой английской литеры M - em - это относительная единица измерения шрифта. То есть, 1 em или 2 em или 2.4 em имеют смысл только в том случае, если элемент уже имеет какой-то размер шрифта в пикселях (прямо указанный и наследуемый от родителя). По умолчанию, большинство браузеров устанавливают для документа размер шрифта 16 пикселей. Это и будет 1 em для всех html элементов, которым непосредственно не указан другой размер.
Почему 16 пикселей? Наверное, потому, что 16 px = 12 pt. А 12 пунктов - стандартный размер шрифта при печати. Атавизм!

4. Проценты - это то же самое, что em, только цифры в 100 раз больше.

Итак, что мы имеем?
Шрифт по умолчанию в16 рх ужасен. Гораздо лучше - 12 рх (по некоторым данным - 13рх).
Поэтому самый простой способ (назовем его "план А") - указать для BODY font-size:12px. И таким же образом поступать со всеми остальными элементами (заголовки и пр.)
Однако, при таком способе очень сложно пропорционально увеличить или уменьшить размеры шрифтов элементов на всей странице.
Поэтому есть второй способ (пусть он будет "план Б") - когда для BODY задается размер шрифта 12 рх , а для остальных элементов - в em.
Однако, этот способ плох тем, что не учитывает предпочтения пользователя. А вдруг он плохо видит и установил у себя крупный шрифт? наш сайт просто проигнорирует эти установки. Говорят, что в США владелец такого сайта может и под суд угодить (информация не проверенная). Поэтому и указывается размер шрифта для HTML 100% (100.01% с учетом хака), при этом 1 em становится равным 16 px, а затем - для BODY 75%, при этом 1em будет уже равен 12 px.
Главный недостаток этого способа - трудность перевода пикселей в em. Действительно, если нам нужен заголовок в 30 px, а у нас 1 em = 12 px, то сколько em нам нужно указать? Без em калькулятора сложновато.
Поэтому используется маленькая хитрость - для BODY задается 1 em = 10 px, а это как раз те 62,5 %.
Но тут есть еще один подводный камень. Если у нас шрифт указан относительно (em и %), а размеры блоков - в пикселях, то возможна поломка дизайна в том случае, если у пользователя установлен крупный шрифт. Заметили, что в переводных статьях большинсвыо размеров блоков указаны в em? Вот это по той самой причине. Так что, если у вас блоки в пикселях, то для вас - план Б

Надеюсь, теперь все стало на свои места?

 

[vla]

Спасибо [member=tigra60], за подведенный итог! Полностью согласен со всеми пунктами!

Но, Координально не согласен с абзацами после пунктов!!!

Нафига тогда вообще em, если изначально сбиты настройки (body{font-size:20px})? Пользователю без разницы где em а где px, он видит результат, а результат - фиксированный шрифт! Если ваша цель фиксированный шрифт - используйте пиксели - никаких хаков (100,01%...) не надо!

Действительно, если нам нужен заголовок в 30 px, а у нас 1 em = 12 px, то сколько em нам нужно указать? Без em калькулятора сложновато.

Если надо сделать только заголовок (логотип, меню... итд) в 30px - так и сделайте!: h2{font-size:30px;}!

Отсюда вывод - пункты однозначно отбрасываем.

Никогда не использовал, но интуитивно догадывался, что плохой вариант. Щас немного изучил - полностью согласен!

 

[BaNru]

Ширина большой английской литеры M

Тигра, все таки это "высота шрифта элемента"

И повторю мной сказанные слова еще раз цитатами

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

Т.е. рекомендация для браузеров - шрифт по умолчанию желать в 16px.
1em = 100% = 16px
Но если у пользователя, например того же осла, стоит крупный шрифт, то следовательно у него будут другие размеры.

Поэтому использовать пиксели в шрифтах вообще не рекомендуется.
Сам где-то писал про пользователей с ограниченными возможностями. И сам тут же противоречишь.
А еще ведь есть и мобилы, где шрифт по умолчанию равен 5-10px.

Так что использовать пиксели - это издевательство над пользователем.

А про хаки - надо их потестить. Обязательно на днях сделаю тест на беременность браузеров и выложу результаты, но мне кажется это глупые хаки.
+ я уже привел выше рекомендацию W3C с w3schools.

 

[tigra60]

Что это? Или я так пишу, или вы так читаете?

Во-первых,

Тигра, все таки это "высота шрифта элемента"

Эм (Em)

Единица, выражающая ширину самой широкой литеры (знака) того или иного кегля и гарнитуры наборного (монотипного) шрифта. Делится на 18 равных частей, называемых монотипными единицами. В долях Эм выражаются значения кернинга, трекинга, выключки.
Матчасть учите!

Во-вторых, как ни укажи размер шрифта, он все равно будет в пикселях. Разница в том, прямо ли указывается значение или относительно унаследованного.

И где я себе противоречу?
Если указываешь размер шрифта в относительных единицах, то указывай все размеры блоков в тех же единицах, иначе возможен излом верстки.
Если лень пересчитывать пиксели в em, то и размер шрифта указывай в пикселях. А пользователь может изменить масштаб всей страницы (это в разы проще, чем сменить шрифт, поэтому я и не вижу смысла в этом em-ном холиваре)

Если надо сделать только заголовок (логотип, меню... итд) в 30px - так и сделайте!: h2{font-size:30px;}!

А прочесть внимательно то, что я написал не бывет? Приведен был характерный недостаток такого подхода:

при таком способе очень сложно пропорционально увеличить или уменьшить размеры шрифтов элементов на всей странице

Весь этот сыр-бор с em ради того, чтобы все шрифты на странице были указаны в едином порядке относительно какого-то начального значения.

 

[vla]

продолжу мысль:

Но если у пользователя, например того же осла, стоит крупный шрифт, то следовательно у него будут другие размеры.

и следовательно он к этим размерам привык!!! А привычка - тоже фактор!

Поэтому использовать пиксели в шрифтах вообще не рекомендуется.

Это дело каждого дизайнера/программиста. Тут однозначно выбрать лучшее нельзя...

А еще ведь есть и мобилы, где шрифт по умолчанию равен 5-10px.

Также: планшеты, ipod, нетбук и другая портативная техника с нестандартным экраном!
Из собственного опыта (мобила, планшет) скажу: в зависимости от аппарата необходимо настраивать браузер!

и еще:

Но тут есть еще один подводный камень. Если у нас шрифт указан относительно (em и %), а размеры блоков - в пикселях, то возможна поломка дизайна в том случае, если у пользователя установлен крупный шрифт.

Этим и отличается WEB-верстка от верстки журнала PlayBoy!
Я тоже "За правильные сайты" (правдо херовато получается пока )!!! Также я "За гибкие сайты!" Резиновая сетка, альтернативная верстка для Mobile, JS-для гибкости контента итд

 

[BaNru]

Эм (Em) Единица, выражающая ширину самой широкой литеры (знака) того или иного кегля и гарнитуры наборного (монотипного) шрифта. Делится на 18 равных частей, называемых монотипными единицами. В долях Эм выражаются значения кернинга, трекинга, выключки. Матчасть учите!

Так все таки что это?
Я так же всегда считал. И об этом писал.
Но htmlbook говорит иначе. (спасибо vla)

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

Сам где-то писал про пользователей с ограниченными возможностями. И сам тут же противоречишь. А еще ведь есть и мобилы, где шрифт по умолчанию равен 5-10px.

В том, что ты не можешь знать как удобно пользователю. Увеличивать только шрифт или всю страницу. Особенно учитывая то, что в осле увеличивается шрифт. А почти все программы для людей с ограничениями построены на базе осла.

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

Это дело каждого дизайнера/программиста. Тут однозначно выбрать лучшее нельзя...

Есть рекомендации и советы бывалых. Я уже устал это говорить в разной форме.

 

[vla]

Есть рекомендации и советы бывалых. Я уже устал это говорить в разной форме.

[member=BaNru], я внимательно понял эту мысль))) Но свободу выбора никто не отменял! Если дизайнер считает, что его офигеннейшая задумка рушится без применения к шрифту пикселей - по пусть будут пиксели! Надо только здраво оценить: стоит ли оно того.
И, в конце концов, эту тему я создал для сравнения и понимания каждого способа! (Иначе заголовок темы был бы такой - "Какой шрифт мне выбрать для моего говносайта").
Немного философии: если все эти способы имеют место быть - значит они все уникальны и полезны. Иначе естественный отбор их бы давно уничтожил, как теги <center>,<font>...
[member=BaNru], мы с тобой в итоге склоняемся к свободе шрифта, [member=tigra60], на другой стороне! Для меня осталось понять его выбор, тк он полюбому не начинающий программист и его решение осознанно...

Так все таки что это? Я так же всегда считал. И об этом писал. Но htmlbook говорит иначе. (спасибо vla)

Я замечал, что есть разница в пикселях на экране между размером шрифта (font:1em и размером для блока (width:1em. Может поэтому и получились неясности?
PS: не уверен на 100% в своих словах... Надо проверить...