Как задать нужный размер шрифта? Отзывчивый размер шрифта

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

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

Шрифт представляет собой набор характеристик символов в одной гарнитуре (однотипного начертания), такой, как Arial, Times New Roman или Courier. Знаковый состав большинства шрифтов включает в себя прописные и строчные буквы, цифры, знаки препинания, а также дополнительные символы из расширенного набора.

Размер (кегль) шрифта измеряется в пунктах :1 пункт равен 1/72 дюйма .

Чтобы выбрать необходимый размер шрифта, нужно:

В меню Формат выберите командуШрифт (рис. 10.8).

Установите необходимый шрифт, размер, цвет, стиль начертания.

Изменение цвета текста

Выделите текст, который требуется изменить, и выполните одно из следующих действий:

В рамке Видоизменение можно установить флажки:

з

Рис. 10.9.

двойное зачеркивание – зачеркивание текста двой­ной линией;

верхний индекс – размер символов умень­шается, текст располагается выше;

нижний индекс – размер символов умень­шается, текст располагается ниже;

с тенью – рядом с символами появляется тень;

контур – показывается только контур симво­лов;

приподнятый – символы изображаются при­под­нятыми над поверхностью листа;

утопленный – символы изображаются уто­п­ленными в поверхность листа;

малые прописные – строчные буквы становятся заглавными, но меньшего размера;

все прописные – строчные буквы становятся заглавными;

скрытый – делает текст непечатаемым.

В поле Образец показан фрагмент текста с выбранными параметрами.

Если необходимо изменить межзна­ко­вый интервал , нужно:

В меню Формат выбрать командуШрифт , а затем перейти на вкладкуИнтервал и выполнить одно из следующих действий (рис. 10.10):

Кернинг регулирует интервалы между отдельными парами букв. При выборе параметровРазреженный илиУплотненный между всеми буквами устанавливаются одинаковые интер­ва­лы.

Изменение масштаба документа

Бывает нужно уменьшить масштаб документа таким образом, чтобы он весь помещался на экране. В этом случае с документом можно работать как с листом бумаги. И наоборот, часто бывает нужно увеличить масштаб изображения, например, чтобы рассмотреть или отредактировать мелкие детали графического объекта. При изменении масштаба изменяется только представление документа на экране, а не размер текста и графики, используемый для вывода на печать.

Основной инструмент изменения масштаба документа – окно диалога Масштаб . Открыть его можно, выбрав в менюВид командуМасштаб (рис. 10.11). При использовании окна диалогаМасштаб имеется возможность устанавливать большее количество параметров масштабирования.

Если работа ведется в режиме разметки страницы, можно устанавливать переключатель в положение Целая страница илиНесколько страниц для уменьшения масштаба до значения, при котором на экране умещается требуемое количество страниц. При установке переключателя в положениеНесколько страниц следует выбрать количество страниц, щелкнув на соответствующей ячейке раскрывающейся палитры.

Примерно те же параметры масштабирования (но быстрее) можно задать и с помощью поля Масштаб на стандартной панели инструментов (рис. 10.12).

Комплект шрифта - это совокупность всех строчных и прописных букв, цифр и пунктуационных знаков, имеющих одинаковый размер и начертание (рис. 18.13). Шрифты могут быть прямыми и курсивными. К прямому шрифту относятся буквы прямой формы в отличие от курсивного шрифта, в котором буквы имеют наклонную форму. Латиница (Roman) обозначает группу шрифтов, имеющих засечки.

Семейства шрифтов объединяют два и более вида шрифтов, представляющих собой различные варианты шрифта, имеющие одинаковое начертание (рис. 18.14). Тем не менее каждый вид сохраняет неотъемлемые характеристики основной формы букв. Варианты могут включать курсив, узкий (thin), светлый, полужирный (semibold), жирный, средний (medium), узкий (condensed), широкий, контурный и другие виды шрифта. В некоторых семействах представлены только некоторые из этих вариантов, в то время как другие семейства предлагают больший

Рис. 18.13. Примеры двух вариантов начертания шрифта "Bookman", нормального и жирного

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

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

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

Пункт

Пункт (пт) используется для измерения размера шрифта (высоты букв). В одном дюйме (2,54 см) 72 пункта (0,351 мм). Полезно знать, что высота шрифта размером 36 пунктов составляет примерно полдюйма, а шрифта размером 18 пунктов - примерно 1/4 дюйма. На рис. 18.15 поясняются основные термины, используемые для обозначения высоты шрифта. Размер шрифта может составлять от 6 до 120 пунктов. Размер шрифта основного текста обычно находится в диапазоне от 6 до 14 пунктов. Для большинства изданий используются шрифты размером 9,10 или 11 пунктов. Шрифты, размер которых превышает 14 пунктов, называются выделительными шрифтами или шрифтами заголовка. Однако эти размеры - всего лишь условность: как правило, размер шрифта основного текста газетной рекламы составляет примерно 18 пунктов, кроме того, встречаются рекламные обращения, в которых размер заголовка примерно равен размеру основного текста. Рисунок 18.16 дает наглядное представление об основных размерах шрифта.

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

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

