Указывать длину в 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 и т.д.

Наглядное пособие по написанию дипломной работы

Данное пособие рассказывает об оформлении диплома и ни коим образом не затрагивает темы , содержания и стиля написания вашей работы. При создании данного пособия использовались ГОСТы и методические указания СЗАГС.

Параметры страницы

Открываем на компьютере Microsoft Office Word и первое, что делаем, устанавливаем параметры страницы.

Рис. 1 Параметры страницы документа

Вот такие параметры и должны соблюдаться от первого до последнего листа диплома. И сразу совет: постарайтесь избежать вставки в диплом "альбомных" страниц. Лучше повернуть табличку или рисунок, чем переделывать поля, нумерацию страниц и т.д.

Текст работы

Основной текст:

шрифт Times New Roman,

размер 14 пт,

междустрочный интервал полуторный

начертание обычный

ФОРМАТ→ШРИФТ

Рис. 2 Выбор шрифта

Основной раздел, заголовки и подзаголовки:

шрифт Times New Roman,

размер 14 пт,

междустрочный интервал полуторный

начертание полужирный, полужирный курсив

только арабские цифры (1,2,3,4….)

Полужирный курсив можно использовать в подзаголовках второго или третьего уровня (а можно, и даже лучше, не использовать вовсе ).

Рис. 3 Пишем заголовки

Что значит ТРОЙНОЙ ИНТЕРВАЛ ???

Это не три пропущенные строки!

Тройной интервал можно выставить двумя способами:

ФОРМАТ→АБЗАЦ

Рис. 4 Первый способ

Косновным разделам относятся:

Введение

Г

Основной раздел ВСЕГДА начинаетсяС НОВОЙ СТРАНИЦЫ , причем только первая буква прописная (большая) остальные строчные.

лава 1 Про…

Глава 2 Ан….

Глава 3 Ки….

Заключение

Список литературы

Приложения

Подразделы нумеруются по своим главам. Например, в разделе Глава 1 могут быть подразделы 1.1 1.2 1.3 или даже 1.3.1 соответственно.

Если у вас в тексте встречаются списки, перечисления и т.д., то настоятельно НЕ РЕКОМЕНДУЕТСЯ использовать такую же нумерацию, как в подразделах глав. Для этого лучше использовать скобки 1) 2) или сделать маркированный список: ФОРМАТ→СПИСОК→МАРКИРОВАННЫЙ

Форматирование основного текста

Выделяем наш абзац, или несколько, если они не прерываются заголовками, таблицами, списками и т.д. Затем:

ФОРМАТ→АБЗАЦ

Рис. 6 Параметры абзаца

На что обращаем внимание:

основной текст должен быть выровнен по ширине;

отступ первой строки (красная строка) 1,25см ;

междустрочный интервал полуторный

В общем надо сделать так, как на рис. 6.

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

Рис. 7 Очистка формата

В связи с этим поступаем, как показано на рис. 7. Выделяем то, что мы вставили, кликаем мышкой на стиль (красная стрелка на рисунке) и выбираем "очистить формат" После этого форматируем текст в соответствии с требованиями.

Таблицы, рисунки и формулы

В вашей работе могут присутствовать рисунки, таблицы и формулы. Общие требования:

не должны выходить за параметры страницы;

размещение по центру;

сквозная нумерация (1;2; 3;….и т.д.) по всему тексту работы включая приложения;

при нумерации знак № не ставится;

после номера и названия точки не ставятся;

в ячейках таблиц междустрочный интервал шрифта ОДИНАРНЫЙ

Рис. 8 Порядок оформления таблиц

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

Формулы пишут в редакторе формул, по центру. Как правило, нумеруют основные формулы, на которые в работе есть ссылки. Номер у правого края страницы в круглых скобках.

(1)

Как установить у себя в Word редактор формул? Кликаем правой кнопкой мышки на значки вверху Word (панель инструментов) и в раскрывшемся окошке в самом низу выбираем НАСТРОЙКА. Затем КОМАНДЫ→ВСТАВКА →РЕДАКТОР ФОРМУЛ. Жмем левой кнопкой мыши и тащим этот редактор на панель инструментов (туда, где у нас много всяких значков).

