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


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

WEB типографика: размер шрифтов в rem

Рассуждений про то, какие единицы измерения лучше использовать при задании размера шрифта в верстке, в сети очень много как на русском, так и на английском. Так что здесь я не буду оригинальной и опишу кратко свои поиски лучшей адаптивной (точнее отзывчивой) верстки (в данном случае речь конкретно о шрифтах и т.п.), также сохраню подготовленный мною Compass Framework mixin для конвертирования px в rem.

Отзывчивая верстка: em, rem или % ?

Иногда бывает, что макет нарисован на 1000px и выглядит вполне прилично. Но при верстке, как правило, ограничение на ширину контента больше (в зависимости от макета, конечно, но самые распространенные у меня ограничения 1440px, 1600px). И вот начинается огорчение: тексты смотрятся не на своем месте, отступы кажутся слишком маленькими на большом экране и так далее.

Самое очевидное решение – это сделать типографику тоже гибкой к разрешениям. Но как? Самые распространенные относительные единицы в верстке – это, пожалуй, em, % и rem. Есть еще так называемая “Viewport Sized Typography“. Но она не работает при ресайзе экрана и вообще в настоящий момент с некоторыми глюками ее поддерживают только самые новые браузеры (IE10+, Firefox 19 +, Safari 6+, Chrome 20+).

Итак, раньше я не знала о существовании rem. em мне казалось не удобно использовать из-за ее слишком “относительной относительности”: значение em зависит от размера родительского элемента. То есть если системный шрифт по умолчанию 16px, то 1em=16px. Но если у body, к примеру, размер 0.875 em (14 px), то у элемента внутри body с размером 1em размер шрифта будет уже 14px. В проекте чуть более среднем по сложности такая система измерений может вызвать массу трудностей и неявной логики.

Так что раньше в верстке я предпочитала комбинировать % и px. Для body font-size и line-height задавала какую-то фиксированную величину в px, которую можно было менять с помощью media queries. А уже для элементов текста задавала font-size и line-height в %. Этот метод я нахожу весьма рабочим, но не всегда удобным.

Относительная единица измерения rem очень похожа на em, но позиционируется она относительно root элемента документа, то есть относительно html. Соответственно, никакой путаницы не может возникнуть и можно переносить все размеры прямо из макета без особо сильных вычислений. При использовании CSS фрэймворка вообще все это можно делать в две строчки: первая в px для старых браузеров, вторая с функцией, вычисляющей rem. Чуть ниже я подробнее напишу про кроссбраузерность при использовании rem (ie8 и ниже не поддерживают rem единицы).

После некоторых колебаний и сомнений я все же решила переходить на rem.

Применение rem на практике: размеры шрифтов, высота строк, отступы

Как уже сказано мною ранее, rem считается относительно корневого элемента (html). Это очень удобно и просто контролировать весь процесс верстки в целом.

Нужно сначала определить font-size для html:

Свойство font-size

Свойство font-size позволяет указывать размер текста CSS . Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em , rem и ex .

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

Значения длины ( px , em , rem , ex и т. д. ), используемые в свойстве font-size , не могут быть отрицательными.

Абсолютные ключи и значения

Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:

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

Среди других абсолютных значений можно выделить mm ( миллиметры ), cm ( сантиметры ), in ( дюймы ), pt ( пункты ) и pc ( пики ). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

Относительные ключевые обозначения

  • larger ;
  • smaller .

Например, если свойство font-size у родительского элемента имеет значение small , то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

Процентные обозначения

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо .

Единица измерения em

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

В приведенном выше примере у абзаца будет установлено значение font-size 16p x, так как 1 x 16 = 16px , а в качестве размера текста HTML CSS заголовка будет использоваться 32px , так как 2 x 16 = 32px . Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Единица измерения rem

Что касается единиц измерения rem , то здесь font-size всегда зависит от значения корневого элемента ( или элемента html ).

В приведенном выше примере rem равен 16px ( так как это значение наследуется у html -элемента ) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
Работает Работает Работает Работает 10+ Работает Работает

Единица измерения ex

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px , а все остальные размеры определяются высотой x определенного шрифта.

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS .

Единицы изменения viewport (окно просмотра)

Viewport-единицы , такие как vw и vh , позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

  • 1vw = 1% от ширины окна просмотра;
  • 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра ( 50vh будет означать 50%, 15vh — 15% и так далее ). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

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

Эти единицы измерения поддерживаются следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
31+ 7+ 31+ 27+ 9+ 4.4+ 7.1+

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw , и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Единица измерения ch

Единица измерения ch чем-то похожа на ex , и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
27+ Работает 10+ Работает 9+ Работает Работает

Данная публикация представляет собой перевод статьи « Font-size » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS root: использование селектора для гибкой типографики, расчет размера шрифта

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

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

Расчет пропорций текста по шкале соотношений

В подробной статье на эту тему Тим Браун показывает, как использовать шкалу соотношений для объединения текстовых элементов в цельную композицию. Он объясняет, в чем преимущество осмысленных соотношений между числами для таких композиций:

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

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

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

Градация Формула Результат
+3 40 × 2 80
+2 20 × 2 40
+1 10 × 2 20
нет 10
−1 10 ÷ 2 5
−2 5 ÷ 2 2.5
−3 2.5 ÷ 2 1.25

Пример с базовым значением 10 и коэффициентом 2

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

Градация Формула Результат
+3 10 × 2 × 2 × 2 80
+2 10 × 2 × 2 40
+1 10 × 2 20
нет 10
−1 10 ÷ 2 5
−2 10 ÷ 2 ÷ 2 2.5
−3 10 ÷ 2 ÷ 2 ÷ 2 1.25

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

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

Сравнение шкал с коэффициентами 1,618 и 1,2 на modularscale.com

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

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

Шкала с малой терцией (1.2) при базовом размере 1em

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

Пускаем шкалу в дело

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

  1. Скопировать и вручную расставить числа в значения всех нужных свойств.
  2. Задействовать препроцессоры вроде Sass, в которых есть встроенные математические функции.
  3. Воспользоваться стандартной функцией calc() в самом CSS.

Примеры далее используют последний вариант, а за поддержку calc() и var() в браузерах там отвечает PostCSS. Если вам ближе другой инструмент для работы с CSS, можете воспользоваться его синтаксисом 2 для переменных и математических операций, и проделать в нем те же действия.

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

Они позволяют получать значения масштаба в более аккуратном синтаксисе, чем у calc() , а также могут работать с несколькими значениями base и ratio одновременно.

Настройка переменных

