Урок 2. Расчет шрифта. Панель управления тегами


Содержание материала:

Заказать звонок

Как создавать списки в HTML знают почти все. Это просто.Для маркированного списка используются теги .

Gogetlinks 10 лет. Компания празднует первый юбилей и объявляет конкурс на тему «Я люблю .

Хорошо известно, что Google использует более 200 сигналов ранжирования. Кроме того, каждый год он .

Не так давно, 31 августа, специалисты рoскомнадзора провели рабочую встречу с представителями .

Есть такая, часто возникающая, задача — сравнить два файла по содержимому. Зачем? Ну, к примеру, .

То, что в Интернете можно зарабатывать неплохие деньги знают все. Но вот как это сделать, для .

Если посмотреть на списки на этом сайте, можно увидеть, что маркер у элементов списка выглядит как .

Урок 2. Заголовки, абзацы, работа со шрифтами

Давайте посмотрим на два фрагмента текста:

HTML – это язык разметки гипертекста ( Hyper Text Markup Language ).

Теги — это определенные последовательности символов, заключенные между знаками (больше), задающие правила вывода на экран текстов, графики, звука.

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

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

Поэтому сегодня мы и разберем, как нужно оформлять текст на веб-страничке.

Для начала вспомним русский язык. У любого связного рассказа должно быть название (заголовок), а сам текст должен быть разбит на абзацы.

Теги для создания заголовков.

В HTML-документе поддерживаются заголовки шести уровней при помощи тега

В качестве n следует использовать одну из цифр 1-6, обозначающую уровень.

Самый крупный заголовок – первого уровня (Н1), самый мелкий – шестого (Н6).

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

Вот пример применения данного тега:

Заголовок первого уровня

Заголовок первого уровня

Заголовок третьего уровня

Заголовок третьего уровня

Заголовок шестого уровня

Заголовок шестого уровня

Да, кстати, иногда теги употребляются не просто так, а с атрибутами.

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

Заголовок по центру

Заголовок справа

Заголовок слева

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

Абзацы

Для разделения документа на отдельные логические части и улучшения читаемости текста используется разбиение текста на абзацы.

Для разбивки текста на абзацы используется тег

Текст абзаца также можно выровнять с помощью атрибута align:

— по правому краю,

Работа со шрифтами

Гарнитура — это особенности оформления и начертания шрифта.

с «засечками»,
«рубленные»,
«рукописные».

Обычный текст лучше читается, если выбран шрифт с «засечками» (Times, Courier).
В одной и той же гарнитуре существуют несколько начертаний – обычный шрифт, курсив, полужирный курсив.
Размер шрифта определяется в «пунктах» (1 pt = 0,353 мм). Для отображения основного текста лучше всего подходит шрифт размером 12 Pt.

Упражнение

Откройте Блокнот и наберите в нем следующий фрагмент кода:

