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


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

Типографика для сайтов 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, пишите на почту [email protected]

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

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

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

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

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

5 принципов работы с типографикой

Перевод статьи “Typography Guidelines for Creating Balanced Website Layouts” от дизайнера Jake Rocheleau, который рассказал об основных принципах работы с типографикой для создания сбалансированного дизайна.

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

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

Вертикальное расстояние

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

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

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

Иерархия контента

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

Заголовки h1 должны быть более заметны, чем заголовки второго и третьего уровня (h2 и h3). Это правило используется не всегда, в определенных случаях от него можно отступить, но обычно для лучших результатов полезно соблюдать пирамидальную структуру элементов HTML. В параграфах важно создать единое оформление для выделенного текста, жирного текста и ссылок.

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

Дифференцируем разделы

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

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

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

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

В веб-дизайне лучше указывать размер текста в относительных единицах измерения. Вы можете использовать «%» или «em», чтобы обеспечить текст необходимой гибкостью и адаптивностью. Автор статьи предпочитает использовать «em», так как этот параметр зависит от DPI (количества точек на дюйм) и разрешения монитора пользователя. Обычно он базируется на размере шрифта, установленном по умолчанию в браузере.

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

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

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

Контраст и подбор цвета

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

Вы вводите значение цвета его названием (black, white, grey) или же цифровым значением HEX/RGB для текста и для фона. Более того, вы даже можете указать повторяющийся фон при помощи url(). Вы сразу же сможете увидеть как будут смотреться цвета и насколько они контрастны. Также степень контрастности будет указан на экране в диапазоне от 0 до 100.

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

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

Полезные для работы с CSS правила: цветовые значения, типографика и много другое

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

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

Работа над ней — очень важный процесс, он требует внимания и умения «копаться в деталях», это особый труд и довольно кропотливый. Любой продукт с недоработанным текстом будет выглядеть плохо, какие бы интересные и качественные не были бы в нем картинки.

Как начинающему дизайнеру определить качество типографики? Главное свойство хорошо cверстанного текста — незаметность, лаконичность. При чтении вам ничто не должно мешать воспринимать информацию.

Существует понятие – « Серебро набора» . Это свойство хорошо сверстанного текста, который смотрится в проекте ровным и цельным серым блоком. Эта самая равномерность и называется «Серебром набора». Для текста, особенно рассчитанного на линейное чтение, это незаменимое качество.

Цветовое оформление в CSS

Данная статья учебника будет посвящена работе с цветом в CSS, будут рассмотрены способы указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов.

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

Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. Более подробно работу с задним фоном элемента, мы будем с Вами рассматривать в статье «Работа с фоном элемента в CSS». И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).

Шестнадцатеричные значения

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

Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в (минимальное значение):

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

Цветовая модель RGBA

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

  • R означает Red (красный)
  • G означает Green (зеленый)
  • B означает Blue (синий)
  • A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от до 1, где:

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

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

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

Рис. 47 Пример задания цвета с помощью RGBA в CSS.

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.

Цветовые модели HSL и HSLA

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

  • Hue — тон.
  • Saturation — насыщенность.
  • Lightness — осветленность.
Топ-пост этого месяца:  JavaScript редактор кода

Система HSL использует следующий синтаксис:

Первое значение – это тон, который указывается в градусах от 0° до 360° . Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.

Красный цвет соответствует значениям — 0° и 360° , желтый — 60° , зеленый — 120° , голубой — 180° , синий — 240° , фиолетовый — 300° и так далее.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100% , где 0% — полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0° ):

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

Рис. 49 Пример задания цвета с помощью HSL в CSS.

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

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300° ):

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

Рис. 50 Пример задания цвета с помощью HSLA в CSS.

Предопределённые цвета

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

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

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

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

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

Типографика веб-дизайна: основные понятия и современные тренды

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

Основные правила типографики

  1. Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
  2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
  3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
  4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
  5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
  6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

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

Приведем несколько основных правил использования шрифтов на сайте:

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

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

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

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

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

Какие цвета можно сочетать? Используйте базовые принципы сочетания цветов. В этой схеме нет черного и белого — они априори сочетаются с любым цветом. Наиболее контрастным, кстати, считается сочетание черного и желтого. Взять наш “Тинькоф-журнал” — они использовали это правило на все сто.

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

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

Оформление текста

“Крылья, ноги, главное — хвост!” — если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