Прежде всего надо определиться со значениями переменных ratio и base, от которых многое зависит в логике шкалы:

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

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

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

Установка размеров по умолчанию

Браузерный размер по умолчанию для шрифта в сочетании с коэффициентом 1.44 для line-height кажется подходящим вариантом для основного текста:

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

Кроме размера шрифта для заголовков, надо подумать и о значениях line-height для них.

Один из чаще всего упускаемых из виду моментов во фронтенд-разработке — line-height многострочных заголовков. Они часто ну слишком уж огромные.
— Мэтт Стоу (@stowball) 4 декабря 2015

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

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

Шкала с коэффициентом 1.2 при отображении контента на экране 320×480

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

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

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

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

Благодаря этим маленьким хитростям то, как далеко вверх по шкале смогут забраться ваши заголовки, будет определяться шириной окна браузера:

(посмотрите полный пример на CodePen, как текст реагирует на изменение ширины окна)

Другие применения шкалы

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

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

Краткая выжимка

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

Дополнительные материалы

  • Более осмысленная типографика Тима Брауна
  • Современный подход к пропорциям в веб-типографике Джейсона Пэментала
  • Точный контроль над отзывчивой типографикой Майка Ритмюллера
  • Отзывчивая типографика со шкалой соотношений Макса Ластера
  • Калькулятор шкалы соотношений
  • Калькулятор пропорций типографики на базе золотого сечения
  • Еще два калькулятора размеров для типографики — Gridlover и Type Scale
  1. Использование одной базовой величины и одного соотношения — не единственный способ получить шкалу, подходящую для ограничений маленького экрана. Можно создать составную шкалу, используя несколько базовых значений и соотношений вместо единственного. Вот пример со вторым базовым значением для уменьшения расстояния между градациями. Подробнее см. на modularscale.com.
  2. Для преобразования вывода calc() и var() можно использовать плагин postcss-cssnext


P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Типографика для сайтов bettertext.css

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

Установить и подключить

Подключается после normalize.css и веб-шрифтов.

Установить через NPM
npm install bettertext.css —save-dev

Установить через Bower
bower install bettertext.css —save

Npm и Bower пакеты не имеют зависимостей.

Как bettertext.css делает текст лучше

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

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

Адаптивные размеры для заголовков
Чтобы заголовки аккуратно выглядели на маленьких экранах и не было проблем с длинными словами, в типографике предусмотрен отдельный набор размеров для экранов меньше 768px.

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

Не содержит классов и не мешает стилям шаблона
CSS написан так, чтобы верстальщику не приходилось ничего обнулять и переопределять в коде шаблона. Стили для структурных тегов section, article, figure, а также для списков ul, ol и таблиц применяются только когда на тегах нет классов.

Настроить под свой дизайн

Bettertext.css написан на LESS и настраивается при помощи 11 переменных. Остальные 40 вычисляются по формулам, но их тоже можно переопределить.

Если вы не используете LESS, настройте типографику онлайн и пользуйтесь скомпилированной версией:

  • настройте переменные по вашему вкусу;
  • протестируйте на вашем HTML или Markdown коде;
  • нажмите «View Compiled» и заберите скомпилированный CSS к себе в проект.

Шаблоны для дизайнеров

В шаблонах типографики для Скетча и Фотошопа текстовые стили соответствуют стилям по-умолчанию из bettertext.css. Используйте эти шаблоны для быстрой настройки типографики в графическом редакторе.

  1. Настройте типографику в браузере;
  2. Скачайте шаблон для вашего графического редактора;
  3. Обновите текстовые стили шаблона в соответствии со сгенерированной в браузере типографикой.

Подключить и настроить LESS-версию

Подключите bettertext.less к стилям вашего проекта.

Парамерты по-умолчанию

У компонента есть глобальный миксин с настройками:

Собственные настройки

Вы можете настроить типографику через переменные. Например, поменять размер шрифта основного текста, шрифты:

Если базовых настроек не достаточно, вы можете переписать любую формулу из миксина bettertext-calculations внутри миксина bettertext-settings (см. исходный код). Например, поменять верхний отступ у заголовков (можно использовать готовые значения и формулы):

Ответы на вопросы

— Что такое «типографика»?

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

— Зачем мне это нужно?

— Bettertext.css cэкономит время верстальщика, избавит от рутины: на каждом проекте нужно написать стили для заголовков, абзацев, списков, цитат, таблиц. Обычно у верстальщиков со временем появляется своя заготовка для типографики, которая переходит из проекта в проект с незначительными изменениями.

Bettertext.css — настраиваемая заготовка, которая позволяет при помощи 11 переменных задать базовую типографику сайта.

— Будет ли версия bettertext нa SASS и Stylus?

— Пока нет таких планов, потому что я не использую SASS или Stylus. Но если вы хотите помочь мне портировать на SASS или Stylus, пишите на почту radzkov@gmal.com.

— Почему размер шрифта и высота строки задаются в пикселях?

— Для удобства настройки. В графических редакторах размеры задаются в пикселях. Вы берёте значения в пикселях из исходника дизайна, а bettertext самостоятельно пересчитывает размеры шрифтов из px в em, а высоту строки в безразмерную величину. По-умолчанию 1em = 16px.

— Что делать, если я хочу изменить размер шрифта root элемента и 1rem ≠ 16px?

Если вы пользуетесь техникой «62.5%» и у вас 1rem = 10px, то в настройках bettertext надо переопределить скрытую переменную @onerem: 10px . Пример на codepen.

Поделиться Твитнуть Плюсануть Поделиться Телеграмнуть

Работа с типографикой

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

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

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

Гарнитура и шрифт

Термины «гарнитура» и «шрифт» часто взаимозаменяемы, что приводит к путанице. Вот что означает каждый термин.

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

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

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

Добавление цвета к тексту

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

Единственное свойство, которое нам требуется для установки цвета текста — это свойство color . Оно принимает одно значение цвета, но в разных форматах. Эти форматы, как мы обсуждали в уроке 3, «Знакомство с CSS», включают ключевые слова, шестнадцатеричные значения и значения RGB, RGBa, HSL и HSLa. Шестнадцатеричные значения являются наиболее распространёнными, поскольку они обеспечивают максимальный контроль с минимальными усилиями.

Давайте взглянем на CSS, необходимый для изменения цвета всего текста в пределах элемента на странице:

Изменение свойств шрифта

CSS предлагает много разных свойств для редактирования внешнего вида текста на странице. Эти свойства входят в две категории: свойства шрифта и свойства текста. Большинство из этих свойств начинаются с font- или text-. Для начала мы обсудим основные свойства шрифта.

