Таблицы стилей для веба Советы и хитрости по CSS
Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, напр. сантиметр ( cm ) и дюйм ( in ), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях ( margin: 5px ) также допускает и значения в дюймах или сантиметрах ( margin: 1.2in; margin: 0.5cm ), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc
Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt
↓
Так называемые абсолютные единицы ( cm , mm , in , pt и pc ) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.
В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения.
CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.
Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em .
Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.
Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a , c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em ) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.
Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.
Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.
Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.
На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).
CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.
Используйте em или px для шрифтов
Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .
Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:
0.5pt, 1px, 1pt, 1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).
Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.
div.mybox < border: 2px solid >@media (min-resolution: 2dppx) < /* Media with 2 or more dots per px */ div.mybox < border: 1.5px solid >>
Новые единицы измерения в CSS
Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:
p < margin-left: 1em >h1
p < margin-left: 1rem >h1
Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49
Преобразовать Пункты в сантиметр (Пункты в см):
С помощью этого калькулятора можно ввести значение для конвертации вместе с исходной единицей измерения, например, ‘105 Пункты’. При этом можно использовать либо полное название единицы измерения, либо ее аббревиатуру. После ввода единицы измерения, которую требуется преобразовать, калькулятор определяет ее категорию, в данном случае ‘Размер шрифта (CSS)’. После этого он преобразует введенное значение во все соответствующие единицы измерения, которые ему известны. В списке результатов вы, несомненно, найдете нужное вам преобразованное значение. Как вариант, преобразуемое значение можно ввести следующим образом: ’82 Пункты в см‘ или ’23 Пункты сколько см‘ или ’74 Пункты -> сантиметр‘ или ’46 Пункты = см‘ или ’59 Пункты в сантиметр‘ или ’46 Пункты сколько сантиметр‘. В этом случае калькулятор также сразу поймет, в какую единицу измерения нужно преобразовать исходное значение. Независимо от того, какой из этих вариантов используется, исключается необходимость сложного поиска нужного значения в длинных списках выбора с бесчисленными категориями и бесчисленным количеством поддерживаемых единиц измерения. Все это за нас делает калькулятор, который справляется со своей задачей за доли секунды.
Кроме того, калькулятор позволяет использовать математические формулы. В результате, во внимание принимаются не только числа, такие как ‘(16 * 33) Пункты’. Можно даже использовать несколько единиц измерения непосредственно в поле конверсии. Например, такое сочетание может выглядеть следующим образом: ‘105 Пункты + 315 сантиметр’ или ’83mm x 17cm x 90dm = ? cm^3′. Объединенные таким образом единицы измерения, естественно, должны соответствовать друг другу и иметь смысл в заданной комбинации.
Если поставить флажок рядом с опцией ‘Числа в научной записи’, то ответ будет представлен в виде экспоненциальной функции. Например, 2,313 778 991 290 3 × 10 30 . В этой форме представление числа разделяется на экспоненту, здесь 30, и фактическое число, здесь 2,313 778 991 290 3. В устройствах, которые обладают ограниченными возможностями отображения чисел (например, карманные калькуляторы), также используется способ записи чисел 2,313 778 991 290 3E+30. В частности, он упрощает просмотр очень больших и очень маленьких чисел. Если в этой ячейке не установлен флажок, то результат отображается с использованием обычного способа записи чисел. В приведенном выше примере он будет выглядеть следующим образом: 2 313 778 991 290 300 000 000 000 000 000. Независимо от представления результата, максимальная точность этого калькулятора равна 14 знакам после запятой. Такой точности должно хватить для большинства целей.
Единицы измерения: px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
- Главное достоинство пикселя – чёткость и понятность
Недостатки
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Давно на свалке: mm , cm , pt , pc
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
Почему в сантиметре cm содержится ровно 38 пикселей?
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
Страусы Живут также в Африке 24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.
А вот аналогичный пример с em вместо px :
Страусы Живут также в Африке Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое размер шрифта?
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
Единицы ex и ch
В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Проценты % , как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с % , он выглядит в точности так же, как с em :
Страусы Живут также в Африке В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.
Единица rem: смесь px и em
Итак, мы рассмотрели:
- px – абсолютные, чёткие, понятные, не зависящие ни от чего.
- em – относительно размера шрифта.
- % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и % .
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .
Вроде бы, использовать можно, однако есть проблема.
Протестируем на таком списке:
Конвертер величин
Перевести единицы: пункт (компьютерный) в сантиметр [см]
1 пункт (компьютерный) = 0,035277777777778 сантиметр [см]
Исходная величина
Преобразованная величина
Длина волны и частота
Подробнее о единицах, используемых в типографике и для обработки цифровых изображений
Общие сведения
Шрифты с засечками и без них
Типографика изучает воспроизведение текста на странице и использование его размера, гарнитуры, цвета и других внешних признаков для того, чтобы текст лучше читался и красиво выглядел. Типографика появилась в середине 15-го века, с появлением печатных станков. Расположение текста на странице влияет на наше восприятие — чем лучше его расположить, тем больше вероятность, что читатель поймет и запомнит то, что написано в тексте. Некачественная типографика, наоборот, делает текст плохо читаемым.
Гарнитуры подразделяют на разные виды, например на шрифты с засечками и без. Засечки — декоративный элемент шрифта, но в некоторых случаях они облегчают чтение текста, хотя иногда происходит и наоборот. Первая буква (голубого цвета) на изображении набрана шрифтом с засечками Бодони. Одна из четырех засечек обведена красным цветом. Вторая буква (желтая) — набрана шрифтом Футура без засечек.
Существует множество классификаций шрифтов, например, согласно времени их создания, или стилю, популярному в определенное время. Так, есть шрифты старого стиля — группа, которая включает самые старые шрифты; более новые шрифты переходного стиля; современные шрифты, созданные после переходных шрифтов и до 1820-х годов; и, наконец, шрифты нового стиля или модернизированные старые шрифты, то есть, шрифты, выполненные по старому образцу в более позднее время. Эта классификация в основном используется для шрифтов с засечками. Существуют и другие классификации, основанные на внешнем виде шрифтов, например на толщине линий, контрасте между тонкими и толстыми линиями, и форме засечек. В отечественной печати существуют свои классификации. Например, классификация по ГОСТу группирует шрифты по наличию и отсутствию засечек, утолщению в засечках, плавному переходу от основной линии к засечке, закруглению засечки, и так далее. В классификациях русских, а также других кириллических шрифтов часто бывает категория для старославянских шрифтов.
Скриншот программы для верстки Adobe InDesign компании Adobe Systems.
Главная задача типографики — регулируя размер букв и выбирая подходящие шрифты, разместить текст на странице так, чтобы он хорошо читался и красиво выглядел. Существует ряд систем для определения размера шрифта. В некоторых случаях, одинаковый размер букв в типографских единицах, если они отпечатаны в разных гарнитурах, не означает одинаковый размер самих букв в сантиметрах или дюймах. Эта ситуация более подробно описана ниже. Несмотря на вызванные этим неудобства, применяемый на данный момент размер шрифта помогает дизайнерам аккуратно и красиво скомпоновать текст на странице. Это особенно важно в верстке.
В верстке необходимо знать не только размер текста, но и высоту и ширину цифровых изображений, чтобы разместить их на странице. Размер можно выразить в сантиметрах или дюймах, но существует также специально предназначенная для измерения размера изображений единица — пиксели. Пиксель — это элемент изображения в виде точки (или квадрата), из которых оно состоит.
Определение единиц
Размер букв в типографике обозначается словом «кегль». Существует несколько систем измерения кегля, но большинство из них основано на единице «пайка» в американской и английской системе измерения (англ. pica), или «цицеро» в европейской системе измерения. Название «пайка» иногда пишут как «пика». Существуют несколько видов пайки, которые слегка отличаются по величине, поэтому, используя пайку, стоит помнить, какая именно пайка имеется в виду. Изначально в отечественной печати использовали цицеро, но сейчас часто встречается и пайка. Цицеро и компьютерная пайка похожи по величине, но не равны. Иногда цицеро или пайку напрямую используют для измерения, например, чтобы определить размер полей или колонок. Чаще, особенно для измерения текста, используют производные единицы, полученные от пайки, такие как типографские пункты. Размер пайки определяется в разных системах по-разному, как описано ниже.
Буквы измеряют так, как показано на иллюстрации:
Измерение высоты буквы. 1. высота верхнего заплечика, 2. базовая линия строчных знаков, 3. линия шрифта или базовая линия, 4. высота нижнего заплечика, 5. высота знака, 6. высота литерной площадки
- линия верхних выносных элементов: линия, отмечающая верхнюю часть самой высокой буквы, включая верхние выносные элементы (например, верхний хвостик буквы «б»);
- базовая линия строчных знаков: верх основной части буквы, без выносного элемента, который продолжается до линии верхних выносных элементов;
- линия шрифта или базовая линия: низ основной части буквы, без выносного элемента, который продолжается до линии нижних выносных элементов;
- линия нижных выносных элементов: самая низкая часть самой длинной (вниз) буквы, включая нижней выносной элемент (например, нижний хвостик буквы «у»);
- высота знака: высота буквы без учета выносных элементов. В американской типографской системе эту высоту приравнивают к высоте английской буквы x;
- высота литерной площадки: исторически — размер площадки свинцовой литеры, которую использовали для печати этой буквы.
Высота печати — пример высоты литерной площадки
Чаще всего размер шрифта определяется в типографских пунктах. Например, большая часть научных статей, а также писем и документов в деловой переписке, выполнена в размере от 10 до 12 пунктов. Один пункт равен 1/12 пайки, или 1/12 цицеро, в зависимости от системы счисления. Размер буквы в пунктах, и соответствующий ему размер в миллиметрах или дюймах соответствует высоте литерной площадки (номер 6 на иллюстрации выше). Раньше, когда набор текста происходил вручную, для каждой буквы использовали свинцовую литеру, похожую на современные печати. Представьте себе печать с одной буквой, например M, как на изображении. Размер в пунктах — это высота этой печати. В веб-дизайне, особенно в CSS и LaTeX иногда используют не высоту литерной площадки, а высоту знака.
Для измерения размера цифровых изображений используют пиксели, описанные ниже.
Разные способы вычисления значений типографских единиц
В разных системах типографских единиц пайки, и, соответственно, пункты, определяются по-разному. Это произошло потому, что технологии печати развивались в каждой стране по-разному. Типографские единицы основаны на местных единицах длины, а так как они различны (даже дюймов до недавнего времени использовалось несколько), то и размер пайки не одинаков и не полностью соответствует размеру цицеро, хотя и очень к нему близок. Сегодня во многих странах наиболее широко используется компьютерная пайка. Эта величина была введена специально для обеспечения единого стандарта типографских единиц.
Компьютерная пайка
Компьютерная пайка равна 1/6 дюйма или 4,23 миллиметра. Компьютерный типографский пункт соответственно равен 1/72 дюйма или 0.35 миллиметра. Их широко используют в формате PostScript и для измерения текста, изображенного на экране компьютерного монитора. Также эта величина часто применяется в печати на принтерах в домашних условиях.
Иногда в веб-дизайне используют пункты, величина которых основана на величине компьютерной пайки, описанной выше. Иногда размеры пункта и пайки определяют относительно размера пикселя, установленного для конкретного веб-сайта. Такие пиксели называются относительными.
Относительные пиксели
Стандартный размер пикселей заменяется на относительные пиксели в том случае, если страница предназначена для просмотра на устройствах с нестандартным размером экрана, или для тех устройств, на которые смотрят с нестандартного расстояния. Например, размер экрана многих смартфонов рассчитан на то, чтобы на него смотрели с расстояния примерно 25 сантиметров (10 дюймов), но если появится новый телефон с экраном стандартного размера, но предназначенный для просмотра с расстояния вдвое меньше (13 сантиметров или 5 дюймов), то относительный пиксель также должен быть в два раза меньшего размера. Иначе изображение будет нечетким и пользователю будут видны точки, из которых состоит рисунок.
Угол зрения
Производители экранов заметили взаимосвязь между размером экрана, расстоянием между экраном и глазом, размером пикселя, и относительным размером точки. Понятия «угол зрения» и «пиксели на градус» помогают наглядно понять эту взаимосвязь.
Пример использования величин: пиксели на градус (точки на отрезках E и F) и угол зрения (угол A)
Величина пиксели на градус — общее число пикселей на экране на один градус зрительного угла по отношению к расстоянию от глаза до экрана. На рисунке желтый угол D равен одному градусу (на самом деле он больше одного градуса, так как иначе трудно было бы увидеть, что изображено на рисунке). Пиксели на градус — число точек на красном отрезке E или на красном отрезке F. В нашем случае точки на градус равны 3-м точкам, как видно на изображении (здесь 2 серых и одна темно-серая точка на каждом из экранов). Производители дисплеев определяют количество точек на градус так, чтобы точки были достаточно малы и сливались в один рисунок. Обычно эта величина намного выше, чем на нашей иллюстрации. Так, например, компания Apple утверждает, что они используют как минимум 53,53 точки на градус, а иногда и до 79.
Зная количество точек на градус, можно легко вычислить размер одной точки, используя расстояние от глаза до экрана и угол зрения в градусах. В нашем примере расстояние до первого экрана — 10 дюймов, а до второго — 20. Первое расстояние — среднее расстояние, от глаз до экрана смартфона, а второе — расстояние до экрана монитора компьютера. Угол зрения — это угол, для которого длина отрезка, который он покрывает на экране, равно одному пикселю (это расстояние на иллюстрации — зеленые отрезки B и C). Угол зрения на иллюстрации обозначен оранжевым цветом. Используя понятия угла зрения и точек на градус, можно вычислить размер пикселя как для обычных, так и для нестандартных дисплеев.
О том, как использовать эти понятия на практике можно подробнее узнать на сайте W3C.
Другие единицы
Хотя компьютерная пайка постепенно вытесняет другие единицы, и возможно заменит более привычные цицеро, наряду с ней также используются другие единицы. Одна из таких единиц — американская пайка Она равна 0,166 дюйма или 2.9 миллиметра. Существует еще и типографская пайка. Она равна американской.
В некоторых отечественных типографиях и в литературе о печати до сих пор используют цицеро — единицу, которая широко применялась в Европе (за исключением Англии) до появления компьютерной пайки. Один цицеро равен 1/6 французского дюйма. Французский дюйм немного отличается от современного дюйма. В современных единицах один цицеро равен 4,512 миллиметра или 0,177 дюйма. Эта величина почти равна компьютерным пайкам. Один цицеро — это 1,06 компьютерных пайки.
Круглая шпация (em) и полукруглая шпация (en)
Описанные выше единицы определяют высоту букв, но существуют также единицы, обозначающие ширину букв и символов. Круглая и полукруглая шпации — как раз такие единицы. Первая также известна как кегельная шпация или em, от английского, обозначающего букву M. Ее ширина исторически равнялась ширине этой английской буквы. Аналогично, полукруглая шпация, равная половине круглой — известна под названием en. Сейчас эти величины не определяют с помощью буквы M, так как эта буква может иметь разный размер у разных шрифтов, даже если кегль одинаков.
В русском языке используются короткое и длинное тире. Для обозначения диапазонов и интервалов (например, во фразе: «возьмите 3–4 ложки сахара») используется короткое тире, называемее также тире-en (англ. en dash). Длинное тире используется в русском языке во всех остальных случаях (например, во фразе: «лето было коротким, а зима — длинной»). Оно называется также тире-em (англ. em dash).
Проблемы с современными системами единиц
Многим дизайнерам не нравится нынешняя система типографских единиц, основанная на пайках или цицеро, а также на типографских пунктах. Главная проблема в том, что эти единицы не привязаны к метрической или имперской системе мер, и в то же время их приходится использовать вместе с сантиметрами или дюймами, в которых измеряется размер иллюстраций.
Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная.
Кроме этого, буквы, выполненные в двух разных гарнитурах, могут сильно отличаться размером, даже если они одинакового размера в типографских пунктах. Это вызвано тем, что высота буквы измеряется как высота литерной площадки, которая не связана напрямую с высотой знака. Это затрудняет задачу дизайнеров, особенно если они работают с несколькими шрифтами в одном документе. На иллюстрации — пример этой проблемы. Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная. Некоторые дизайнеры для решения этой проблемы предлагают измерять кегль как высоту знака.