4. Ограничьте длину строки. Помните базовое правило типографики: текст важнее графики, особенности дизайна не могут диктовать условия верстке текста. Если дизайн вашего сайта предполагает длиннющую строку — проще поправить дизайн, чем заставить читателя дочитать ее до конца. Читабельность превыше всего!

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

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

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

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

Большие шрифты

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

Сломанные сетки

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

Больше движения!

Активно используйте гифки, анимацию, 3D-типографику — это оживляет сайт, привлекает внимание посетителей и выделяет ваш дизайн на фоне других. Особенно хорошо эти приемы работают при создании фирменного стиля сайта и персонализации личного бренда. За рубежом анимация давно популярна — у нас еще не все оценили ее возможности. Не упускайте шанс!

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

Типографика для веб

Приветствую всех, сегодня в Дизайн Мании гостевой пост про Типографику, представлен Лежневым Дмитрием (aka meekman), который по совместительству является генеральным директором компании Cifronet.

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

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

Тут же возникла проблема с компаниями разработчиками и дистрибуторами шрифтов: большинство из них отказались выдавать лицензии на использование своих raw-шрифтов на веб-страницах, опасаясь пиратства. Введение свойства @font-face усилило такие опасения, заставив обе стороны искать удовлетворительные для всех решения. Некоторые из них уже доступны, некоторые еще в стадии разработки. Это расширенные лицензионные соглашения с конечным пользователем шрифтов, а также сервисы третьих сторон, предоставляющие встраиваемые шрифты, например Typekit, Typotheque и Kernest. Веб-дизайнеры более свободны в выборе шрифтов, а шрифтовые компании и разработчики получают деньги за свою работу. Проблема решена? В принципе да.

Совершенно новый мир

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

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

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

Контекст и значение

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

Топ-пост этого месяца:  Сочетаем адаптивный дизайн и мобильные шаблоны.

Широко используемые системные шрифты, например, Georgia, Verdana и Arial, настолько вездесущи, что уже не ассоциируются ни с чем кроме «веба». Будучи неспособными добиться желаемого эстетического эффекта из-за скудного выбора шрифтов, мы имели время сосредоточиться на читабельности. Во многом из-за этого работа для веб строилась по принципу «сделать и забыть», частично из-за стремительного развития полиграфии, а также из-за того, что в веб-дизайне нет таких точных правил типографики, как в дизайне полиграфической продукции. Не следовать правилам — большая роскошь, но иногда это вполне реально, например при создании креативных иллюстраций или обоев на рабочий стол с текстом или буквами.

Муки выбора

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

Знаменитый дизайнер шрифтов Зузана Личко (Zuzana Licko) однажды сказала: «Каждый лучше читает то, что читает чаще». Речь идет о приобретенных навыках. Это объясняет, почему выбор шрифта самая сложная задача типографа: чтение это субъективное относительное действие. Для прочтения длинного абзаца, написанного готическим шрифтом, который считался «читаемым» столетия назад, понадобится намного больше времени, чем если бы использовался простой шрифт из семейства Serif или Sans Serif, независимо от того, читаем мы с листа или с монитора.

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

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

Отличное руководство по выбору и комбинированию шрифтов

Задумываясь о покупке новых шрифтов, следует помнить, что выгодным приобретением станут известные шрифты. Выбирайте такие, которые подходят под общее понятие читабельности – те, которые мы используем и видим ежедневно. Пусть это будут шрифты, лежащие в «диапазоне читаемости» (возможно, следует использовать прямоугольную систему координат). Чем дальше отходить, тем сложнее будет читаться дизайн. Кстати, не стоит забывать, что многие шрифты занимают промежуточное положение между читаемыми и нечитаемыми.

Контраст

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

Работа с основным текстом

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

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

Прочти меня!

При уменьшении текста немного увеличенная х-высота и контраст могут иметь большое значение.

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

Суть сообщения

В этом постере двойного сеанса фильма «Грайндхауз» использовано много различных шрифтов и стилей, но сделано это с целью имитации постеров так называемого «эксплуатационного кино» конца 1970-х.

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

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

С засечками и без засечек

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

Одним из самых простых способов достижения баланса и контраста в типографике является комбинирование шрифтов семейства Serif и Sans Serif. Эта простая и легко подбираемая комбинация при правильном выборе шрифтов способна заставить текст выглядеть гармонично.

Это не строгое правило, однако шрифты одного и того же дизайнера иногда хорошо сочетаются вместе. Как в двух картинах одного и того же художника, в двух шрифтах одного дизайнера прослеживается его рука. Например, шрифты Эрика Грилла (Eric Gill) Perpetua и Gill Sans хорошо сочетаются, так как имеют несколько одинаковых штрихов и линий. Также хорошо сочетаются шрифты, специально разработанные для комбинирования, например Meta Sans и Meta Serif.

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

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