Что вообще такое этот «размер шрифта»?

Есть мнение, что под размером понимается величина самого большого символа указанного шрифта. Это не так. На самом деле величина встроена в шрифт, и померить ее вручную, линейкой, вряд ли получится. Обычно размер чуть больше, чем расстояние от верхней части самой большой буквы до нижней части самой маленькой. Это делается для того, чтобы в заданном пространстве поместилось любое сочетание символов. Также важно указывать параметр «размер строки» (line-height), иначе буквы p, q и им подобные могут выйти за пределы.

Пиксели

Самый распространенный вариант. Устанавливается следующим образом:

font-size: 16px;

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

К числу «пиксельных» можно отнести устаревшие единицы измерения. К ним относятся pc, cm, mm и pt. Так, mm - это миллиметр, cm - сантиметр. Pt и pc - типографский пункт и типографская пика. Почему эти способы устарели? Потому что они не были «самостоятельными» - браузер автоматически пересчитывал значения в пиксели. Соответственно, проблемы были такими же, как и в случае с px. Кстати, в одном cm с точки зрения браузера содержится 38px.

Em: величина зависит от размера шрифта родительского элемента

Все просто. Допустим, у вас есть div, для которого задан font-size 16px. В нем находится еще один div, для которого размер шрифта CSS установлен как 2em. Соответственно, 1em - это будет 16px (т. е. размер шрифта родительского элемента), а 2em - вдвое больше, т. е. 32px.

В родительском элементе можно также задавать величину в em. В таком случае она будет зависеть от базового размера, заданного в body или html. Em - это относительный размер шрифта CSS, который будет увеличиваться и уменьшаться вместе с величиной знаков родительского элемента. Это удобно - чтобы изменить величину в большом количестве мест, надо только поменять параметры родителя.

Для профессионалов: ex и ch

Практически не используются обычными верстальщиками и frontend-разработчиками. Ex - это величина символа «Х», а ch - символа «0». В выбранном шрифте может не иметься таких знаков, но параметры все же можно использовать. Доподлинно неизвестно, для каких случаев лучше всего подходят такие размеры. Попробуйте поэкспериментировать - может, вам так будет удобнее? Однако помните, что ex и ch являются «условными» единицами, так что точная настройка параметров будет затруднительной.

Проценты: самый запутанный вариант

Как задать размер шрифта в CSS в процентах? Казалось бы, все просто - нужно только указать желаемый параметр и поставить после него символ «%». Но тут в дело вступает важный вопрос: «Процентом от чего будет являться заданный размер?»

В большинстве случаев параметр высчитывается в зависимости от величины родителя, но не всегда. Если задать свойство margin-left, процент будет вычисляться в зависимости от ширины родительского блока. Если установить line-height, то процент будет браться в зависимости от текущего размера шрифта.

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

Rem: простая и универсальная единица

Выше перечислено множество способов настройки размеров шрифта в CSS, но ни один из них не является действительно удобным. Для упрощения работы был придуман параметр rem, который вычисляется в зависимости от заданной для тега html величины.

Это проще, чем кажется на первый взгляд. Например, для тега html, в который обернут весь контент страницы, вы задали в CSS font-size 16px. Соответственно, 1rem теперь будет являться 16px. 2rem - это 32px, и т. д. Можно использовать любые пропорции: 0,2rem, 1,1rem, 100rem… Браузер аккуратно пересчитает параметры.

В html можно вообще ничего не трогать, поскольку браузеры сами устанавливают для обертки определенный размер шрифта. Но для более тщательной настройки лучше все-таки переопределить показатель. Главное достоинство rem в том, что можно легко масштабировать шрифты в определенном месте, не влияя на другие элементы. Однако помните, что старые браузеры (IE ниже 9-й версии) не поддерживают этот показатель.

Vw и vh: экзотические параметры

Новейшие единицы измерения, созданные для мобильных устройств. Vw - это 1 % от ширины окна, на котором пользователь просматривает ваш сайт. Vh - 1 % от его высоты. Величина символов будет автоматически масштабироваться в зависимости от экрана устройства посетителя. Чтобы выбрать подходящий размер во время верстки, увеличивайте и уменьшайте размер экрана.

Подводим итоги

Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток - компоненты становятся менее модульными.

• если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
• в остальных случаях рекомендуется применять rem.

Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.

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

Использование в одном документе разного шрифтового оформления - самый распространенный прием форматирования. Средства шрифтового оформления применяются для следующих целей:

• Выделения текста для акцентирования отдельных фраз, слов, цитат и т. д.
• Оформления заголовков и подписей
• Набора специального текста (формул, индексов, примечаний).

Внешний вид текста зависит не только от выбранного шрифта, но и от его размера. Обычно размер шрифта измеряется в пунктах (1 пункт (пт) = 0,376 мм). В документах, как правило, применяется размер основного шрифта 10-12 пт, для заголовков размер увеличивается, для примечаний и ссылок уменьшается.