Рис. 9 Настройка панели управления Word

Цитаты должны быть текстуально точными и заключены в кавычки 2 . Если в цитату берется часть текста, т.е. не с начала фразы или с пропусками внутри цитируемой части, то место пропуска обозначается отточиями (тремя точками). В тексте необходимо указать источник приводимых цитат. Как правило, ссылки на источник делаются под чертой, внизу страницы (сноска). Если мысль из какого-нибудь источника излагается своими словами, то сноска должна иметь вид: «См.:» («смотри»), а затем выходные данные произведения или документа. Если на ОДНОЙ странице работы повторно дается ссылка на один и тот же источник, то сноска должна иметь вид: «Там же. С. ». Возле цитаты в строке ставится цифра, по которой под чертой определяется принадлежность цитаты. Цитаты можно приводить только по источнику, ссылка на который обязательна.

Можно использовать и другой вариант оформления научного аппарата работы, не прибегая к подстрочным ссылкам. В этом случае достаточно указать в квадратных скобках порядковый номер источника в списке литературы и номер процитированной страницы. Например: . Так делается в случае дословного цитирования. Если же просто ссылаются на соответствующее место в источнике, то перед его номером ставится «См.:». Например: [См.: 11, 118].

В сносках:

шрифт Times New Roman,

размер 10 пт,

междустрочный интервал ОДИНАРНЫЙ

начертание обычный

Как правильно сделать оглавление?

Переходим в режим структуры документа ВИД→СТРУКТУРА

Находим наши главы разделы и подразделы и проставляем уровни

Возвращаемся обратно ВИД→РАЗМЕТКА СТРАНИЦЫ

и ставим курсор в точку, где должно быть наше оглавление

В открывшемся окошке выбираем вкладку оглавление, делаем так, как на рисунке и жмем ОК

шрифт Times New Roman,

размер 14 пт,

междустрочный интервал полуторный

начертание обычный

Г

1,25см

1,25см

лава 1 Основы демографической политики в развитии экономического потенциала Лилипутии

1

1,25см

.1 Главный город государства

1.1.1 Самый населенный район

По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов. По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов.

По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят:

• манлипят;

Его население составляет около 60 000 (шестидесяти тысяч) лилипутов. По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов. По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят 3 . «Его население составляет около 60 000 (шестидесяти тысяч) лилипутов» 4 . По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов. По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов.

1

1,25см

.1.2 Самый пустой район

По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов. По статистическим данным государственного комитета по статистике Лилипутии самым населенным районом является округ Лилипят. Его население составляет около 60 000 (шестидесяти тысяч) лилипутов.

1) лсптлвапвлвтлвтплов;

2) лсптлвапвлвтлвтплов;

3) лсптлвапвлвтлвтплов;

4) лсптлвапвлвтлвтплов.

2Там же. С …

3См.: Атаманчук, Г. В. Сущность государственной службы: История, теория, закон, практика / Г. В. Атаманчук. - М.: РАГС, 2003. – С.150.

4Атаманчук, Г. В. Сущность государственной службы: История, теория, закон, практика / Г. В. Атаманчук. - М.: РАГС, 2003. – С. 465.

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы

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

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевое свойство font-size ). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, мы работаем именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1em принимается размер шрифта его родителя.

ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em , а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

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

В примере 1 показано применение указанных единиц.

Пример 1. Использование относительных единиц

Размер 2 em

Размер 2 ex

Размер 30 пикселов

Размер 200%

Результат данного примера показан ниже (рис. 1).

Рис. 1. Размер текста при различных единицах

Абсолютные единицы

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 2 перечислены основные такие единицы.

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Многие люди привыкли задавать размер шрифта в текстовых редакторах, например, 12. А что это число означает, не понимают. Так это именно пункты и есть, они родные. Конечно они нам не родные, мы привыкли измерять все в миллиметрах и подобных единицах, но пункт, пожалуй, единственная величина из не метрической системы измерения, которая используется у нас повсеместно. И все благодаря текстовым редакторам и издательским системам. В примере 2 показано использование пунктов и других единиц.

Пример 2. Использование абсолютных единиц

Размер 0.5 дюйма

Размер 8 миллиметров