Baskerville и Futura, «old» противопоставлено «new.»

И наоборот, два очень разных шрифта могут создать новое значение или интересное противопоставление. Комбинация переходного шрифта , например, Baskerville, с более современным, например, Futura, может очень интересно выразить идею противопоставления старого новому.

Экспериментируйте со стилями

В семействах наподобие Proxima Nova от Марка Саймонсона (Mark Simonson) шрифты имеют несколько типов интенсивности, что обеспечивает различные гибкие типографические возможности при создании дизайна.

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

В библиотеку!

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

Денежные вопросы

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

Доверяйте интуиции

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

Только вперед!

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

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

Перевод статьи: On Web Typography (Джейсон Санта Мария).

От себя хочется поблагодарить и сказать спасибо за перевод Лежнева Дмитрия (aka meekman), который предоставил его специально для Дизайн Мании. Получилось, как мне кажется, достаточно интересно — лично я никогда не задумывался особо на типографикой проекта, выбирая для сайта стандартные шрифты, а тут оказывается все намного сложнее. Дизайнерам и верстальщикам будет очень полезно почитать. Дмитрий, кстати, тоже в какой-то степени причастен к веб-дизайну, поскольку его компания Cifronet занимается разработкой сайтов — умной инвестицией для любого бизнеса!

Визуальная иерархия в типографике

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

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

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

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

ИСПОЛЬЗОВАНИЕ РАЗМЕРА ДЛЯ ПОВЫШЕНИЯ ВИДИМОСТИ

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

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

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

ЦВЕТ И КОНТРАСТ: ПРИВЛЕЧЕНИЕ ВНИМАНИЯ ЗРИТЕЛЯ

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

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

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

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

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

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

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

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

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

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

ИЕРАРХИЯ ЭЛЕМЕНТОВ В ТИПОГРАФИКЕ

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

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

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

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

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

Особенности цветового формата CSS HSL для дизайнеров и верстальщиков

Существует много форматов цветов в цифровом пространстве. В CSS их три: RGB, HEX, HSL. Гораздо чаще используются верстальщиками именно два первых варианта. Но что скрывает третий? В чем его особенность? Об этом и не только рассказываем в материале ниже.

В течение длительного времени для работы с цветом в CSS многие верстальщики используют либо шестнадцатеричную систему HEX или RGB. И у каждой такой системы есть свои недочеты и настройки, свои преимущества и удобства, но бывают случаи, когда работать с ними не слишком-то удобно. Непросто становится быстро подобрать контрастный цвет или гармонично сочетающийся оттенок с имеющимися цветами в палитре. А если отойти от «стандарта» и попробовать использовать иной цветовой формат?

Как известно, в CSS их три: hex, rgb и hsl. Первый формат используется чаще, второй – умеренно, третий – редко. Но что именно он скрывает в себе? Для чего был создан? Функция hsl()появилась в CSS давно, но последние изменения датируются июнем 2020 года, поэтому неудивительно, что её еще мало кто использует. Раньше и браузерами-то формат не особо поддерживался. В то же время в графических редакторах HSL и вариант HSB давно встречаются и многим знакомы.

Считается, что HSL лучше и реалистичнее передает цвета на экране. С его помощью можно даже подобрать те оттенки, которые в RGB настроить довольно сложно. Если же говорить об интуитивности формата, то смотря на значение hsl(), можно гораздо быстрее представить, о каком цвете идет речь и даже становится более понятным, зачем вообще нужно цветовое колесо, о котором мы неоднократно упоминали. Со значениями RGB сложнее – цвета смешиваются, образуя оттенки, поэтому волей-неволей, но приходится открывать тот же Photoshop и проверять/узнавать значение. Или использовать режим разработчика в браузере, о котором тоже рассказывали отдельно, поэтому останавливаться на нем уже не будем.

В то же время использование цветового формата HSL лучшим считается именно тогда, когда это действительно необходимо. Особенно, если дизайн сайта содержит обилие оттенков, переходов, градиентов и так далее. Но если вы используете черный и белый с серым или аналогичные «скромные» варианты, то HSL мало чем сможет вам помочь; не сможет он раскрыть своих возможностей.

Тон, насыщенность, светлота