Эти операции реализуются с помощью команды Шрифт из меню Формат и задания соответствующих установок.

Х арактеристики символов:

шрифт (Arial, Times New Roman, Peterburg).

Размер (8,10,14).

Положение на строке (м 2, x i) .

Рис. 36. Закладка Интервал окна Шрифт

Таблица 6. Значения полей окна Шрифт (закладка Интервал)

Word позволяет отменить сделанные операции. Команда Отменить (Undo) в меню Правка (Edit) контекстно зависима; когда пользователь набирает или редактирует текст, будет предложена команда, соответствующая последней выполняемой операции.

На Стандартной панели для отмены последней команды следует нажать кнопку Отменить (Undo) или отменить несколько команд, выбрав их из списка.

Размер шрифта в CSS задается с помощью свойства font-size , например:

p {
font-size: 12px;
}

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

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

Рассмотрим применение каждого из них более подробно.

p {
font-size: 10pt;
}

Следует избегать использования пунктов и пик для оформления текста, предназначенного для отображения на экране. Эти единицы идеально подходят для задания размера шрифта для печати; измерение в пунктах пришло из полиграфии. Пункт составляет 1/72 часть дюйма, а пика – шестую часть дюйма. После печати текстовые документы, шрифт в которых задан в данных единицах, будут в точности соответствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата А4, так и на ватмане. Однако компьютеры не в состоянии отобразить физические размеры с такой точностью, и они пытаются угадать – причем не слишком успешно – размер пункта или пики, из-за чего под различными платформами один и тот же документ может отображаться по-разному.

Если вы пишете таблицу стилей для печати или же сам документ предназначен для печати, а не для просмотра с экрана, следует использовать пункты и пики. Однако базовое правило при дизайне страницы для отображения в веб-среде: избегайте их применения.

p {
font-size: 12px;
}

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

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

Em – относительная единица измерения размеров шрифта. Ее название пришло из области типографии, где оно соответствует размеру заглавной буквы М, которая, как правило, является самым широким символом шрифта. В CSS 1em соответствует размеру шрифта, используемому в системе пользователя по умолчанию, или размеру шрифта родительского элемента, если он отличается от используемого по умолчанию.

Если вы используете em (или другие относительные единицы) для задания размера всех шрифтов, пользователи смогут изменять размер символов текста в соответствии с настройками размера символов, установленными в их броузере. Для примера создадим описание стиля, задающее размер шрифта внутри элемента p равным 1em :

p {
font-size: 1em;
}

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

Значения в em можно задавать десятичными числами. К примеру, чтобы задать размер шрифта на 10 процентов меньше используемого по умолчанию (или размера шрифта родительского элемента), можно использовать следующее правило:

p {
font-size: 0.9em;
}

Чтобы текст стал на 10 процентов крупнее, чем при использовании значения по умолчанию или унаследованного значения, можно использовать следующее правило:

Еx – относительная единица измерения размеров, соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически, если присвоить свойству font-size абзаца значение 1ex , его заглавные буквы будут той же высоты, какую имела бы строчная буква x, если бы размер шрифта не был задан (при этом размер строчных букв рассчитывался бы относительно заглавных).

p {
font-size: 100%;
}

Как и в случае с em и ex , при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера, и пользователь сможет самостоятельно изменять размер шрифта. Значение 100% размера шрифта для элемента p соответствует размеру шрифта, заданному настройками по умолчанию (так же, как и при задании значения 1em ). При уменьшении процентного значения размер текста уменьшается:

p {
font-size: 90%;
}

При увеличении процентного значения размер текста увеличивается:

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

Ключевые слова с абсолютными значениями

В распоряжении веб-разработчика есть семь абсолютных ключевых слов CSS:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Значения этих ключевых слов определены одни относительно других, и разные броузеры интерпретируют их по-своему. Большинство броузеров отображают текст с размером medium аналогично тексту с настройками по умолчанию, а остальные ключевые слова изменяет размер текста относительно medium в соответствии с их названиями.

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

Ключевые слова с относительными значениями

При задании размера шрифта с помощью относительных ключевых слов – larger и smaller – он определяется по отношению к размеру, установленному для родительского элемента, подобно тому, как это происходит при использовании em и % . Таким образом, если размер элемента p задан с помощью абсолютного ключевого слова small , и вы хотите, чтобы выделенный фрагмент текста отображался более крупным шрифтом, можно использовать следующую таблицу стилей:

p {
font-size: small;
}
em {
font-size: larger;
}

Данная разметка будет отображена, поскольку текст между тегами и отображается более крупным шрифтом, чем текст родительского элемента p :

Пример:

В данном примере размер шрифта устанавливается в классе copy . Текст, заключенный в тег

, печатается с отступом 2em . Размер заголовка третьего уровня больше, чем размер основного текста, установленный браузером по умолчанию.

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES
ARE DISTRIBUTED IN A NETWORK ENVIRONMENT-ON A SERVER, AT
A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Результат:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT - ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.