font-family

Свойство font-family применяется, чтобы объявить, какой шрифт, а также какие резервные или заменяющие шрифты должны быть использованы для отображения текста. Значение font-family содержит несколько имён шрифтов, перечисляемых через запятую.

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

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

Свойство font-family в действии выглядит так:

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

font-size

Свойство font-size даёт возможность установить размер текста, используя типовые значения размера, включая пиксели, em, проценты, пункты или ключевые слова.

Здесь в CSS устанавливается размер шрифта 14 пикселей для элемента :

font-style

Чтобы сделать текст курсивным или предотвратить его от этого, мы будем использовать свойство font-style . Это свойство принимает четыре ключевых слова: normal , italic , oblique и inherit . Из них наиболее часто используются italic (задаёт текст курсивным) и normal (возвращает текст к своему обычному стилю).

Ниже CSS устанавливает для всех элементов с классом special свойство font-style как italic :

font-variant

Это происходит не часто, но иногда текст необходимо установить небольшими заглавными буквами, также известными как капитель. Для такого особого случая мы воспользуемся свойством font-variant . Оно принимает три значения: normal , small-caps и inherit . Наиболее типовыми значениями являются normal и small-caps , которые используются для переключения шрифтов между капителью и обычным текстом.

Для переключения всех элементов с классом firm , мы будем использовать font-variant со значением small-caps :

font-weight

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

Ключевое слово включает normal , bold , bolder , lighter и inherit . Из этих ключевых слов рекомендуется в первую очередь задействовать normal и bold , чтобы изменить текст от обычного до жирного и наоборот. Вместо использования ключевых слов bolder или lighter лучше применять числовое значение для более точного управления.

На практике, вот CSS для установки font-weight как bold для любого элемента с классом daring :

Числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900 связаны с гарнитурами шрифтов, которые имеют несколько жирностей. Их порядок начинается с самой тонкой жирности, 100, и повышается до самой толстой жирности, 900. Для справки, значение normal соответствует 400, а значение bold соответствует 700. Таким образом, любое числовое значение ниже 400 будет достаточно тонким, а любое значение выше 700 будет достаточно жирным.

Изменение насыщенности шрифта до 600 для любого элемента с классом daring теперь отображает текст как полужирный — не совсем жирный, как ключевое слово bold до этого:

Насыщенность шрифта

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

Например, шрифт Times New Roman содержит две насыщенности: нормальная или 400 и жирная или 700. Попытка использовать 900 установит шрифт в ближайшую насыщенность, 700 в данном случае.

line-height

Межстрочный интервал — расстояние между двумя строками текста — объявляется с помощью свойства line-height . Оно принимает все основные значения размера, которые мы рассмотрели в уроке 3, «Знакомство с CSS».

Лучше всего для читаемости задать межстрочный интервал примерно в полтора раза больше значения свойства font-size . Это можно быстро получить путём установки line-height как 150% или просто 1.5. Однако если мы работаем с базовой сеткой, предпочтительнее использовать пиксели и получить немного больше контроля над line-height .

Взгляните на CSS, мы установили line-height как 22 пикселя для элемента , тем самым задав 22 пикселя между каждой строкой текста:

Межстрочный интервал также может быть использован для вертикального выравнивания по центру одной строки текста внутри элемента. Используя одинаковые значения свойств line-height и height вы выровняете текст по центру вертикали:

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

Универсальное свойство font

Все перечисленные выше шрифтовые свойства могут быть объединены в одном универсальном свойстве font . Это свойство может принимать несколько значений шрифтовых свойств. Порядок значений этих свойств должен быть следующим, слева направо: font-style , font-variant , font-weight , font-size , line-height и font-family .

Эти значения перечисляются слева направо без применения запятых (кроме названий шрифтов, поскольку свойство font-family задействует запятые). Косая черта (/) необходима для разделения значений свойств font-size и line-height .

Каждое значение свойства не является обязательным, за исключением значений font-size и font-family . Иными словами, мы можем включить только значения свойств font-size и font-family при желании.

Свойства шрифта все разом

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

Демонстрация свойств шрифта

Псевдоклассы в CSS

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

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

На практике

Вернёмся назад к нашему сайту Styles Conference и начнём добавлять некоторые свойства шрифта.

Мы начнём с обновления шрифта для всего нашего текста. Чтобы сделать это, мы применим стили к элементу . Начнём с color , а также добавим значения font-weight , font-size , line-height и font-family через свойство font .

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

Нам нужно добавить следующее:

В уроке 4, «Открываем блочную модель», мы начали добавлять некоторые типографские стили, в частности, нижний margin для некоторых заголовков разного уровня и абзацев. В этом же разделе файла main.css давайте добавим цвет к заголовкам от первого до четвёртого уровней.

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

будут использовать достаточно большие значения font-size , следовательно, мы также хотим увеличить у них значения line-height , чтобы сохранить текст внутри этих элементов разборчивым. Для справки, мы установим значение line-height как 44 пикселя, удвоив значение основного line-height , установленного в правилах для элемента .

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

Мы применим другое значение свойства color и немного уменьшим font-size для этих элементов, а также собираемся изменить font-weight на 400 или normal .

По умолчанию, браузеры отображают заголовки с font-weight как bold . Для наших заголовков, однако, в данный момент все font-weight заданы как 300. Сброс CSS в верхней части файла main.css изменил font-weight на normal , а затем font-weight внутри элемента задал значение 300 для всех заголовков.

Значение font-weight как 400 для элемента

на самом деле сделает это немного толще, чем остальные заголовки и текст.

Наш сброс в начале стилей также сбросит стили браузера по умолчанию для элементов , и , которые мы хотим добавить обратно. Для элементов мы хотим установить font-weight как 400, который на самом деле приравнивается к normal , а не bold , поскольку используемая нами гарнитура толще, чем большинство других гарнитур. Затем для элементов и мы хотим установить font-style как italic .

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

. Кроме того, применим псевдокласс :hover , чтобы изменить цвет на светло-серый, когда пользователь наводит курсор на ссылку.

Теперь взглянем на наш элемент и обновим для него наши стили. Мы начнём обновление с логотипа, добавив свойства font-size и line-height в наборе правил для logo . После добавления к существующим свойствам border-top , float и padding , новый набор правил должен выглядеть так:

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

внутри , чтобы сбалансировать это. Мы сделаем это путём размещения значения tagline у атрибута class для элемента

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

Не забывайте, что изменения в элементе

должны произойти на каждой странице.