Сразу оговоримся, что в аббревиатуре HSL иногда параметр Lightness переводят как Яркость или Светлость. Это несколько… некорректно, так как первое существует в отдельном формате цветов HSB (Brightness). Здесь используется параметр Яркости (изменение в сторону черного), а в HSL (Lightness) – Светлота (изменение цвета в сторону белого). Светлость – более «разговорное» понятие. О разнице Яркости и Светлоты мы рассказывали отдельно.

В CSS функция hsl() выглядит так:

Три параметра в последовательности: тон, насыщенность, светлота (освещенность). Существует также и вариация функции вида hsla(). Разница с оригинальной в добавление альфа-канала (прозрачности).

Почему же формат HSL проще в понимании, в отличие от иных схем? Вспомним цветовое колесо. Его удобно запомнить и по нему легко ориентироваться. Так как это круг, то диаметр его 360 градусов. Стандартное колесо состоит из 12 цветов, поэтому в градусном варианте выглядеть оно будет таким вот образом.

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

Тон – первый параметр – определяет цвет. То есть, это один из цветных треугольников. За начало отсчета взят красный цвет = 0 0 и он же 360 0 . После красного идет желтый цвет = 60 0 , а значит, оранжевый находится между ними = 20 0 /30 0 /40 0 . Аналогично и с другими цветами, и промежуточными оттенками.

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

Насыщенность

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

Светлота

Суть работы формата HSL – в подкрашивании всех цветов белым. Если попробуете ввести разные значения в режиме разработчика, то заметите, что третий параметр изменяться будет всегда. Это напоминает работу с акварельными красками. Если требуется темный цвет – добавляется черный, если светлый – белый. Ориентироваться в данном параметре тоже несложно. При 50% – оттенок оригинальный, при 51% и далее – он становится светлее, при 49% и до 0 – темнее.

В теории цвета оттенок – смесь цвета с белым или черным. Тон получается путем смешивания с серым либо тонированием и затенением. Смешивание цвета с любым нейтральным (черный, серый, белый) уменьшает красочность и цветность, в то время как оттенок остается неизменным.

Таким образом, суть формата HSL в том, что оригинальный, чистый цвет – это любое градусное значение от 0 до 360 при насыщенности в значении 100% и светлоте – 50%. Логично, что настроить или определить уже имеющийся цвет становится проще, чем, например, значение rgb(245,128,36).

Гармония цвета

Одним из главных преимуществ HSL является то, что создание цветовой гармонии (сочетания) похоже на разнообразие кусочков торта. Мы всегда рассматриваем их, выбираем понравившийся, потом думаем, каким полакомимся следующим и так далее. Цветовой круг разбит на цвета аналогичным образом – напротив друг друга расположены дополнительные цвета. Поэтому, если мы выбрали некоторый цвет и хотим узнать его дополнительный – просто добавим (или вычтем) к значению выбранного тона 180 0 . И совершенно не страшно, если значение будет больше 360. Формат HSL способен высчитать и пройтись по колесу, сколько будет необходимо. В данном случае он определил, что это будет желтый, находящийся напротив синего.

Гармоничных вариаций сочетания цветов (схем) много. Аналогично тому, как выше мы подбирали противоположный цвет, триадические цветовые схемы могут быстро создаваться путем добавления/вычитания 120 0 . Аналоговые комбинации создаются с помощью 30 0 -го разделения. Если же речь идет о монохромной палитре, то и её в формате HSL несложно создать. Достаточно выбрать цвет, а затем добавлять/убавлять Светлоту, чтобы получить тона и тени для данного оттенка. Белый цвет – конец пути!

Пользовательские свойства CSS

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

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

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

Возможен вариант использования пользовательских свойств CSS, как значения внутри другой переменной. И, разумеется, не стоит забывать о функции calc(). Сочетая её с hsl() можно добиться создания и настройки отличных цветовых схем и тем на сайте. Один из вариантов совместной их работы может выглядеть примерно так:

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

Перекодировка

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

Можно установить плагины для SublimeText, которые изменят все значения hex\rgb на hsl за считанные секунды. Вариантов много, есть и плагин ColorConvert.

И, конечно, важно еще заметить тот факт, что формат HSL поддерживается теперь уже практически всеми браузерами, кроме совсем стареньких версий IE.

Последние мысли

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

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

Вообще, HSL – мощный формат, особенно в сочетании с функциями CSS. Но если сравнивать HSL и RGB, то первый отличается своей интуитивностью. Можно легко догадаться по значению треугольника, о каком цвете идет речь, а затем увеличить или уменьшить количество серого и белого цветов. Кроме того, легче создавать цветовые наборы одного тона, изменяя только светлость и насыщенность. Какой именно формат использовать в веб-дизайне и верстке – значения не имеет.

