Справочник DESIGN/HTML/CSS

Мой Справочник | WEB-DESIGN | Типографика

Рекомендации:

Онлайн-сервисы с шрифтами

Шрифтовые пары

Заголовки

Подзаголовки

Наборный текст

font-styles.png fonts-pair.png
Терминология
Гарнитура - семейство шрифтов с общими стилистическими особенностями

Шрифт - набор символов, составляющие единую стилистическую и композиционную картину 		font-family: "Open Sans"; Шрифты нужно выбирать осознанно. Учитывать задачи, аудиторию, эмоции, общий дизайн и концепцию.
К шрифтам НЕ НУЖНО применять большое количество графических эффектов, считается дурным тоном (такие как градиенты)
Антиква (serif) - шрифты с засечками font-family: serif;
font-anticva.jpg "Times New Roman", Times,
Georgia,
"Palatino Linotype",
"Hoefler Text",
Garamond, serif;

Старый стиль (Vollkorn, Stoke, Ladoga, Narevik)

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

Сказочность, историчность, книжность.

Переходный стиль (Baskerville, Aelita)

Больший контраст. Исчезает наклон и каллиграфичность. Больше геометрии. Угловатые засечки.

Классика, эстетика, традиционность.

Современный стиль (Didot Bodoni, Didona, Yeseva One)

Очень сильный контраст.

Мода, глянцевость, превосходство.

Брусковый стиль (Roboto Slab, Geometric Slabserif, Pragmatica, Clarendon, Traktir, Titla brus)

Брусковые засечки.

Надёжность, устойчивость
Гротеск (sans-serif) - шрифты без засечек font-family: sans-serif;
font-grotesk.jpg
Arial, Verdana, Tahoma,
Helvetica, Geneva,
"Lucida Grande",
"Gill Sans",
"Lucida Grande",
"Trebubuchet MS",
"Century Gothic", sans-serif;

Старый стиль (Franklin Gothic)

Небольшой контраст, моноширинные, грубая форма.

Грубая сила, реализм, революция

Новый стиль (Helvetica)

Минималистичная форма. Высокий строчный знак

Практичность, стандартность, нейтральность

Геометрический стиль (BARON NEUE)

Близкий геометрическим формам, круг, квадрат, треугольник, прямоугольник.

Минимализм, простота, лёгкость, новизна

Гуманистический стиль (Optima)

Каллиграфичный штрих

Лёгкость, мягкость, утончённость, эстетика

Моноширинные
(monospace)
ширина символа = const 		font-family: monospace;
"Courier New",
Courier, Lucida Console,
Monaco,
"Comic Sans MS",
"Copperplate Light",
"Copperplate Gothic Light",
"Market Felt", monospace 		Для кода, шифров, серийных номеров и т.д.
Рукописные (script) fonts-script.jpg

Перо (Bickham Gothic)

Имитируют написание остроконечным или острым пером

Аристократия, премиальность

Связные (Bukhari Script)

Имитируют написание разными инструментами с разным контрастом штриха

Винтаж, крафт, поделки, мягкость

Несвязные монолинейные (Bad Script)

Имитируют написание карандашом, маркером, кистью

Различные эмоции

Декоративные (decorative) fonts-decorative.jpg

Для титульных листов, ярлыков, афиш, плакатов, упаковок и т.п.
Кегль - размер высоты буквы font-size: 16px; typograph1.jpg
Кёрнинг - интервал между буквами в зависимости от их формы

Трекинг - изменение кёрнинга 		letter-spacing: 1px; typograph2.jpg
Трекинг лучше использовать только для ПРОПИСНЫХ букв.
0 - кёрнинг выключен
Optical - алгоритм браузера
Metrics - родные алгоритмы кёрнинга, заданные разработчиками
Интерлиньяж - растояние между строк line-height: 20px; typograph3.jpg
Оптимальное значение для лучшего чтения в диапозоне
от 120-145% от кегля.
Чем шире абзац - тем интерлиньяж должен блиде к 145%.
Должен быть больше пробела.
Элементы списков должны иметь дополнительные отступы.

Должен быть всегда больше высоты строчного и прописного знаков.
Длина строки - кол-во символов в строке Оптимальное значение 45-90 символов, включая пробелы.
Графема - базовая форма знака, скелет буквы Есть целая наука и терминология по изготовлению шрифтов
Начертание - возможные варианты рисунка наборного шрифта одной гарнитуры font-weight: bold;
font-style: italic; 		Основное, капитель, старостильное, прямое, наклонное, курсив, жирность
typograph6.jpg
Висячие слова - плохой тон. Одинокое слово в конце абзаца, союзы и предлоги, оставшиеся в конце строки. Нужно использовать неразрывные пробелы  
Выключка - выравнивание текста. text-align: left;
Гиперссылка Должна быть достаточно длинной для удобства нажатия, но не очень. Если сслылок в абзаце много, то их лучше выносить отдельно под абзац.
Тире (-) - орфографический знак, короткая чёрточка (серо-буро-малиновый)

1—8 классы (без пробелов)

Термин — определение (с пробелами)

— Привет! (диалоги)

Тире НЕ ПЕРЕНОСИТЬСЯ на новую строку, а остаётся на предыдущей 		(–) короткое
(—) длинное
Дефис (-) - пунктационый знак, длинная чёрточка («назвался груздём - полезай в кузов»)
Кавычки (« », " ", ' ') «Кавычки в "кавычках"»
Шрифт Avabella - красивые кавычки 		В текстах используются кавычки-ёлочки
Если кавычки в кавычках, то внешние ёлочки, а внутренние лапки-запятушки(двойные).
Правило внутреннего и внешнего
Внешние отступы должны быть больше внутренних Поля -> Заголовки -> Абзацы -> Элементы typograph4.jpg
Швейцарская типографика
Гарнитуры являются голосом. Кегль показывает носколько громко или тихо мы говорим. Начертание задаёт тон общения. typograph5.jpg Большие заголовки, фотографии вместо иллюстраций, выравнивание только по левому краю.
Цвет текста всегда чёрный. Цвет фона и илюстраций всегда один яркий.
Цифры
Правила для цифр
  1. Для цифровых данных лучше подойдут моноширинные гарнитуры;
  2. Цифровые данные должны быть выровнены по правому краю;
  3. Текст в первой колонке - по левому;
  4. Заголовок в колонке - по той же стороне, что и контент под ним.

Поля

forms1.jpg forms2.jpg

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021