• портфолио
  • блог
  • лайфлист
  • обо мне
  • фейсбук
  • телеграм
  • инстаграм
  • Идеальная длина строки и высота линии в веб-дизайне

    Продолжая тему свободного пространства в дизайне помним о типографике. Конкретно о длине строки и длине заголовка.

    Для чтения текста на десктопе рекомендуют использовать длину от 60 до 80 символов или 10-12 слов в строке. Если строка длиннее — читать некомфортно. Помним, что это зависит от языка — в русском слова длиннее в английском короче.

    Сразу стоит вспомнить о забавном заблуждении

    Миллиарды дизайнерских статей вторят, что шрифт с засечками легко читается и направляет взгляд, но это не так. Когда мы читаем или смотрим на объект глаза не движутся плавно. Глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами. Это происходит даже когда фокусируемся на одной точке.

    l2deiunml5_p2bjcv_bpneoqriu.png

    Видео про саккады

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

    Интерлиньяж почти всегда нужно настраивать. На десктопе по умолчанию используют примерно 120%, но не всегда этого достаточно для комфортного чтения. Рекомендуемые значения 130-140%.

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

    120.png

    120% — длинные строки и небольшая высота строки — сложно читать и легко потерять то место где продолжить если отвлеклись. Я уже не говорю о том если читать находу.

    Высота строки 160% идеально подходит для широкого столбца текста.

    160.png

    120% для мобильного экрана тоже слишком мало, а вот 140% уже более менее ок.

    140.png

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

    Заголовки

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

    Пример: Слева высота строки 120% и выглядит более компактным и целостным. С правой стороны интерлиньяж у заголовка 150% и заголовок разваливается.

    Good2.png

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

    • 72
    • 20 января,
    • Дизайн

    Популярное

    В тревожное время
    Девять законов нейроэстетики
    Что такое хороший дизайн?
    Январь. Красивое.
    Свободное или контрпространство в дизайне
    Декабрь. Красивое.
    Хуманитас Инжиниринг
    Стамбул во время карантина

    По работе пишите на alexiermakov@gmail.com

    Мои соц. сети — Instagram, Dribbble, Behance, Facebook и ВКонтакте.

    Портфолио Блог Лайфлист Обо мне Почта Телеграм Инстаграм