с классом tagline наступает очередь элемента . Добавим значение primary-nav к атрибуту class элемента , а также свойства font-size и font-weight , чтобы навигация выделялась по сравнению с остальной частью заголовка.


Теперь элемент в несколько лучшей форме, давайте также взглянем на наш элемент . Используя класс primary-footer изменим color и font-size для всего текста внутри . Кроме того, поднимем font-weight для до 400.

Учитывая существующие стили, стиль для нашего подвала должен выглядеть так:

Также обновим немного нашу главную страницу. Начнём с раздела hero и увеличим общий line-height в разделе до 44 пикселей. Мы также сделаем текст в этом разделе больше, увеличив font-size для элемента

до 36 пикселей и font-size для элемента

Мы можем внести все эти изменения, используя существующий класс hero и создав новые селекторы для элементов

. Наши стили для раздела hero переделаются теперь таким образом:

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

. Поскольку у этих элементов есть своё собственное определение color , псевдокласс :hover , описанный ранее, не оказывает на них влияние.

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

С классом teaser мы готовы несколько утяжелить CSS и создать достаточно сложный селектор. Начнём наш селектор с этого класса, поскольку мы хотим только нацелиться на элементы внутри элемента с классом teaser . Отсюда мы хотим применить стили к элементам, которые находятся внутри ссылок и на которые навели курсор мыши. Таким образом, мы добавим селектор типа совместно с псевдоклассом :hover . Наконец, мы добавим селектор типа h3 , чтобы выбрать действительные элементы

, к которым мы хотели бы применить стили.

В общей сложности, наш селектор и стили для этих элементов

будут выглядеть следующим образом:

Уфф, это было немного. Хорошая новость — наша страница Styles Conference начинает выглядеть действительно приятно и показывает немного индивидуальности.

Рис. 6.01. Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Применение текстовых свойств

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

text-align

Выравнивание текста является важной частью построения ритма и потока на странице. Мы делаем это с помощью свойства text-align . У этого свойства пять значений: left , right , center , justify и inherit . Все эти значения довольно просты; как и ожидалось, они выравнивают текст по левому краю, правому краю, по центру или по ширине.

Ниже CSS устанавливает текст всех абзацев выровненный по центру:

Свойство text-align , однако, не следует путать со свойством float . Значения text-align как left или right выравнивают текст внутри элемента влево или вправо, в то время как значения float как left или right двигают весь элемент. Иногда свойство text-align даст нам желаемый результат, в другой раз нам, возможно, потребуется использовать свойство float .

text-decoration

Свойство text-decoration предлагает несколько способов для украшения текста. Оно принимает в качестве значений ключевые слова none , underline , overline , line-through и inherit . Использование text-decoration варьируется, но самое популярное применение — это подчёркивание ссылок, что является стилем браузера по умолчанию.

Здесь стиль для любого элемента с классом note задаёт text-decoration как underline :

К одному элементу можно применить несколько значений text-decoration , указывая значения ключевых слов через пробел.

text-indent

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

Здесь CSS меняет отступ текста для всех элементов

внутрь на 20 пикселей:

text-shadow

Свойство text-shadow позволяет нам добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.

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

Здесь для всего текста элемента

свойство text-shadow задаёт на 30% прозрачную чёрную тень, сдвинутую на 3 пикселя вправо, на 6 пикселей вниз и с размытием 2 пикселя:

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

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

box-shadow

Свойство text-shadow устанавливает тень конкретно для текста элемента. Если бы нам хотелось разместить тень для элемента в целом, то мы можем использовать свойство box-shadow .

Свойство box-shadow работает так же, как text-shadow , принимая значения для горизонтальных и вертикальных смещений, размытие и цвет.

box-shadow также принимает необязательное четвёртое значение размера, перед значением цвета, для растяжения тени. Положительное значение растяжения расширит тень больше, чем размер элемента, к которому применяется свойство, а отрицательное значение сократит тень меньше, чем размер самого элемента.

Наконец, свойство box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи.

text-transform

Подобно свойству font-variant есть свойство text-transform . В то время как свойство font-variant ищет альтернативный вариант гарнитуры, свойство text-transform изменит строку текста без необходимости альтернативной гарнитуры. Свойство text-transform принимает пять значений: none , capitalize , uppercase , lowercase и inherit .

Значение capitalize делает заглавной первую букву каждого слова, значение uppercase устанавливает заглавной каждую букву, а значение lowercase делает каждую букву строчной. С помощью none любые из этих унаследованных значений вернутся к исходному стилю текста.

Ниже CSS устанавливает текст для всех элементов заглавными буквами:

letter-spacing

Используя свойство letter-spacing мы можем регулировать (или отслеживать) расстояние между букв на странице. Положительное значение будет толкать буквы дальше друг от друга, а отрицательное значение будет тянуть буквы ближе друг к другу. Значение none вернёт пространство между букв к своей обычной величине.

Использование относительного размера со свойством letter-spacing гарантирует, что мы поддерживаем правильное расстояние между буквами, когда меняется font-size для текста. Это, однако, всегда хорошая идея, чтобы перепроверить нашу работу.

Здесь с помощью CSS все буквы в пределах наших элементов

на .5 em станут ближе друг к другу:

word-spacing

Также, подобно свойству letter-spacing мы можем отрегулировать расстояние между словами в элементе, используя свойство word-spacing . Это свойство принимает те же значения размера и ключевые слова, что и letter-spacing . Вместо расстояния между букв, свойство word-spacing применяет эти значения между словами.

Здесь каждое слово в элементе

будет на расстоянии .25 друг от друга.

Свойства текста все разом

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

Демонстрация свойств текста

На практике

С текстовыми свойствами подмышкой, перепрыгнем обратно к нашему сайту Styles Conference и включим их в работу.

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

Начнём добавление к разделу с нашими ссылкам в файле main.css с удаления подчёркивания для всех ссылок через свойство text-decoration . Далее выберем все ссылки, которые появляются в абзацах, и зададим им нижнюю границу.

Мы могли бы использовать свойство text-decoration вместо border-bottom для подчёркивания ссылок внутри каждого абзаца, однако с помощью свойства border-bottom мы получим больше контроля над внешним видом подчёркивания. Здесь, например, подчёркивание будет другого цвета, чем сам текст.

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

Возвращаясь к нашим элементам

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

Вернёмся к нашему элементу и применим дополнительные стили к нашему навигационному меню (к которому мы ранее добавили класс primary-nav ). После существующих свойств font-size и font-weight добавим letter-spacing и изменим наш текст на заглавный с помощью свойства text-transform .

