Каковы стандартные соотношения для типографии в Интернете?

25

Разрабатывая веб-дизайн, я часто стараюсь, чтобы моя типография была пропорциональной и последовательной. Однако я не смог найти каких-либо определенных статей или ресурсов о том, какие соотношения и размеры следует использовать. В частности, каковы рекомендуемые или стандартные методы для:

  • Размер шрифта
  • Высота линии
  • Ширина линии
  • Межстрочный интервал

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

Виртуозы Медиа
источник

Ответы:

18

« Элементы типографского стиля» Роберта Брингхерста - исчерпывающий и замечательный справочник для подобных вещей. Это долго, но очень ценно.

Многие дизайнеры рекомендуют стандартную сетку линий, чтобы строка + отступ всегда помещалась, скажем, в 16 пикселей. Поэтому все, что меньше этого, будет иметь высоту строки 16, а все, что выше, будет иметь высоту строки 32.

Идеальная длина строки для чтения текста составляет 45 символов для некоторых и 55-75 для других источников.

Здесь есть некоторые общие средние сайты: типографские шаблоны дизайна и лучшие практики

Damon
источник
1

Я бы сказал, начните с абзаца в 16px и используйте последовательность Фибоначчи, чтобы вычислить остальное. Похоже, что основные браузеры используют эту логику. В течение многих лет (для будущих исследований, используя «Элементы типографского стиля: версия 4.0» Роберта Брингхерста, Хартли и Маркса), было установлено 12pt для шрифта 10pt.

Конвертируя 12pt в пиксели, мы получаем базовый шрифт 16px.

Большинство таблиц стилей по умолчанию в браузерах используют 16 пикселей для текста абзаца, так как вы можете самостоятельно проверить DOM или прочитав https://www.w3.org/TR/CSS21/sample.html и http: // lists. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Проблема, с которой мы сталкиваемся сегодня, заключается именно в том, что мы говорим о новом типе типографики. Нынешняя веб-типография, которая должна вписываться в различные устройства, полностью отличается от прошлых концепций, таких как те, что изображены в «Элементах типографского стиля» Роберта Брингхерста. Несмотря на то, что это отличная книга, реальность такова, что современному дизайнеру нужен код. Я обычно рассматриваю стандартную матрицу из основных таблиц стилей браузера, создавая скелет HTML-файла с базовым нижним колонтитулом h1, h2, h3, h4, h5, h6, абзац. Я проверяю таблицу стилей браузера, чтобы понять размер стандартного размера пикселя, который они используют высотой строки, и иерархию по заголовкам. До того, как размер веб-типографии регулировался подвижным типом «металл / дерево», но с 1985 года, когда соглашение между Adobe и Apple изменилось. Я считаю, что сегодня основными регуляторами типографских концепций являются Apple, Safari, Windows с Internet Explorer, Chrome, Firefox ... Вам придется взглянуть на их таблицы стилей браузера, чтобы приспособить вашу типографику к тому, что фактически будет отображаться и разные устройства. Вы все равно должны следовать практикам из «Элементов типографского стиля» Роберта Брингерста, которые являются отличной книгой, или следовать системе последовательностей Фибоначчи. Я обычно в курсе изменений в таблицах стилей браузеров и читаю спецификации w3 здесь: Вы все равно должны следовать практикам из «Элементов типографского стиля» Роберта Брингерста, которые являются отличной книгой, или следовать системе последовательностей Фибоначчи. Я обычно в курсе изменений в таблицах стилей браузеров и читаю спецификации w3 здесь: Вы все равно должны следовать практикам из «Элементов типографского стиля» Роберта Брингерста, которые являются отличной книгой, или следовать системе последовательностей Фибоначчи. Я обычно в курсе изменений в таблицах стилей браузеров и читаю спецификации w3 здесь:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Я думаю, что в поле «Дизайн» необходимо принять это во внимание, и я считаю, что обучение в практике не обновляется с текущие реалии. Вы также можете прочитать больше здесь в моем блоге: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/

EstelaG
источник
Привет @EstelaG и добро пожаловать в GD.SE! У нас строгие правила для спама и ответов в ссылках. Я бы не хотел видеть ваш ответ помеченным. Вы должны отредактировать свой вопрос, чтобы суммировать основные моменты статьи.
любопытно