Информационный портал по безопасности

Типографика и современный CSS

Пока одни новые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие многим кажутся недостойными внимания и мало освещаются в интернете. Взять хотя бы свойства, отвечающие за типографику. Многие из них работают уже давно, но известны немногим. А зря, ведь они тоже могут быть весьма полезными и эффектными. Давайте же исправим эту несправедливость и осветим то, что обычно остается в тени.

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

Капитель (font-variant: small-caps)

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

  • normal — значение по умолчанию;
  • inherit — наследует значение родителя;
  • small-caps — то, что нас интересует. Отображает все строчные символы как заглавные, но уменьшенного размера.

Выглядит это весьма интересно:

Поддерживается font-variant пока что только в Firefox и Safari, поэтому использовать его как основную фишку дизайна не стоит.

Поиграться с другим текстом или шрифтом можно здесь:

Продвинутое оформление подчеркиваний (text-decoration-skip)

О свойствах text-decoration-style и text-decoration-color я уже писал . Но существует еще одно: text-decoration-skip. Оно включает пропуск выносных элементов в подчеркиваемом тексте, что выглядит довольно-таки эффектно.

Свойство может принимать несколько значений, но более-менее работают только:

  • ink — подчеркивающая линия пропускает буквы, заходящие за базовую линию;
  • objects — значение по умолчанию. Линия пропускает такие объекты, как изображения и inline-block элементы

Работает в Chrome, Opera и Safary (причем, Safari на маке по-умолчанию использует text-decoration-skip: ink).

Оформление кавычек (quotes)

А вы знали, что в CSS можно задать формат всех кавычек, использующихся на сайте? Для этого есть специальное свойство quotes. Оно применится к содержимому тега , а также к псевдоэлементам со свойством content равным open-quote или close-quote.

Свойство давно поддерживается всеми браузерами.

Тюнинг многоколоночных текстов (orphans и widows)

Свойства orphans и widows можно назвать аутсайдерами. Вот, например, что об одном из них написано в документации Mozilla:

Свойство widows CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на paged носителе. В типографике, «висячая» строка (widow) это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства widows позволяет предотвратить висячие строки.

На нестраничных носителях, таких как screen, CSS свойство widows не имеет эффекта.

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

Но это не все, на что способны эти свойства! Почему-то мало где описано, что они работают и для многоколоночных макетов!

Сразу возникает вопрос: «а что если для блока указать оба свойства? Не начнут ли они конфликтовать?». В таких случаях widows имеет приоритет и учитывается в первую очередь.

В контексте стилизации страниц свойства давно работают везде, кроме, почему-то, Firefox-а. Также, применительно к стилизации колонок они не работают еще и в IE/Edge.

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

Немного о типографике в CSS3

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

Свойство font-stretch

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

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Если вы указываете одно из значений, а оно шрифтом не поддерживается — браузер покажет ближайшее, которое УЖЕ, чем выбранное. Учитывайте это при разработке.
Поддержка браузерами: как ни странно, но только IE9+ поддерживает это свойство.

Свойство font-size-adjust

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

В данном случае размер строчных букв будет умножен на 0,4, а заглавная останется размером 20px.
Поддержка браузерами: только Firefox 3+ поддерживает это свойство.

Свойство font-kerning

Самое бессмысленное из свойств спецификации CSS3, ведь есть letter-spacing , который позволяет регулировать расстояние между буквами текста. Если в ваш шрифт встроена поддержка регулировки расстояния — тогда это свойство позволяет её включить. Если шрифтом эта фича не поддерживается — никакого эффекта не будет
Поддержка браузерами: неизвестно, но мне кажется, ни один браузер этого абсурда поддерживать не будет. Я не нашел ссылки на поддержку ни в одной спецификации. Если у вас есть другая информация — поделитесь, с радостью дополню пост.

Альтернативный font-weight

Старое, доброе свойство. Все наверняка с ним сталкивались, и не раз… Скорее всего, это было что-то вроде «normal» или «bold«. Но это далеко не все значения этого свойства, список значительно шире:

  • bolder
  • lighter
  • 100 (Thin)
  • 200 (Extra Light / Ultra Light)
  • 300 (Light)
  • 400 (Normal)
  • 500 (Medium)
  • 600 (Semi Bold / Demi Bold)
  • 700 (Bold)
  • 800 (Extra Bold / Ultra Bold)
  • 900 (Black / Heavy)

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

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

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

Добавить комментарий