Размер 24 пункта

Результат использования абсолютных единиц измерения показан ниже (рис. 2).

Рис. 2. Размер текста при различных единицах

Конвертер длины и расстояния Конвертер массы Конвертер мер объема сыпучих продуктов и продуктов питания Конвертер площади Конвертер объема и единиц измерения в кулинарных рецептах Конвертер температуры Конвертер давления, механического напряжения, модуля Юнга Конвертер энергии и работы Конвертер мощности Конвертер силы Конвертер времени Конвертер линейной скорости Плоский угол Конвертер тепловой эффективности и топливной экономичности Конвертер чисел в различных системах счисления Конвертер единиц измерения количества информации Курсы валют Размеры женской одежды и обуви Размеры мужской одежды и обуви Конвертер угловой скорости и частоты вращения Конвертер ускорения Конвертер углового ускорения Конвертер плотности Конвертер удельного объема Конвертер момента инерции Конвертер момента силы Конвертер вращающего момента Конвертер удельной теплоты сгорания (по массе) Конвертер плотности энергии и удельной теплоты сгорания топлива (по объему) Конвертер разности температур Конвертер коэффициента теплового расширения Конвертер термического сопротивления Конвертер удельной теплопроводности Конвертер удельной теплоёмкости Конвертер энергетической экспозиции и мощности теплового излучения Конвертер плотности теплового потока Конвертер коэффициента теплоотдачи Конвертер объёмного расхода Конвертер массового расхода Конвертер молярного расхода Конвертер плотности потока массы Конвертер молярной концентрации Конвертер массовой концентрации в растворе Конвертер динамической (абсолютной) вязкости Конвертер кинематической вязкости Конвертер поверхностного натяжения Конвертер паропроницаемости Конвертер паропроницаемости и скорости переноса пара Конвертер уровня звука Конвертер чувствительности микрофонов Конвертер уровня звукового давления (SPL) Конвертер уровня звукового давления с возможностью выбора опорного давления Конвертер яркости Конвертер силы света Конвертер освещённости Конвертер разрешения в компьютерной графике Конвертер частоты и длины волны Оптическая сила в диоптриях и фокусное расстояние Оптическая сила в диоптриях и увеличение линзы (×) Конвертер электрического заряда Конвертер линейной плотности заряда Конвертер поверхностной плотности заряда Конвертер объемной плотности заряда Конвертер электрического тока Конвертер линейной плотности тока Конвертер поверхностной плотности тока Конвертер напряжённости электрического поля Конвертер электростатического потенциала и напряжения Конвертер электрического сопротивления Конвертер удельного электрического сопротивления Конвертер электрической проводимости Конвертер удельной электрической проводимости Электрическая емкость Конвертер индуктивности Конвертер Американского калибра проводов Уровни в dBm (дБм или дБмВт), dBV (дБВ), ваттах и др. единицах Конвертер магнитодвижущей силы Конвертер напряженности магнитного поля Конвертер магнитного потока Конвертер магнитной индукции Радиация. Конвертер мощности поглощенной дозы ионизирующего излучения Радиоактивность. Конвертер радиоактивного распада Радиация. Конвертер экспозиционной дозы Радиация. Конвертер поглощённой дозы Конвертер десятичных приставок Передача данных Конвертер единиц типографики и обработки изображений Конвертер единиц измерения объема лесоматериалов Вычисление молярной массы Периодическая система химических элементов Д. И. Менделеева

1 пункт (типографский) = 0,3514598035146 миллиметр [мм]

Исходная величина

Преобразованная величина

твип метр сантиметр миллиметр символ (X) символ (Y) пиксель (X) пиксель (Y) дюйм пайка (компьютер) пайка (типографская) пункт НИС/PostScript пункт (компьютерный) пункт (типографский) среднее тире цицеро длинное тире пункт Дидо

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

Общие сведения

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

Гарнитуры подразделяют на разные виды, например на шрифты с засечками и без. Засечки - декоративный элемент шрифта, но в некоторых случаях они облегчают чтение текста, хотя иногда происходит и наоборот. Первая буква (голубого цвета) на изображении набрана шрифтом с засечками Бодони. Одна из четырех засечек обведена красным цветом. Вторая буква (желтая) - набрана шрифтом Футура без засечек.