Как установить шрифт

  1. Чтобы установить шрифт, прежде всего необходимо его приобрести, или же загрузить бесплатный (существует множество сайтов, где можно скачать бесплатные шрифты, например http://www.xfont.ru/). Если файл шрифта упакован в zip, его следует извлечь прежде, чем приступать к следующему шагу.
  2. Откройте Панель управления и найдите среди значков папку Шрифты. Именно она используется в качестве хранилища шрифтов, доступного всем программам, запущенным в операционной системе.
  3. Выберите пункт «установить шрифт» в меню Файл, или щелкните по файлу шрифта правой кнопкой мыши и выберите «установить», или просто перетащите файл шрифта в папку Шрифты.

Шрифт установлен и готов к использованию в приложениях.

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

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

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

HTML-теги для текста: выравнивание, размер, шрифт

Казалось бы, зачем знать HTML-теги для текста, если сейчас почти в любой админке есть удобный визуальный редактор, который выставляет их автоматически?

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

HTML-теги и атрибуты: основы синтаксиса

У любого текста есть скрытый код, который «объясняет» компьютеру, что и как нужно отобразить на экране. Вся информация записывается с помощью набора универсальных элементов.

По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:

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

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

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

  1. “Прогнать” статью через «Блокнот» и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
  2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
  3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

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

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег

всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег «Выравнивание текста» уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

В некоторых ситуациях для выравнивания используют другие теги HTML. Текст по центру, например, можно расположить с помощью элемента . . Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.

Заголовки и подзаголовки

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

В HTML используются шесть уровней подзаголовков — от

. В этой системе существует чёткая иерархия:

. Как правило, он содержит главный ключевик.

с названиями разных моделей.

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

Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как

. А тем более использовать для однородных по смыслу блоков подзаголовки разных уровней (допустим, выделить ноутбук, занявший последнее место в рейтинге, с помощью

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев

,которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный


    .

или нумерованный

    .

.

Все элементы находятся между открывающим и закрывающим тегами. Каждый пункт списка начинается с новой строки и имеет формат
. . Количество элементов не ограничено.

Выбор шрифта: и его атрибуты

Что можно изменить, используя этот HTML-тег? Размер текста, его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.

имеет несколько атрибутов:

  • Face. Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
  • Size. Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
  • Color. В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

. . Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

Многие путают теги и . Визуально разницы нет, но работают они по-разному. Первый просто меняет внешний вид текста, а второй выполняет функцию «указателя» и выделяет самые важные фрагменты (тематические ключевые слова и фразы для SEO).

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

. . Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

. . Интересный тег, который позволяет сделать часть текста зачёркнутой. Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.

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

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

. . Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

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

Смысловые контейнеры

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

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

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

Разделительная линия

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

C помощью атрибута WIDTH можно сделать разделитель короче, задав подходящий размер в пикселях или процентах от ширины окна.

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

HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

HTML шрифты: работаем со шрифтами в HTML

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

Что может делать HTML со шрифтами?

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

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

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

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

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

HTML тэги для работы со шрифтами

Сразу отметим, что HTML для работы со шрифтами предлагает нам использовать два тэга: тэг и тэг . Первый HTML тэг считается устаревшим и не рекомендован к использованию, так как в дальнейшем он будет удален из стандарта (уже удален и многие браузеры его не поддерживают). Также тэг относится к одиночным HTML тэгам. Когда браузер встречает он не создает HTML элемент, так как данный тэг служит для изменения характеристик шрифтов всей HTML страницы.

Второй тэг используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

HTML атрибуты для работы со шрифтами

Оба тэга для работы со шрифтами в HTML имеют одинаковый набор HTML атрибутов: для них доступны все универсальные HTML атрибуты и атрибуты событий. Также у этих тэгов есть три уникальных атрибута:

  1. Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
  2. Атрибут color. Изменяет цвет шрифта в HTML документе.
  3. Атрибут size. Позволяет изменить размер шрифта в документе.

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

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

Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

Работа с текстом в HTML (материал для начинающих). Урок 3

2013-06-09 / Вр:21:14 / просмотров: 20673

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

Основные теги для работы с текстом.

— этот тег предназначен для разбивки текста на параграфы в html документе.

Предлагаю посмотреть пример :

Вот результат примера .

Атрибуты в HTML.

Что такое «тег», вы уже знаете, а вот что такое «атрибуты в html» сейчас узнаете.
Итак.

Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:

align=»center» > здесь текст

P – это тег параграфа.
align=»center» – это атрибут к тегу

с дополнительным правилом.

Я думаю, вы поняли, что такое атрибуты в html.

Атрибуты «H1, H2, H3, H4, H5, H6»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

align: center | left (по умолчанию) | right

Атрибуты «p»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align» .

align: center | justify | left | right

Итог .
Давайте объединим все примеры вместе и посмотрим результат:

Дополнительные теги для работы с текстом.

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

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

Предлагаю посмотреть пример :

Атрибуты «font»

font: SIZE | COLOR | FACE

SIZE – размер текста. Значение задается от 1 до 7. Также можно задавать значения в большую или меньшую сторону с помощью символов « + » и « — ».
COLOR – цвет текста.
FACE – шрифт текста.

Предлагаю посмотреть пример :

Атрибуты «HR»

HR: width | size | align | noshade | color

WIDTH – длина линии. Задается размер в (px / %).
SIZE – толщина линии (px).
ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть необходимые значения:
left – выравнивание документа по левому краю.
right – выравнивание документа по правому краю.
center – выравнивание документа по центру (используется по умолчанию).
NOSHADE –закраска линии как сплошной.
COLOR – цвет линии (работает только в Internet Explorer).

Теперь объединим эти примеры вместе и посмотрим результат:

Руководство по размерам шрифта в дизайне интерфейсов

Чаще всего начинающие дизайнеры интерфейса задают мне следующий вопрос: Какой размер шрифта я должен использовать для своего проекта? Иногда они спрашивают о веб-сайте, иногда об Android-приложении, иногда о проекте на iPhone / iPad. Material Design дает хорошие рекомендации, но они на 50 страниц. iOS … ну, у них нет хороших рекомендаций! А по веб-дизайну все еще хуже. Может быть, внезапно появится какая-нибудь статья, которая рассказывает вам, какие размеры шрифта использовать на основе темной магии с золотым сечением. Да ладно, люди.

Три разных платформы, три разных набора проблем и два противоположных языка дизайна?

Вы когда-нибудь хотели, чтобы кто-то скомпилировал все правила в одном месте?

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

  1. Платформы: рекомендации для различных типов платформ, а именно:
    • iPhone
    • iPad
    • Material Design — Mobile
    • Material Design — Web
    • Web — Mobile
    • Web — Desktop
  2. Принципы: более общие правила при выборе размеров шрифтов
  3. Ресурсы: список полезных сайтов по типографике

Примечание по терминологии

Распространение HD экранов вызвало абсолютный хаос в терминологии дизайна. «Пиксель» теперь означает примерно 3 разных вещи. Если не указано иное, я всегда буду «говорить @ 1x», т. е. я буду говорить о размерах шрифтов, используя число, которое вы указали в поле «Размер шрифта» в Sketch / Figma и т. д. В iOS это называется «pt» (читается: «point», означает «точка»). В Android это называется «sp» (читается: «sip», означает «масштабируемый пиксель»). В Интернете это называется «px» (читается: … погодите, вы ведь знаете это, верно?)

iPhone

Проектируете приложения для iPhone и не уверенны, какие размеры шрифта использовать? Вот краткое резюме размеров шрифтов, предполагающее, что (а) вы используете шрифт Apple по умолчанию San Francisco (или аналогичный) и (b) вы хотите соответствовать стилю iOS:

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

Заголовки

В iOS 10 есть несколько больших по размеру, но коротких заголовков, таких как «Inbox» ниже — в размере 34pt. Это самый большой текст, который вы увидите на iPhone.

Но при скроллинге, заголовки уменьшаются до 17pt — размер по умолчанию для текстовых действий.

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

Вид списка

Списки — это хлеб и масло мобильных приложений. Вы никогда не знаете, сколько вещей на самом деле будет в списке, пока вы не начнете показывать их на вытянутом тонком экране. Давайте посмотрим на следующее.

В представлении списка — в этом конкретном примере с электронными письмами — iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр — как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

На странице настроек сами параметры записываются в текстовом стиле по умолчанию, хотя заголовки разделов (например, «AirDrop») меньше (ничего себе!). Но заметьте, что, хотя, заголовок меньше, это более толстый шрифт, а значит вы все равно можете распознать его как заголовок. Опять же: ненавязчиво.

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

Элементы управления

Давайте быстро рассмотрим несколько элементов управления.

Теперь это должно казаться довольно понятным. Единственный сюрприз — сегментированная кнопка размером 13pt (кажется слишком маленькой). Мне кажется, поскольку Apple знала, что некоторые из этих кнопок имеют множество опций, поэтому они просто сделали меньший размер текста для элемента управления по умолчанию, даже если есть только два варианта.

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

Модальные окна

Это маленькое всплывающее окно является наглядным примером того, как Apple создает дизайн текста.

  • Заголовок имеет размер по умолчанию. Вы можете подумать, что этого, будет недостаточно, но что мы видели раньше? Тяжелый вес шрифта, чтобы компенсировать его размер.
  • Пояснительный текст — 13pt. Я бы подумал, что это будет 15pt, как основной текст электронной почты, но, возможно, они просто хотели, чтобы он уместился в одну строку?
  • Ввод пароля составляет 13pt, что было бы слишком мало для обычного ввода текста, хотя, мне кажется, что вы увидите только кучу черных кружков, это не обязательно будет размер по умолчанию.
  • «ОК» и «Отмена» имеют размер по умолчанию, но поскольку кнопка «ОК» надеется, что вы ее нажмете, Apple привлекает к ней немного больше внимания, сделав ее толще.

Эти размеры шрифта следуют четкому шаблону, и они иллюстрируют несколько трюков со стилем текста, однако, есть некоторые странные несоответствия.

Панель действий

Наконец, у нас есть панель действий в нижней части экрана. Это самый маленький текст, который я мог найти во всем интерфейсе — 10pt. Я бы избегал использовать такой небольшой размер, насколько это возможно.

iPad

На момент написания этой статьи (весна 2020 года), iPad обычно имеет меньшую плотность пикселей, чем iPhone. Это означает, что элемент будет немного больше на iPad. Из-за этого подавляющее большинство размеров шрифтов остаются неизменными для iPhone и iPad. Поэтому, если вы разрабатываете приложение для iPad, начните с чтения раздела по iPhone выше.

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

Поэтому, хотя, некоторые приложения по-прежнему используют заголовки 17pt в стиле iPhone…

На iPad они больше.

В нескольких нативных приложениях используется самый полужирный вес шрифта SF — тяжелый. На мой взгляд, это настоящая «iPad-версия» полужирных заголовков на iPhone, но Apple странно непоследовательна в ее использовании.

Выше я также указываю неправильную нижнюю панель вкладок приложения «Музыка» (с текстом 17pt). В большинстве нативных приложений для iPad сохраняется размер панели вкладок 10pt в стиле iPhone, но я думаю, что это лучший «перевод» дизайна на экран большего размера.

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

Примечания по шрифту SF

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

Apple хотела бы, чтобы вы соблюдали несколько дополнительных правил при использовании шрифта San Francisco

Во-первых, используйте SF Pro Display при размерах шрифта 20 или выше. Используйте SF Pro Text только для основного текста и меньше.

Во-вторых, Сан-Франциско спроектирован так, чтобы иметь различный интервал между символами при разных размерах шрифта. Поэтому, если вы хотите идеально подражать «iOS по умолчанию», у вас есть несколько вариантов:

  1. Ручная настройка интервала между символами в зависимости от размера шрифта в соответствии с приведенной ниже таблицей
  2. Используйте текстовые стили непосредственно из библиотеки Apple iOS UI Design Sketch (или Photoshop или XD)
  3. Используйте этот удобный Sketch плагин для автоматического выбора расстояния между символами шрифта SF, в зависимости от его размера.


Или просто игнорируйте тот факт, что Apple советует вам изменять расстояние между символами до сотых пикселей. Живи свободным или умри, мужик.

San Francisco — шрифт по умолчанию для iPhone и iPad. Поэтому, если вы используете его, лучше знать об этих ограничениях. Тем не менее, вы можете проектировать приложения iOS с любым шрифтом. Будьте осторожны, другие шрифты даже в том же размере могут оказаться крупнее или меньше, или менее разборчивыми.

Material Design Mobile

Итак, вы разрабатываете приложение в стиле Material Design и хотите узнать (примерно), какой размер шрифта использовать? Отлично. Вы пришли в нужное место.

Все размеры шрифта, перечисленные ниже, относятся к Roboto. Другие шрифты могут казаться большими или меньшими, даже с одинаковым размером. Единицы, которые я использую в этом разделе, являются «sp». Произносится как «sips», и обозначает масштабируемые пиксели. Но, как дизайнер, все, что вам нужно знать, это число, которое вы вводите в поле «размер шрифта», когда проектируете.

Теперь давайте рассмотрим элемент за элементом с (a) визуальными эффектами и (b) заметками о том, как Google ловко использует эти стили шрифтов. Без шуток, народ. Надеюсь, вы прочитаете этот раздел и подумаете: «Кто бы ни придумал размеры шрифта Material Design — это умный человек». Я так думаю.

Заголовки

Заголовки в мобильных приложениях Material Design составляют 20sp.

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

Размер основного текста в Material Design составляет 14sp. Вы должны расценивать это как нормальный размер шрифт, а все остальное в большинстве своем его вариации.

Например, в то время, как 14sp является размером текста по умолчанию, когда текст может быть довольно длинным. Однако, когда есть только небольшое модальное окно с небольшим количеством текста, это 16sp!

Обратите внимание, что этот текст немного легче, чтобы компенсировать увеличение размера шрифта. Это будет повторяющаяся тема в стилях Material Design.

Элементы списка

Многие простые списки будут показывать каждый элемент в размере 16sp.

Фактически, это размер «элемента списка» по умолчанию в Material Design.

Это было для меня неожиданностью — в конце концов, список простых предметов очень похож на основной текст. Почему он будет больше? Я думаю об этом так: важность на слово намного выше, чем у основного текста. Поэтому он должен быть больше.

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

Но более плотные списки, например, на боковых панелях, равны 14sp — и на один вес тяжелее, чтобы компенсировать (это немного похоже на более крупный размер шрифта модального окна, который легче, чтобы также компенсировать).

Элементы управления

Теперь давайте взглянем на кнопки и текст вводимых данных.

Единственным сюрпризом здесь, на мой взгляд, является то, что размер текста ввода 16sp. Почему не размер основного текста по умолчанию? Поскольку значение словабольше, чем у основного текста по умолчанию, и в отличие от кнопки (у которой естьтекст 14sp), странно делать текстовое поле со средним или полужирным шрифтом.

Для дополнительной информации ознакомьтесь с Material Design руководством по типографике от Google.

Material Design Desktop

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

Если вы разрабатываете приложение Material для больших экранов, вам также стоит ознакомиться с разделом Desktop web ниже.

Mobile Web

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

  • Используйте размер шрифта для текста ввода не менее16px Если вводимый текст имеет меньший размер шрифта, то iOS-браузеры будут увеличиваться в левой части ввода текста, часто затеняя правую сторону и заставляя пользователя вручную уменьшать масштаб после использования текстового поля.

Вот, что еще я могу сказать о размерах мобильных веб-шрифтов:

  • Используйте размер шрифта основного текста около16px. Вы хотите, чтобы текст основного текста на вашем телефоне (когда он находился на естественном расстоянии) был таким же читаемым, как текст в хорошо отпечатанной книге (которую держат на естественном — обычно чуть дальше — расстоянии)
  • Для вторичного текста, несущественных меток и подписей используйте размер поменьше — например, 13pxили 14px. Я не рекомендую уменьшать только на один размер шрифта, поскольку тогда слишком легко спутать его с обычным текстом. Когда текст менее важен, вы хотите его стилизовать так, чтобы четко понимать его меньшее значение.
  • Золотой стандарт — просматривать свои проекты на самом устройстве. Так как ощущение дизайна мобильного приложения на экране вашего ноутбука отличается от того, когда вы смотрите его на мобильном. Как начинающий дизайнер, я был потрясен почти каждый раз, когда открывал на смартфоне страницу, созданную на компьютере. Размер шрифта, расстояние … все отличалось. Поэтому используйте Sketch Mirrorили Figma Mirror или любое другое приложение, но просмотрите свои дизайны на устройстве.
  • Наконец, по любым другим вопросам, касающимся размеров шрифтов мобильного веб-сайта, см. рекомендации Material Design, которые являются ясными, последовательными и изобретательными (хотя и не краткими). Чем больше у меня опыта, тем больше я убежден, что даже несмотря на то, что у Apple есть дизайн авторитет, Google в настоящее время утерла им нос. Но не говорите снобам, что я так сказал.

Desktop Web

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

  1. Страницы, перегруженные текстом. Статьи, блоги, новости и т. д. Это страницы, на которых главная цель пользователя на странице — это прочитать. Взаимодействийочень мало, возможно, просто клик на несколько ссылок
  2. Страницы, перегруженные взаимодействиями. Приложения, которые включают в себя наведение курсора, нажатия, поиск элемента в списке или таблице, редактирование, печатание и т. д. На странице может быть много текста, но вы читаете его как книгу.

Вам нужен пример или два? Эта статья — страница, перегруженная текстом. Лента новостей в Facebook — это страница, перегруженная взаимодействиями. У каждой есть немного разные проблемы, поэтому я разберу их отдельно. Страница «О нас» сумасшедшего веб-приложения перегружена текстом. Страница «Контакты» в ванильном бложике перегружена взаимодействиями.

Страницы, перегруженные текстом

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

  • 16px— абсолютный минимум для страниц, перегруженных текстом.
  • 18px— лучший размер шрифта для начала. Вы не распечатываете документ Word с одним интервалом; вы пишите для людей, сидящих в нескольких футах от своих мониторов десятилетней давности.
  • 20px+— сначала может показаться неудобно большим, но всегда стоит попробовать его в дизайнерском приложении. Самый красивый перегруженный текстом сайт в Интернете — Medium.com, имеет размер текста статьи по умолчанию 21px.

Аналогично тому, что упоминал в разделе Mobile Web, здесь есть золотое правило: текст вашего веб-сайта (просматриваемый на обычном расстоянии от монитора) должен быть таким же читабельным, как хорошо сделанная книга (просматриваемая на обычном расстоянии удержания книги). Это на самом деле очень раздражающее и дурацкое упражнение, потому что вы должны закрыть один глаз и прищуриться на книгу, которую вы держите, как идиот. Но найдите приятное, уединенное место и проведите проверку на работоспособность: мой размер шрифта читабельный даже с расстояния в пару футов? Хорошо, вы поняли идею.

Страницы, перегруженные взаимодействиями

Теперь, для страниц с большим количеством взаимодействий, идеально подойдут малые размеры текста. Фактически, из-за объема данных, которые пользователь получает за раз, даже текст 18px неудобен. Посмотрите на свой (веб-) почтовый ящик, посмотрите на Twitter, посмотрите на любые приложения, которые вы используете. Для них возможность бегло просматривать текст важнее чтения. Посмотрите на приложения, которые показывают вам данные — вам будет трудно найти длинные абзацы текста 18px. Вместо этого 14px-16px является нормой. Но не будет только одного размера шрифта. Вероятно, будут меньшие размеры для менее важных вещей и более крупныеразмеры для более важных вещей (заголовки и подзаголовки, под-подзаголовки и т. д.). И все это будет смешано вместе в гигантской мешанине.

Теперь важная часть: для любой страницы с большим количеством взаимодействий размер шрифта будет УМЕНЬШАТЬСЯ от большего к меньшему, с уменьшением конкретных потребностей каждого фрагмента текста и взаимодействия между ними.

  • Названия событий — 12px среднего веса. Такой шрифт отсутствует в руководстве Material Design. Тем не менее, учитывая, что они должны соответствовать 7 столбцам на экране, который имеет ширину всего 1440px, а названия многих событий довольно короткие, это идеальный выбор размера шрифта. Если взять размер шрифта меньше, то пострадает удобочитаемость текста. Если взять размер шрифта больше, то слишком часто названия событий будут обрезаны. Дизайн — это компромиссы, малыш. Если вы не можете назвать компромисс, который делаете, вы, вероятно, делаете его не в том месте.
  • Время («12pm», «1pm» и т. д.) Имеет размер шрифта: 10px. Это еще один стиль, полностью отсутствующий в руководстве Material Design. Тем не менее, горизонтальное пространство на вес золота. В любом случае каждое событие будет обозначаться временем начала. Почему бы не уменьшить метки слева?
  • Даты — 48px. Опять же, не нашел в руководстве Material Design. В этом случае, я не знаю, почему они не использовали 45px, что является официальным размером «Display 2». Я бы, вероятно, сделал 48px полужирным шрифтом, а здесь полужирный будет проблемой. Это привлекло бы слишком много внимания. Поэтому я бы изменил стиль в любом случае.

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

Принципы

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

Угловой размер

Как и многие другие аспекты дизайна интерфейса, что-то, что кажется случайным и субъективным (как размер шрифта), на самом деле зависит от удивительно разумного принципа: нам нравится читать абзацы, буквы которых имеют примерно одинаковый субъективный размер, а именно, что-то вроде 0,3 ° вверх от базового уровня до высоты прописных букв, в нашем поле зрения.

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

Это прекрасно в теории, но на практике невероятно сложно вычислить:

  • Не все смотрят на телефон или монитор с одинакового расстояния
  • Не все устройства имеют одинаковые размеры пикселей
  • Не все шрифты имеют такую ​​же читабельность — даже при том же размере шрифта, плотности пикселей и расстоянии просмотра!

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

Правило 1/16″

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

Размер шрифта (в дюймах) = 1/16″ x (количество футов между глазами пользователя и устройством)*

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

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

Соотношение пиксельной плотности и расстояния просмотра

В общем, чем меньше устройство, тем меньше пикселей *.

* Под «пикселем» я подразумеваю не физические пиксели, а концепцию, попеременно относящуюся к «CSS пикселям» (веб-сайт), «независимым от плотности пикселям» (Android) или «точкам» (iOS). В настоящее время большинство флагманских устройств имеют настолько небольшие физические пиксели, что они искусственно раздувают изображение в два раза (или три раза), как большое. Каждый «пиксель» на изображении фактически занимает 4 (или 9) физических пикселей. Таким образом, «физический пиксель» становится довольно бесполезным, как термин размера. Вместо этого у нас есть три термина: один из них — пережиток прошлого, когда все экраны были с низким разрешением (CSS-единица «пиксель»), второй — новое значение для старого печатного термина («точка») и последний — совершенно новая единица, чье определение связано с мудреной, неприятной детализацией, которая отличает ее от других единиц («независимый от плотности пиксель» или «dp»).

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

Это не конец света, так как мы держим телефоны ближе к своему лицу. Но если средний телефон в два раза ближе к нашим глазам по сравнению с монитором ПК, достаточно ли уменьшить плотность пикселей на мониторе компьютера, чтобы сделать шрифт рабочего стола вдвое больше? Короткий ответ: нет. Более развернутый ответ: типичный рабочий стол ПК имеет на 33% меньше пикселей, чем обычное мобильное устройство. Это означает, что не глупо делать любой текст на мониторе ПК примерно на 33% больше, чем его мобильный эквивалент, по крайней мере, на странице, оптимизированной для чтения длинной формы (А на других страницах? Посмотрите раздел Страницы, перегруженные взаимодействиями выше).

Это все. Просто еще одно золотое правило, которое следует учитывать при разработке гибких веб-сайтов.

Погружение в CSS: метрики шрифтов, line-height и vertical-align

line-height и vertical-align — это простые свойства CSS. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как их использовать. К сожалению, это не так — на самом деле они, пожалуй, являются самыми сложными свойствами, поскольку играют важную роль в создании малоизвестной особенности CSS под названием «строчный контекст форматирования» (inline formatting context).

Например, line-height можно задать в виде длины или безразмерного значения, но его значение по умолчанию — normal (стандартное). Хорошо, но что значит «стандартное»? Зачастую пишут, что это (как правило) 1, или, может быть, 1,2. Даже в спецификации CSS нет четкого ответа на данный вопрос.

Нам известно, что безразмерное значение line-height зависит от значения font-size , но проблема в том, что font-size: 100px выглядит по-разному для разных гарнитур. В связи с этим возникает вопрос: всегда ли line-height будет одинаковым или может различаться? Действительно ли это значение находится в промежутке от 1 до 1,2? А как vertical-align влияет на line-height ?

Давайте углубимся в не самый простой механизм CSS…

Начнем с разговора о font-size

Рассмотрим этот простой HTML-код с тегом p , содержащим три элемента span , каждый из которых со своим font-family :

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

Даже если нам известно об этой особенности, почему font-size: 100px не создает элементы высотой 100px? Я измерил эти значения: Helvetica — 115px, Gruppo — 97px и Catamaran — 164px.

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

  • Шрифт задает свой em-квадрат (em-square) (он же UPM, units per em — единиц на кегельную площадку) — своего рода площадку, в рамках которой будет рисоваться каждый символ. В этом квадрате для измерения используются относительные единицы, и, как правило, для него принимаются размеры 1000 единиц. Хотя также бывает 1024, 2048 или иное количество единиц.
  • В зависимости от количества относительных единиц задаются метрики шрифтов, такие как высота верхних и нижних выносных элементов (ascender/descender), прописных и строчных букв. Некоторые значения могут выходить за рамки em-квадрата.
  • В браузере относительные единицы масштабируются до необходимого font-size .

Возьмем шрифт Catamaran и откроем его в FontForge для получения метрик:

  • em-квадрат принят за 1000 единиц;
  • высота верхних выносных элементов составляет 1100 единиц, а нижних — 540.

После нескольких проверок выяснилось, что браузеры на Mac OS используют значения HHead Ascent/Descent, а на Windows — Win Ascent/Descent (эти значения могут различаться). Помимо этого, высота прописных букв Capital Height составляет 680 единиц, а строчных X height — 485.

Таким образом, шрифт Catamaran использует 1100 + 540 единиц в em-квадрате, состоящем из 1000 единиц, и поэтому при размере font-size: 100px получается высота 164px. Данная вычисленная высота определяет область содержимого (content-area) элемента (этот термин будет использоваться далее по тексту). Можете считать область содержимого областью, к которой применяется свойство background .

Можно также предположить, что высота прописных букв составляет 68px (680 единиц), а строчных (x-высота) — 49px (485 единиц). В результате 1ex = 49px и 1em = 100px, а не 164px (к счастью, em зависит от font-size , а не от вычисленной высоты).

Прежде чем нырнуть глубже, рассмотрим основные моменты, с которыми придется столкнуться. Элемент p при отображении на экране может состоять из нескольких строк с соответствующей шириной. Каждая строка состоит из одного или нескольких строчных элементов (inline elements)(HTML-тегов или анонимных строчных элементов для текстового содержимого) и называется контейнером строки (line-box). Высота контейнера строки зависит от высот его дочерних элементов. То есть браузер вычисляет высоту каждого строчного элемента, а по ней — высоту контейнера строки (от самой верхней до самой нижней точки ее дочерних элементов). В результате высоты контейнера строки всегда достаточно, чтобы вместить все его дочерние элементы (по умолчанию).

Каждый HTML-элемент на самом деле представляет собой стопку контейнеров строки. Если вам известна высота всех контейнеров строки, то известна и высота элемента.

При изменении приведенного выше HTML-кода следующим образом:

будет сгенерировано три контейнера строки:

  • в первом и последнем будет по одному анонимному строчному элементу (текстовое содержимое);
  • во втором будет два анонимных строчных элемента и 3 элемента span .

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

Сложным моментом в создании контейнера строки является то, что мы, по сути, не можем ни увидеть, ни управлять им через CSS. Даже применение фона к ::first-line не помогает отобразить высоту первого контейнера строки.

line-height: о проблемах и прочих вопросах

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

Даже если это может показаться странным, у строчного элемента есть две различных высоты: высота области содержимого и высота виртуальной области (virtual-area) (я сам придумал термин «виртуальная область», поскольку эту высоту мы увидеть не можем; в спецификации этого термина вы не найдете).

  • Высота области содержимого определяется метриками шрифта (как мы уже видели ранее).
  • Высота виртуальной области (virtual-area) представляет собой line-height , и это — высота, которая используется для вычисления высоты контейнера строки.

Кроме того, сказанное опровергает распространенное мнение о том, что line-height — это расстояние между базовыми линиями (baseline). В CSS это не так.

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

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

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

Есть и другие виды строчных элементов:

  • замещаемые строчные элементы ( img , input , svg и т. д.);
  • inline-block и все элементы типа inline-* ;
  • строчные элементы, которые задействованы в особом контексте форматирования (например, в элементе flexbox все flex-компоненты блокофицируются).

Для таких особых строчных элементов высота рассчитывается на основе их свойств height , margin и border . Если для height указано значение auto , то применяется line-height , и высота области содержимого равна line-height .

И все же проблема остается прежней: каково значение normal для line-height ? Ответ на этот вопрос, как и в случае вычисления области содержимого, нужно искать среди метрик шрифта. Итак, вернемся к FontForge. Размер em-квадрата для Catamaran равняется 1000, но мы наблюдаем много значений для верхних и нижних выносных элементов:

  • Общие значения Ascent/Descent: высота верхнего выносного элемента — 770, нижнего — 230. Используются для создания символов (таблица «OS/2»).
  • Метрики Ascent/Descent: высота верхнего выносного элемента — 1100, нижнего — 540. Используются для определения высоты области содержимого (таблицы «hhea» и «OS/2»).
  • Метрика Line Gap (междустрочный интервал). Используется для определения line-height: normal , данное значение прибавляется к метрикам Ascent/Descent (таблица «hhea»).

В нашем случае шрифт Catamaran определяет, что междустрочный интервал равен 0 единиц, и, таким образом, line-height: normal будет равняться области содержимого, которая составляет 1640 единиц или 1,64.

В качестве сравнения: для шрифта Arial em-квадрат равен 2048 единиц, высота верхнего выносного элемента — 1854, нижнего — 434, междустрочный интервал — 67. Таким образом, при font-size: 100px область содержимого составит 112px (1117 единиц), а значение line-height: norma l — 115px (1150 единиц или 1,15). Все эти метрики индивидуальны для каждого шрифта и задаются дизайнером шрифта.

Следовательно, задавать line-height: 1 неэффективно. Напомню вам, что безразмерные значения зависят от font-size , а не от области содержимого, а то, что размер области содержимого превышает размер виртуальной области, является причиной множества наших проблем.

Но причина не только в line-height: 1 . Если уж на то пошло, из 1117 шрифтов, установленных на моем компьютере (да, я установил все шрифты из Google Web Fonts), у 1059 шрифтов, то есть в 95%, вычисленный показатель line-height больше 1. Вообще, их вычисленный показатель line-height варьируется от 0,618 до 3,378. (Вам не показалось — 3,378!)

Небольшие подробности по поводу расчета line-box :

  • Для строчных элементов — padding и border увеличивают область фона, но не высоту области содержимого (и не высоту контейнера строки). Поэтому область содержимого — это не всегда то, что видно на экране. От margin-top и margin-bottom нет никакого эффекта.
  • Для замещаемых строчных элементов, элементов типа inline-block и блокофицированных строчных элементов — padding , margin и border увеличивают height и, следовательно, высоту области содержимого и контейнера строки.

vertical-align: то свойство, которое управляет всем

Я еще не останавливался подробно на свойстве vertical-align, хотя оно является основным фактором для вычисления высоты контейнера строки. Можно даже сказать, что vertical-align может играть ведущую роль в строчном контексте форматирования.

Его значение по умолчанию — baseline . Помните такие метрики шрифта, как высота верхнего и нижнего выносных элементов (ascender/descender)? Эти значения определяют, где находится базовая линия и, следовательно, соотношение между верхней и нижней частями. Поскольку соотношение между верхним и нижним выносными элементами редко бывает 50/50, это может приводить к неожиданным результатам, например с элементами того же уровня.

Начнем с такого кода:

Тег p с двумя одноуровневыми элементами span , наследующими font-family , font-size и фиксированную line-height . Базовые линии совпадают, и высота контейнера строки равна их line-height .

Но что, если у второго элемента font-size будет меньше?

Как бы странно это ни звучало, выравнивание базовой линии, выставленной по умолчанию, может привести к увеличению высоты (!) контейнера строки, как показано на рисунке ниже. Напоминаю, что высота контейнера строки рассчитывается от самой верхней до самой нижней точки его дочерних элементов.

Это могло бы стать доводом в пользу безразмерных значений line-height , но иногда требуются фиксированные значения для создания идеального вертикального ритма. Честно говоря, независимо от того, что вы выберете, у вас всегда будут проблемы с выравниванием строки.

Рассмотрим еще один пример. Тег p с line-height: 200px , который содержит один единственный span , наследующий его line-height

Какова высота контейнера строки? Мы могли бы предположить, что 200px, но это не так. Проблема в том, что у p есть свое собственное, отличающееся значение font-family (по умолчанию это serif). Базовые линии тега p и span , по всей вероятности, находятся на разной высоте, и поэтому высота контейнера строки больше, чем предполагалось. Это вызвано тем, что браузеры производят вычисление, считая, что каждый контейнер строки начинается с символа нулевой ширины, который в спецификации называется «strut».

Невидимый символ с видимым эффектом.

Итак, у нас все та же проблема, что и в случае с одноуровневыми элементами.

С выравниванием по базовой линии все плохо, но, может, нас спасет vertical-align: middle ? Как сказано в спецификации, middle «выравнивает контейнер по вертикальной средней точке (midpoint) с базовой линией родительского контейнера плюс половина x-высоты первичного элемента». Соотношение базовых линий, равно как и x-высот (x-height), может быть различным, поэтому на выравнивание по middle тоже нельзя положиться. А хуже всего тот факт, что в большинстве сценариев middle никогда не бывает по-настоящему «по центру». На это влияет слишком много факторов, которые нельзя задать через CSS (x-высота, соотношение верхнего и нижнего выносных элементов и др.).

Помимо этого, есть еще четыре значения, которые в некоторых случаях могут оказаться полезными:

  • vertical-align: top / bottom — выравнивание по верхней или нижней границе контейнера строки;
  • vertical-align: text-top / text-bottom — выравнивание по верхней или нижней границе области содержимого.

Но будьте внимательны: во всех случаях выравнивается виртуальная область, то есть невидимая высота. Рассмотрим простой пример с использованием vertical-align: top . Невидимая line-height может давать странный, но ожидаемый результат.

И наконец, vertical-align также принимает числовые значения, которые смещают контейнер выше или ниже относительно базовой линии. Этот последний вариант может пригодиться.

CSS восхитителен

Мы обсудили вопрос взаимодействия line-height и vertical-align , но сейчас вопрос в том, можно ли управлять метриками шрифта через CSS? Если кратко, то нет. Хотя я бы этого очень хотел. В любом случае, думаю, настало время немного развлечься. Метрики шрифта являются постоянными величинами, поэтому хоть что-то у нас должно получиться.

Что, если, например, нам нужен текст шрифтом Catamaran с высотой прописных букв ровно 100px? Вроде выполнимо, так что давайте произведем некоторые расчеты.

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

Довольно просто, не так ли? Но как быть, если нам нужно, чтобы текст был визуально по центру, а оставшееся пространство равномерно распределялось сверху и снизу от буквы «B»? Для этого необходимо рассчитать vertical-align на основании соотношения между верхним и нижним выносными элементами.

Сначала вычислим line-height: normal и высоту области содержимого:

Затем нам потребуются:

  • расстояние от низа прописной буквы до нижнего края;
  • расстояние от верха прописной буквы до верхнего края.

Примерно так:

Теперь можем вычислить vertical-align как разницу между этими расстояниями, умноженную на вычисленное значение font-size (Это значение нужно применить к строчному дочернему элементу).

И наконец, задаем необходимое значение line-height и вычисляем его, сохраняя вертикальное выравнивание:

Теперь довольно просто добавить графический элемент той же высоты, что и буква «B»:

Напоминаю, что этот тест показан исключительно для демонстрации, и полагаться на его результаты не стоит. Причин тут много:

  • Если метрики шрифта непостоянны, то расчеты в браузере постоянными не будут. ¯(ツ)/¯
  • Если шрифт не загрузился, то метрики резервного шрифта, по всей вероятности, будут другими, и работать со множеством значений быстро станет невозможно.

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

Что мы выяснили:

  • Строчный (inline) контекст форматирования действительно сложен для понимания.
  • У всех строчных элементов есть две высоты:
    • высота области содержимого (которая зависит от метрик шрифта);
    • высота виртуальной области ( line-height );
    • ни одну из них совершенно точно нельзя визуализировать (разве что вы занимаетесь инструментальными средствами разработки и решили исправить этот недочет, — тогда было бы просто чудесно).

  • line-height: normal зависит от метрик шрифта.
  • из-за line-height: n виртуальная область может стать меньше области содержимого.
  • на vertical-align особо полагаться не стоит.
  • высота контейнера строки вычисляется при помощи свойств line-height и vertical-align его дочерних элементов.
  • Мы не можем просто получить или задать метрики шрифта через CSS.

Как в html задать шрифт: множество фишек и примеров, чтобы сделать ваш сайт удобочитаемым

Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.

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

Шрифты бывают разные

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

Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.

Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.

HTML – это язык разметки гипертекста (Hyper Text Markup Language). Теги — это определенные последовательности символов, заключенные между знаками (больше), задающие правила вывода на экран текстов, графики, звука.
Измерение Обозначение
px В пикселах
pt В пунктах
% В процентах
ex Высота конкретного символа
em Высота текущего символа

Начнем с языка html и его «творческих способностей»

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

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

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

Чтобы закрепить полученные знания, я приведу пример кода, в котором использую перечисленные элементы html.

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

Название первого заголовка

П одзаголовок с красной буквы!

Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.

Навигационные панели с помощью CSS

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

Создание навигации

Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:

Изначально, без стилей наша навигация выглядит, как обычный список:

Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:

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

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

Вертикальное меню

Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.

Блочные ссылки

Прежде всего нужно сделать все теги блочными элементами:

Существует несколько причин для этого:

    Вы сможете задавать отступы для ссылок.

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

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

  • Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.
  • Ширина меню

    Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu , например:

    Разделение пунктов

    Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu :

    Высота пунктов и вертикальное выравнивание

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

    Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.

    Горизонтальное меню

    Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.

    Способ первый

    Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block :

    После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:

    Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
    . Эти промежутки можно убрать, записав HTML-код списка в одной строке:

    Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right :

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

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

    Способ второй

    Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float . Для этого добавьте стиль для тегов
    :

    Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,

    ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:

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

    Примечание: если вы установите фон для элемента .menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?

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

    Как организовать правильное подключение шрифтов?

    Всё время пользовался сервисов Google Fonts для подключение шрифтов (встраивая код подключения шрифта в head). Сейчас столкнулся с тем, что есть шрифты, которых нет в Google Fonts, но их можно найти на других веб-сервисах (чтобы подключить шрифт).

    Вопрос, как лучше подключать шрифты:
    1. Через @font-face (загружая в папку с сайтом все шрифты в нужных форматах и т.д.) в css
    2. Или использовать метод добавления в head ссылок для подключения шрифтов?

    • Вопрос задан более трёх лет назад
    • 1575 просмотров

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

    Можно еще заниматься всяким непотребством, хранить шрифты в локальном хранилище, кодировать в Base64 и всякое такое.

    Олег, подниму старую тему . меня интересует, если подключать шрифты отдельным файлом CSS, перед основным файлом стилей в head:

    Так не быстрее будет работать? или это одно и тоже, если бы подключить в основном файле стилей в самом начале?

    Топ-пост этого месяца:  Создание естественно адаптивной сетки CSS Grid с помощью функций min, max и clamp
    Добавить комментарий