Dev: Design: 2. Sys. Типографика, стили

 

Подборка материала по типографике

Взято из материалов Интернета)

"Привет, друзья!

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

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

 Уверен, вам это будет также интересно:"

Книга: Основы стиля в типографике 
Ресурс: по типографике
Book: The Elements Of Typographic Style - pdf online
Book: Основы стиля в типографике - pdf and download
Online Service: Modular Scale

Выжимка из видео - правила по форматированию текста:
1. Ширина строки - от 45 до 90 символов. Человек читает зигзагообразно:
слишком короткая строка приводит к постоянному перепрыгиванию глаз клиента;
слишком длинная строка приводит к утомлению.
Пример:
Сайт лонг рид - для чтения вдумчивых статей состоит 77 символов.

2. Выравнивание текста по левому краю и добавлять переносы.
Примеры в видео на 6 минуте.

3. Высота строк:
для текста: body {line-height: 1.5;}
для заголовков: body {line-height: 1.2;} (может быть и 1.1 и 1.3 в зависимости от ситуации)
(это пространство над и под строчкой текста).
Это можно определить инспектором в хроме или файер багом при просмотре кода.
Примеры: отрицательные 8.30 минута, хороший пример 8.50 минута 

4. Отступы:
могут быть везде:
от подзаголовка до следующего параграфа;
от шапки текста до первого блока текста;
от картинки одной до другой.
Если делать её кратной высоте строке, который мы установили для основного текста
то на сайте появится гармония, которая на первый взгляд не видна, но она есть.
Пример: 9.50

5. Модульные шкалы:
(Это последовательность чисел, относящихся друг к другу
определённым образом - это Числа Фибоначи и Золотое сечени).
Пример: 11.15
Все цифры можно взять с этой шкалы. См. видео на указанной минуте.
Предлагает использовать несколько модульных шкал. Которыми можно потом пользоваться
Предлагает использовать сервис: http://www.modularscale.com/
тут можно указать размер основного текста, указать соотношение (к примеру тоже самое Золотое сечение)
добавить ещё одно соотношение и выйдет примеры того, какие размеры текстов можно использовать.

6. Гарнитура:
Шрифт надо подбирать под тему сайта.
Скриптовый шрифт будет смотреться не очень для мебельной фабрики,
а рубленный шрифт не будет хорошо смотреться
на сайте цветочного магазина. Ну а если поменять местами - то будет в тему.
О чем надо помнить при выборе шрифта:
1) удобство для чтения;
2) кросс-платформенность;
3) размер в килобайтах;
4) поддержка необходимых языков.

7. Нарушайте правила. Творчество приветствуются!

P.S. ссылки специально подобраны ;)