Наши стили для элемента с классом primary-nav теперь должны выглядеть следующим образом:

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

Нам нужно добавить свойство text-align со значением right для элемента

с классом tagline , чтобы получить слоган, который располагается с правой стороны.

При добавлении к существующему свойству margin наши новые стили для элемента

с классом tagline будут выглядеть следующим образом:

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

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

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

А элемент будет выглядеть так:

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

С классом nav для двух навигационных меню создадим новый раздел в рамках нашего файла main.css, чтобы добавить общие стили навигации. Начнём с добавления свойства text-align со значением right к классу nav . Мы расширим эти стили позже, но это пока послужит хорошей основой.

Мы уже добавили свойство text-align к нескольким разным элементам, давайте также добавим text-align со значением center к набору правил с классом hero . Для справки, эти стили, в том числе содержащие свойства line-height и padding , находятся в разделе главной страницы нашего файла main.css.

У Styles Conference теперь серьёзный стиль (плохая шутка, извините). Если серьёзно, то все наши стили вместе сочетаются очень хорошо и сайт прогрессирует.

Рис. 6.02. Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Использование безопасных веб-шрифтов

По умолчанию, есть несколько шрифтов которые заранее установлены на каждом компьютере, планшете, смартфоне или другом устройстве с браузером. Поскольку они установлены на каждом устройстве, мы можем свободно использовать эти шрифты на наших сайтах, зная, что независимо от того, какое устройство просматривает наш сайт, шрифт будет отображаться правильно. Эти шрифты известны как «безопасные веб-шрифты». Таких шрифтов только горстка и наиболее надёжные перечислены здесь:

  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida Sans, Lucida Grande, Lucida
  • Palatino Linotype
  • Tahoma
  • Times New Roman, Times
  • Trebuchet
  • Verdana

Встраивание веб-шрифтов

У нас также есть возможность загружать шрифты с сервера и включать их на сайт через стилевое правило @font-face . Эта возможность делает чудеса для сетевой типографики. Сейчас, более чем когда-либо, типографика приходит в жизнь в Интернете.

Встраивание собственных веб-шрифтов выглядит как приведённый CSS. Сперва мы используем правило @font-face , чтобы определить имя нашего шрифта через свойство font-family , а также исходник нашего шрифта (путь к файлу, содержащему наш выбранный шрифт) через свойство src . Отсюда мы можем использовать этот шрифт, включая его имя в качестве значения свойства font-family .

Демонстрация свойств текста

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

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

На практике

Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.

Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.

Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.

