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

02

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

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

В исключительных случаях можно выравнивать текст по правой стороне

03

Разделяем абзацы по английски

Русский абзац использует красную строку,

но без отступов между абзацами

Английский абзац - это абзац без отступа у первой строки, но с разделением самих абзацев отступами.

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

There is no design without discipline. There is no discipline without intelligence.

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

04

Межстрочное расстояние

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

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

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

05

Визуальная иерархия

Есть несколько методов создать визуальную иерархию и расставить акценты в нашем дизайне.

ОСНОВНЫЕ МЕТОДЫ РАССТАНОВКИ АКЦЕНТОВ

Размер, толщина, цвет, расположение

06

Длина строки

Наличие верного количества символов в строке является ключом к удобству и читаемости нашего текста

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

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

Оптимальное количество символов в строке для десктопов (настольных компьютеров и ноутбуков) - 40-70 символов.
Для мобильных устройств - 30-40

07

НИКОГДА НЕ ИСПОЛЬЗУЙТЕ МНОГО КАПСА

НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ПРОПИСНЫЕ БУКВЫ ДЛЯ ВСЕГО ТЕКСТА В СТРОКЕ

НАДО ТАК

Короткий надзаголовок, написанный капсом - лучший вариант

Ну и конечно такой вид написания лучше всего подходит для надзаголовков, иногда заголовков и каких то названий. Очень часто он встречается в кнопках.

ТИПОГРАФИКА

ЗАКАЗАТЬ

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

Заголовок

Используем жирный или полужирный вариант начертания для заголовка

размер шрифта выбираем в районе 40

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

Используем остальные варианты начертания за исключением жирного и полужирного

размер шрифта выбираем примерно в районе 20-26.

НАДЗАГОЛОВОК

Используем разные варианты для выделения этого элемента. Используем КАПС

размер шрифта выбираем примерно до 22. можно и больше - смотрим по ситуации.

The best ideas come as jokes. Make your thinking as funny as possible.

текст

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

Мобильные устройства

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

Тексты могут уменьшиться до 14.

Меньше уже не прочитать