Які стандартні співвідношення для типографії в Інтернеті?


25

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

  • Розмір шрифту
  • Лінія-висота
  • Ширина лінії
  • Розміщення ліній

Зверніть увагу на текст абзацу та заголовка у своїх відповідях. Також будь-які дослідження ефективності різних коефіцієнтів чи показників були б дуже корисними.

Відповіді:


18

Елементи типографічного стилю Роберта Брінгхерста - це ретельна та чудова довідка для таких речей. Це довго, але дуже цінно.

Дуже багато дизайнерів рекомендують стандартну сітку ліній, щоб лінія + прокладка завжди вміщувалася в межах, скажімо, 16 пікселів. Отже, все, що менше, було б з висотою лінії 16, все вище, що мала б висоту лінії 32.

Ідеальна довжина рядка для читання тексту вважається 45 символами, а іншими - 55-75.

Тут є загальні середні веб-сайти: типографічні моделі дизайну та найкращі практики


1

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

Перетворюючи 12pt в пікселі, ми отримуємо базовий шрифт 16px.

Більшість стилів таблиці за замовчуванням у веб-переглядачах використовують 16 пікселів для тексту абзацу, оскільки ви можете перевірити їх у DOM самостійно або прочитавши https://www.w3.org/TR/CSS21/sample.html та http: // списки. 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 і ласкаво просимо на GD.SE! У нас є суворі правила щодо спаму та відповідей у ​​посиланнях. Мені б не хотілося, щоб ваша відповідь була позначена прапором. Ви повинні відредагувати своє питання, щоб узагальнити основні моменти статті.
цікаво
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.