Google выдаст нам дополнительный элемент

  • для включения в на всех наших страницах. Мы поместим этот новый элемент
  • непосредственно ниже нашего существующего
  • . Новый элемент будет включать в себя правильный указатель на стили Google, который в том числе включает новый файл CSS с правильным правилом @font-face , необходимым для использования шрифта Roboto.

    После добавления нового элемента
    , наш элемент будет выглядеть следующим образом:

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

    Добавим Roboto в начале нашего набора шрифтов так: «Roboto», «Open Sans», «Helvetica Neue», Helvetica, Arial, sans-serif .

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

    Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.

    Внутри набора правил с классом logo начнём с добавления свойства font-weight со значением 100, чтобы сделать текст достаточно тонким. Также используем свойство text-transform со значением uppercase , чтобы сделать все буквы заглавными и свойство letter-spacing со значением .5 пикселей, чтобы добавить немного пространства между букв внутри логотипа.

    Все стили для нашего логотипа будут выглядеть следующим образом:

    Поскольку нам доступно значение 100 у свойства font-weight , давайте также установим абзац для раздела hero такой же насыщенности. Мы можем использовать существующий селектор чтобы сделать это и новый набор правил будет выглядеть следующим образом:

    Наш сайт Styles Conference проделал несколько довольно больших шагов в этом уроке и внешний вид сайта начинает по-настоящему блистать.

    Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google

    Демонстрация и исходный код

    Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

    Добавление цитат

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

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

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

    • : применяется для указания на творческую работу, автора или ресурс;
    • : применяется для коротких, встроенных цитат;

    : применяется для наиболее длинных внешних цитат.


    Цитата на творческую работу

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

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

    Вот цитата из книги Уолтера Айзексона про Стива Джобса внутри элемента . В цитате также есть гиперссылка на книгу.

    Демонстрация цитаты на творческую работу

    Строчные цитаты

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

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

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

    Демонстрация строчной цитаты

    Внешние цитаты

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

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

    Вот пример, который использует элемент

    Более длинные цитаты в элементе

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

    Атрибут cite может добавляться к элементу

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

    Здесь в HTML излагается расширенная цитат из Стива Джобса, которая первоначально появилась в журнале Fortune. Цитата размечена с помощью элемента

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

    Демонстрация внешней цитаты

    Резюме

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

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

    • добавление цвета к нашему тексту для его улучшения;
    • применение шрифтовых свойств, в том числе font-family, font-size, font-style, font-weight и др.;
    • применение текстовых свойств, включая text-align, text-decoration, text-indent, text-shadow и др.;
    • история безопасных веб-шрифтов и как внедрить наши собственные веб-шрифты;
    • как правильно разметить цитаты.

    Концентрирование на тексте и небольшое баловство с типографикой продвинуло наш дизайн довольно далеко вперёд. Дальше мы внесём в наш сайт чуть больше цвета с помощью фона и градиентов.

    Адаптивные размеры шрифтов при помощи REM

    С самого зарождения интернета люди начали дискутировать на тему того, как лучше всего определять шрифты. Кроме традиционных кандидатов – вроде px, em и %, – есть еще единица измерения rem, которая представляет собой довольно новую альтернативу, совмещающую в себе лучшие свойства своих предшественников.

    Прошлые стандарты: размер шрифта при помощи em или %

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

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

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

    * в параметре модели блока margin-bottom em относится к размеру шрифта самого элемента. Изменения в размере шрифта вели к изменениям в поле (margin), что могло привести к абсолютно нежелательному эффекту.

    * с другой стороны, определение размера шрифта при помощи em всегда было относительно размеру шрифта его родительского элемента. Применение размера 0.875em вело к всё большему уменьшению с каждым вложенным элементом. Чем больше вложенных элементов у вас было, тем меньше становился шрифт.

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

    Временная эмансипация PX

    В феврале 2009 года немецкий разработчик Jens Grochtdreis опубликовал статью под названием « Die leidige Sache mit der Schriftskalierung », которую можно было назвать «Раздражающие факты о масштабировании шрифтов», если бы ее публиковали на русском языке. Grochtdreis рекомендовал читателям использовать Px. На тот момент современные браузеры уже умели масштабировать страницы, а необходимости брать в учет IE6 уже не было.

    Годом позже, немецкий разработчик Gerrit van Aaken поддержал Grochtdreis в своей статье « Warum ich Pixel fur CSS-Schriftgrade verwende » или «Почему мы используем PX для указания размеров шрифта в CSS». Не менее интересным, чем сама статья, было начавшееся обсуждение в комментариях. И в этом обсуждении, в комментарии под номером 22 , человек упомянул о единице изменения REM, о которой тогда практически никто не знал.

    «Root EM» или rem: рождение новой звезды

    Спустя некоторое время, в 2011 году термин rem начал набирать обороты, медленно, но уверенно. И это не удивительно, так как rem совмещает в себе плюс и px и em. Он не менее гибок, чем его предшественники, но имеет и исправления недостатков с точки зрения наследования, так как rem всегда относится к корневому элементу – к ‘html’, а не к ‘body’.

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

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

    Откат для старых браузеров: PX

    Если вам кажется, что все звучит слишком хорошо чтобы быть правдой, то вы правы. Всегда есть какие-то минусы, и в данном случае это – старые браузеры. Сервис http://caniuse.com/rem покажет вам, чего следует ожидать. И если честно, можно ожидать довольно многого:

    Недостатки данного метода связаны – как обычно – с названиями браузеров, и на этот раз дело касается IE версиями моложе 9, а также Opera Mini. Именно эти друзья делают необходимым реализовать запасной вариант в PX. Учитывая вышеприведенный пример, все должно выглядеть следующим образом:

    Современные браузеры будут считывать и переписывать px-значение теми, что указаны в rem, а старые браузеры будут придерживаться инструкции в px, и игнорировать вторую строку. Примерно таким мы и видели этот процесс…

    * В защиту rem – Tech Time
    * Могу ли я использовать rem? – caniuse.com

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Единицы измерения CSS, размер шрифта

    Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

    В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

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

    В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

    Абсолютные величины

    Физические единицы:

    • Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
    • Сантиметры (cm), 1cm = 96px/2.54.
    • Миллиметры (mm), 1mm = 1/10 от 1cm.
    • Четверть миллиметра, (q) 1q = 1/40 от 1cm.
    • Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
    • Пункты (pt), 1pt = 1/72 дюйма.

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

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

    Визуальные единицы:

    Пиксели (px), 1px = 1/96 от 1in (дюйма).

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

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

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

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

    Процентные значения.

    Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).

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

    Давайте рассмотрим пример. Допустим, у всех параграфов (элемент

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

    Результат нашего примера:

    Рис.51 Пример использования процентных значений.

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

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

    Результат нашего примера:

    Рис.52 Пример наследования процентных значений.

    В данном примере для вложенного блока

    Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

    Если бы мы не изменили значение размера шрифта для блока

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

    Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

    Единица измерения еm.

    Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

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

    Результат нашего примера:

    Рис.53 Пример использования значений em.

    Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

    Единица измерения rеm.

    Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

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

    Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

    Рис.54 Пример наследования значений em.

    Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem .

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

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

    Рис.55 Пример использования значений rem.

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

    Единица измерения еx.

    Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

    В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

    Единица измерения ch.

    Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

    Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

    Масштабируемые величины относительно экрана

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

    Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

    В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

    Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.

    1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.

    Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.


    В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw , для третьего — 3vw ), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw , для третьего — 50vw ) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh , для третьего — 20vh ).

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

    Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

    Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

    Результат нашего примера:

    Рис.57 Масштабируемые единицы измерения.

    Минимальное и максимальное значение области просмотра

    Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

    1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.

    1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

    Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

    В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block ), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0 .

    Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin . Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

    Для высоты расчёт аналогичен:

    В итоге мы получили «квадрат Малевича».

    Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

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

    Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

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

    1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Andro >vmax , iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax , 7 версия – некорректно работала единица измерения vh ).
    2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
      • IE работает только с версии 9.0 (поддерживает значение vm , вместо vmin ).
      • IE 10, IE 11 не поддерживают значение vmax .
      • Edge 12, 13, 14 не поддерживают значение vmax .

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

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

  • Градация Размер шрифта Результат
    1.0em
    Значение Описание
    medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
    small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
    x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
    xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
    smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
    large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
    x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
    xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
    larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

    Рассмотрим пример использования ключевых слов на странице:

    В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

    Результат нашего примера:

    Рис.59 Использование ключевых слов для управления размером шрифта.

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

      Практическое задание № 13
      У нас имеются следующие стили, в которых элемент и элементы

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    Ответьте на следующие вопросы к практическому заданию:

    • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — .
    • Сколько в пикселях составляет размер шрифта текста, внутри блока

    18 советов по CSS, которые сделают жизнь разработчика проще

    Цвета

    Когда вы используете в проекте огромное количество цветов, сложно не запутаться, так как порой отличия бывают незаметными: возьмите #3426D1 и #3426D2 . Для решения этой проблемы достаточно использовать элементарные классы цветов в CSS или SCSS.

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

    Другая проблема — баги при использовании альфа-канальных цветов. Обычно такие цвета задаются с использованием функций rgba() или hsla() . Цвет, заданный со значением альфа-канала, отличным от 1, является полупрозрачным. Воспринимаемый цвет теперь меняется в зависимости от того, что находится на заднем плане. Если цвет вам нужен таким, каким он выглядит на белом фоне, лучше использовать hex-значение. Некоторые функции, lighten() в SASS например, сгенерируют полупрозрачный цвет, поэтому лучше придерживайтесь точно закодированных значений.

    Типографика

    Все свойства, которые влияют или находятся под влиянием шрифта, должны быть объявлены в одном месте, сразу после какого-нибудь @font-face . Также можно добавлять классы для шрифтов, которые меняют font-size (через rem ) и задают те line-height , letter-spacing и word-spacing , которые подходят для заданного шрифта и его размера. После этого нигде не должны использоваться font-* или text-* (за исключением text-overflow ).

    9–10 ноября, Москва, беcплатно

    Объявление данных свойств вместе с font-face гарантирует, что страницы сайта всегда будут выглядеть правильно. Настройка line-height вместо padding или margin может вызвать ошибки при обвёртывании текста. А установка font-weight отдельно от всех остальных свойств (стилей), касающихся шрифта, приведёт к faux bold font. Изменение font-style для шрифта, который не поддерживается, тоже ведёт к неправильному его отображению.

    Устанавливайте размер шрифта в rem единицах. Использование em приведёт к проблемам при вложении элементов, так как em является скалярным кратным текущему размеру шрифта. px может создать нечитаемый и неадаптивный контент. Позвольте пользователю (или браузеру пользователя) установить подходщий им размер шрифта — не объявляйте размер шрифта в body или элементе html и используйте только rem .

    Интервалы

    На сайте, где в первую очередь важен контент, интервалы должны гармонично дополнять содержание. Но в некоторых измерениях, как padding: 4px , общий вид будет выглядеть не очень. А любое динамическое измерение, сообщающееся со шрифтом, например padding: .5em , будет хорошо смотреться во всех случаях.

    Для интервалов используйте em .

    Инструмент CSS Grid Layout

    CSS Grid очень хорошо поддерживается (возвращаясь к IE10) и позволяет организовывать контент без добавления контейнерных элементов наподобие Bootstrap-row или Bootstrap-col. Дизайнеры часто работают с 12-колонной сеткой, и CSS-фреймворки следуют этому. Но сетки, как и интервалы, должны организовывать контент, а не ограничивать его. Сетки не должны быть заранее заточены под определённый формат. Не стоит целиком полагаться на сетку.

    Выравнивание текста

    text-align используют для выравнивания не только текста, но и других элементов. Но для этого лучше подходит flexbox . В некоторых языках, которые пишутся справа налево или вертикально, свойства left и right могут работать некорректно. В случае с justify проблемы могут возникнуть с языками, где есть орграфы. Также он может доставить неудобства людям с дислексией. Каждый из этих вариантов решается flexbox . Поэтому для таких случаев всегда используйте его.

    Свойство outline

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

    Псевдоклассы :focus и :hover

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

    Непрозрачность

    Устанавливая opacity на ноль, вы фактически не скрываете элемент от инструментов специальных возможностей. Он до сих пор находится в документе, и его может найти любой желающий. Это свойство действительно требуется только в двух случаях: когда элемент появляется в поле зрения (быстрое изменение opacity c 0 до 1) и при стилизации наложения диалогового окна (таким образом содержимое под окном ещё немного заметно). Избегайте наложения полупрозрачных слоёв, так как уровень прозрачности (opacity) накапливающийся. Контент, находящийся под двумя элементами с opacity: 50% , будет выглядеть так, будто он находится под одним элементом с opacity: 25% .

    Селекторы

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

    Производительность CSS-селекторов в современных браузерах — вопрос не первой важности, возможно, вы слышали об универсальном селекторе (*). О чём действительно стоит беспокоиться, так это о слишком большом охвате этого селектора. В будущем это может повлечь больше неудобств, чем пользы. Использование селектора вроде .my-class > в конечном счёте потребует от вас выбрать какой-нибудь дочерний класс, так что вам придётся добавлять другие классы и направлять этот селектор на них.
    Тот же самый аргумент можно привести в пользу неиспользования type-селекторов ( div , main ), которые скапливаются в больших количествах и требуют добавления некоторых идентифицирующих свойств div.some-class . Вот такие множественные селекторы более специфичны, и вероятность багов меньше.
    То же самое с селекторами .class , [attribute] и :focus .

    Чрезмерная точность

    Селекторы бывают не только слишком общими, но ещё и слишком специфичными — два конкретно запарных случая. Чрезмерно специфичные селекторы порождают ещё более специфичные селекторы. Каждый последующий из них становится препятствием при изменении стилей элемента, что в конце концов приводит к хрупким таблицам стилей, с которыми никто не хочет работать.

    В CSS есть встроенная специфичность — порядок (очередь) resultset’ов. Это каскад в каскадных таблицах стилей. Исходя из этого, можно выдавать resultset’ы в порядке возрастания по их значимости, без увеличения уровня специфичности селектора. Например:

    В этом примере каждый последующий классовый селектор более специфичен, чем предыдущий, таким образом устраняется необходимость объявлять стили для .btn.btn—primary or .btn.btn—primary—light .

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

    Свойство text-transform

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

    Свойство z-index

    Если в стилях присутствует любой z-index , обязательно будет ещё два свойства, которые объявляют z-index: 9999; и z-index: 99999; . При попытке использования атомарных классов или переменных для ограничения количества допустимых z-index без метода calc() и SCSS-математики не обойтись, поскольку придётся изменять значение переменной.

    В большинстве случаев, если не во всех, z-index можно заменить изменением структуры HTML для натуральной укладки элементов (чем глубже элементы в верстке — тем выше они в отображении) или добавлять к элементу или его родителю новый контекст наложения.
    В общем, избегайте z-index .

    Псевдоэлементы

    Иногда с псевдоэлементами ::before и ::after можно поиграться, многие стилистические фичи основаны именно на этих двух псевдоэлементах, и пока они пустые (без контента), всё выглядит вполне сносно. Проблема с размещением контента в этих элементах заключается в том, что не все устройства способны справляться с нагрузкой. Так что не размещайте в них ничего.

    Псевдоэлементы ::first-letter и ::first-line не работают так, как вы могли предполагать. Они действуют лишь на первый символ/строку в блоке. С ::first-line , бывает, возникает ошибка с двухбайтовыми символами, такими как Japanese Kana, и орграфами.
    С управлением стилями выделенного текста или placeholder’а, осуществляемого с помощью ::selection или ::placeholder , зачастую возникают проблемы. С ::placeholder всё просто: не используйте его. Это особенно важно для полей ввода паролей и т.п.

    При выделении текста и измении стиля (обычно color и background-color ) возникают коварные баги. Пока дефолтные цвета выделения, не совместимые с браузерами и устройствами, недостаточно контрастны и не так сочетаются с цветом и стилем текста на вашем сайте, пользователи частенько переписывают их для лучшей читабельности. Изменение цветов в этом случае либо не будет работать, либо будет мешать их стилям (если вы пользовались !important ). Использование этого псевдоэлемента для красивой картинки может обернуться недовольством посетителей вашего сайта.

    Переходы и анимация

    transitions и animations в CSS отличаются от opacity и transform тем, что после их выполнения браузер заново перерисовывает всю страницу. На мощном компьютере это никак не заметно, но на простеньких телефонах и ноутбуках всё выглядит криво. Плохая анимация смотрится хуже, чем её отсутствие.

    Медиа-запрос prefers-reduced-motion

    Создание красивых ненавязчивых анимаций — нелёгкое дело. С появлением медиа-запроса prefers-reduced-motion управлять анимацией на странице стало намного проще, к тому же он помогает сделать страницы безопаснее для людей, страдающих расстройствами вестибулярного аппарата. Данный скрипт останавливает выполнение всех анимаций, если автор не включает класс safe-animation в элемент.

    Сброс стилей

    Хорошо использовать немного улучшенную версию Meyers reset. Несколько аспектов удалены из reset’а, например списки иконок ol и ul элементов, которые могут привести к тому, что начнут объединяться вещи одинаковые по представлению, но разные по происхождению. Также в этой версии отсутствует установка line-height в body на 1, ведь всё зависит от шрифта и впоследствии могут возникнуть непредвиденные ошибки. В этом reset’е есть вещи, упомянутые выше. В CSS не добавляется атомарный класс .hidden , потому что есть лучшее решение, которое будет работать, даже если CSS не подгрузится, — hidden-атрибут. Обычно на скрытые элементы браузер выставляет display: none , но это тоже можно изменить.

    Исходники reset’a — https://github.com/NickGard/css-utils/blob/master/reset.css.
    Ещё одна полезная штука — это класс visually-hidden . Вместе с aria-label для невидимого читаемого с экрана текста нужно использовать следующий блок кода:

    Наименования в соответствии с методологией BEM

    BEM, пожалуй, лучший способ именования элементов, и читается он легко — сразу понятно, к какому типу кнопки относится данный элемент. Маленькое отступление от стиля BEM , но это довольно-таки удобно, сразу видно, что второй класс базируется на первом. При этом CSS выглядит так :

    В SCSS вы можете достигнуть подобного эффекта, используя @extend .

    Типографика для сайтов bettertext.css

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

    Установить и подключить

    Подключается после normalize.css и веб-шрифтов.

    Установить через NPM
    npm install bettertext.css —save-dev

    Установить через Bower
    bower install bettertext.css —save

    Npm и Bower пакеты не имеют зависимостей.

    Как bettertext.css делает текст лучше

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

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

    Адаптивные размеры для заголовков
    Чтобы заголовки аккуратно выглядели на маленьких экранах и не было проблем с длинными словами, в типографике предусмотрен отдельный набор размеров для экранов меньше 768px.

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

    Не содержит классов и не мешает стилям шаблона
    CSS написан так, чтобы верстальщику не приходилось ничего обнулять и переопределять в коде шаблона. Стили для структурных тегов section, article, figure, а также для списков ul, ol и таблиц применяются только когда на тегах нет классов.

    Настроить под свой дизайн

    Bettertext.css написан на LESS и настраивается при помощи 11 переменных. Остальные 40 вычисляются по формулам, но их тоже можно переопределить.

    Если вы не используете LESS, настройте типографику онлайн и пользуйтесь скомпилированной версией:

    • настройте переменные по вашему вкусу;
    • протестируйте на вашем HTML или Markdown коде;
    • нажмите «View Compiled» и заберите скомпилированный CSS к себе в проект.

    Шаблоны для дизайнеров

    В шаблонах типографики для Скетча и Фотошопа текстовые стили соответствуют стилям по-умолчанию из bettertext.css. Используйте эти шаблоны для быстрой настройки типографики в графическом редакторе.

    1. Настройте типографику в браузере;
    2. Скачайте шаблон для вашего графического редактора;
    3. Обновите текстовые стили шаблона в соответствии со сгенерированной в браузере типографикой.

    Подключить и настроить LESS-версию

    Подключите bettertext.less к стилям вашего проекта.

    Парамерты по-умолчанию

    У компонента есть глобальный миксин с настройками:

    Собственные настройки

    Вы можете настроить типографику через переменные. Например, поменять размер шрифта основного текста, шрифты:

    Если базовых настроек не достаточно, вы можете переписать любую формулу из миксина bettertext-calculations внутри миксина bettertext-settings (см. исходный код). Например, поменять верхний отступ у заголовков (можно использовать готовые значения и формулы):

    Ответы на вопросы

    — Что такое «типографика»?

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

    — Зачем мне это нужно?

    — Bettertext.css cэкономит время верстальщика, избавит от рутины: на каждом проекте нужно написать стили для заголовков, абзацев, списков, цитат, таблиц. Обычно у верстальщиков со временем появляется своя заготовка для типографики, которая переходит из проекта в проект с незначительными изменениями.

    Bettertext.css — настраиваемая заготовка, которая позволяет при помощи 11 переменных задать базовую типографику сайта.

    — Будет ли версия bettertext нa SASS и Stylus?

    — Пока нет таких планов, потому что я не использую SASS или Stylus. Но если вы хотите помочь мне портировать на SASS или Stylus, пишите на почту radzkov@gmal.com.

    — Почему размер шрифта и высота строки задаются в пикселях?

    — Для удобства настройки. В графических редакторах размеры задаются в пикселях. Вы берёте значения в пикселях из исходника дизайна, а bettertext самостоятельно пересчитывает размеры шрифтов из px в em, а высоту строки в безразмерную величину. По-умолчанию 1em = 16px.

    — Что делать, если я хочу изменить размер шрифта root элемента и 1rem ≠ 16px?

    Если вы пользуетесь техникой «62.5%» и у вас 1rem = 10px, то в настройках bettertext надо переопределить скрытую переменную @onerem: 10px . Пример на codepen.

    Поделиться Твитнуть Плюсануть Поделиться Телеграмнуть

    Применение размера шрифта к приоритету div и селектора для * тега

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

    В моем CSS я использовал

    Когда я делаю это, Chromes Element Inspector показывает, что он использует 16px из селектора *.

    Когда я использую

    Это работает, я знаю, что он использует это, потому что это более конкретный селектор, но почему он не выбирает 14px, установленный в селектор #newsletter, он еще ниже в CSS, поэтому он должен иметь приоритет, не делает ли он потому что селектор * по какой-то причине имеет приоритет или не устанавливает размер шрифта на div, но должен ли он быть в селекторе #newsletter p.

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

    Если в этом случае у вас есть какой-либо элемент ( p в этом случае) внутри другого элемента (элемент с > в этом случае), то стиль внутреннего элемента всегда основывается на его собственных свойствах CSS. В этом случае единственным правилом, которое присваивает font-size внутреннему элементу, является * < font-size: 16px; >* < font-size: 16px; >поэтому он вступает в силу. Все, что вы устанавливаете на внешние элементы, не может повлиять на это.

    Если вы хотите установить фиксированный размер шрифта для элемента с > и всеми его потомками (внутренними элементами), вы можете установить

    Более структурированный подход

    Если вы в противном случае не задали размер шрифта, то элементы будут наследоваться от body или от элемента с >, в зависимости от их размещения.

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

    Топ-пост этого месяца:  Как создать архив в Python в формате zip используемые команды и пример работы
    Добавить комментарий