Существует множество классификаций шрифтов, например, согласно времени их создания, или стилю, популярному в определенное время. Так, есть шрифты старого стиля - группа, которая включает самые старые шрифты; более новые шрифты переходного стиля ; современные шрифты , созданные после переходных шрифтов и до 1820-х годов; и, наконец, шрифты нового стиля или модернизированные старые шрифты , то есть, шрифты, выполненные по старому образцу в более позднее время. Эта классификация в основном используется для шрифтов с засечками. Существуют и другие классификации, основанные на внешнем виде шрифтов, например на толщине линий, контрасте между тонкими и толстыми линиями, и форме засечек. В отечественной печати существуют свои классификации. Например, классификация по ГОСТу группирует шрифты по наличию и отсутствию засечек, утолщению в засечках, плавному переходу от основной линии к засечке, закруглению засечки, и так далее. В классификациях русских, а также других кириллических шрифтов часто бывает категория для старославянских шрифтов.

Главная задача типографики - регулируя размер букв и выбирая подходящие шрифты, разместить текст на странице так, чтобы он хорошо читался и красиво выглядел. Существует ряд систем для определения размера шрифта. В некоторых случаях, одинаковый размер букв в типографских единицах, если они отпечатаны в разных гарнитурах, не означает одинаковый размер самих букв в сантиметрах или дюймах. Эта ситуация более подробно описана ниже. Несмотря на вызванные этим неудобства, применяемый на данный момент размер шрифта помогает дизайнерам аккуратно и красиво скомпоновать текст на странице. Это особенно важно в верстке.

В верстке необходимо знать не только размер текста, но и высоту и ширину цифровых изображений, чтобы разместить их на странице. Размер можно выразить в сантиметрах или дюймах, но существует также специально предназначенная для измерения размера изображений единица - пиксели. Пиксель - это элемент изображения в виде точки (или квадрата), из которых оно состоит.

Определение единиц

Размер букв в типографике обозначается словом «кегль». Существует несколько систем измерения кегля, но большинство из них основано на единице «пайка» в американской и английской системе измерения (англ. pica), или «цицеро» в европейской системе измерения. Название «пайка» иногда пишут как «пика». Существуют несколько видов пайки, которые слегка отличаются по величине, поэтому, используя пайку, стоит помнить, какая именно пайка имеется в виду. Изначально в отечественной печати использовали цицеро, но сейчас часто встречается и пайка. Цицеро и компьютерная пайка похожи по величине, но не равны. Иногда цицеро или пайку напрямую используют для измерения, например, чтобы определить размер полей или колонок. Чаще, особенно для измерения текста, используют производные единицы, полученные от пайки, такие как типографские пункты. Размер пайки определяется в разных системах по-разному, как описано ниже.

Буквы измеряют так, как показано на иллюстрации:

Другие единицы

Хотя компьютерная пайка постепенно вытесняет другие единицы, и возможно заменит более привычные цицеро, наряду с ней также используются другие единицы. Одна из таких единиц - американская пайка Она равна 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).

Проблемы с современными системами единиц

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

Кроме этого, буквы, выполненные в двух разных гарнитурах, могут сильно отличаться размером, даже если они одинакового размера в типографских пунктах. Это вызвано тем, что высота буквы измеряется как высота литерной площадки, которая не связана напрямую с высотой знака. Это затрудняет задачу дизайнеров, особенно если они работают с несколькими шрифтами в одном документе. На иллюстрации - пример этой проблемы. Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная. Некоторые дизайнеры для решения этой проблемы предлагают измерять кегль как высоту знака.

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

Знакомьтесь - единицы

1. «Ems» (em): «em» - это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

Изменение Font-size от 100% до 120%.

Как вы можете видеть, «em» и "%" увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и "%" предпочтительнее в использовании для текста веб-документа.

«em» vs "%"

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и "%". В теории, единицы «em» и "%" являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c "%" на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).

Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и "%". Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем "%", а при установке «Largest» наоборот «em» отображается гораздо большим, чем "%". И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт

В теории, единицы «em» - это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в "%" позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

Победитель : процент (%).