Правильно ли расставлены интервалы вокруг моих типографских элементов? [закрыто]

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

  • используется шрифт Roboto Black и Regular
  • раздел имеет поля сверху и снизу 50px
  • заголовок 36px
  • заголовок имеет нижнее поле 30 пикселей, начиная с подчеркивания (желтая линия)
  • абзац имеет размер 18 пикселей с интерлиньяжем 27 пикселей (высота строки 1,5)
  • дизайн основан на сетке 1170px (Bootstrap), если это имеет какое-либо значение

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

Чтобы немного расширить свой вопрос, я хотел бы знать, достаточно ли места между заголовком и абзацем или оно должно быть не меньше размера промежутка между двумя абзацами (что составляет 42 пикселя).

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

Явных ошибок на первый взгляд не вижу. Сероватый основной текст может быть немного плохо различим (формы букв немного тонкие), но в целом интерлиньяж, поля, контрастность, неровность справа и т. д. привлекательны; ничего не выглядит тесно. Имейте в виду, что более длинные строки (широкие столбцы) могут быть немного сложнее для чтения, чем более узкие, но ваши не являются чрезмерными. Вероятно, нам нужно увидеть больше всей страницы, чтобы понять, как элементы работают вместе. Желтый акцент привлекает внимание к функции, которая уже выделяется, — жирный заголовок, несколько избыточный — но я не ненавижу его.
Пожалуйста, ознакомьтесь с нашими рекомендациями по критическим вопросам и соответствующим образом отредактируйте свой вопрос.
@ user8356: Текст содержит около 90 символов в строке. Я считаю это слишком высоким.

Ответы (1)

Это всегда в конечном итоге сводится к глазу зрителя. На мой взгляд, вертикальный ритм (и это важная фраза, и вы можете найти ее в Google, чтобы узнать намного больше) в целом выглядит хорошо, но я думаю, что подчеркивание под заголовком выглядит немного тесновато. Я бы открыл это примерно на 5 пикселей. (т. е. добавьте 5px к любому отступу в заголовке, установленному в данный момент)

Однако длина строк немного длиннее. Нацельтесь примерно на 60 символов, тогда как на первый взгляд у вас около 100 символов (я не считал!), поэтому либо увеличьте изображение по отношению к текстовому столбцу, либо просто уменьшите текстовый столбец и не (когда-либо) бояться пробелов.

Один из советов, как заставить типографские сайты по-настоящему петь, — это изучить плагин расстановки переносов на основе jQuery и соответствующий словарь расстановки переносов. Просто случайный совет :)

Спасибо! Отступ в 5 пикселей действительно помог, и теперь вертикальный ритм выглядит намного лучше, даже на мой взгляд. Я также скорректировал длину строки примерно до 70, но теперь текст и изображение занимают по 6 столбцов каждый, а изображение как бы затмевает текст (но более светлое изображение с меньшим контрастом может это исправить).
Рад был помочь, удачи в проекте :)
Правильно ли расставлены интервалы вокруг моих типографских элементов? [закрыто]
СпросиСетьПолитика конфиденциальности1y, 0v