8 способів покращити друкарню
Багато людей, включаючи дизайнерів, думають, що типографіка - це тільки вибір гарнітури, розміру шрифту і того, чи повинен він бути нормальним або напівжирним. Для більшості людей на цьому все закінчується. Але для отримання гарної друкарні потрібно набагато більше і зазвичай це деталі, які дизайнери часто ігнорують. Ці деталі дають дизайнеру повний контроль, дозволяє йому створювати прекрасні та послідовні з погляду друкарні рішення у дизайні. Хоча все це застосовується для різних типів носіїв, у цій статті ми зосередимося на тому, як їх застосувати до веб-дизайну за допомогою CSS. Ось8 простих шляхів за допомогою CSS покращити типографіку і, отже, загальну зручність дизайну.
Розмір набірного рядка. Для ока читача довгі або короткі рядки стомлюючі. Довгі – руйнують ритм, оскільки читачеві важко знайти наступний рядок тексту. Єдина ситуація, в якій прийнятні короткі рядки – невелика кількість тексту. Для найкращої читабельності довжина рядка має бути між 40 та 80 символами, включаючи пробіли.Для дизайну з однієї колонки тексту 65 символів – ідеальні.
Простий спосіб обчислити довжину рядка – використовувати метод Роберта Брінгхарста (Robert Bringhurst's), який множить розмір шрифту на 30. Тобто, якщо розмір шрифту 10px, множачи його на 30, отримаємо 300px або, приблизно, 65 символів у рядку. Код буде виглядати приблизно як: p font-size: 10px; max-width: 300px; > Я використовую px так як це значно полегшує розрахунки, але можна використовувати і em.
2. Інтерліньяж
Інтерліньяж це простір між рядками тексту в тілі нотатки і він відіграє велику роль для читабельності. Правильне поділ рядків, дозволяє читачеві простішестежити за рядком і покращує зовнішній вигляд тексту. Інтерліньяж також змінює типографічний колір тексту, який є щільністю або тоном композиції. На інтерліньяж впливає безліч факторів: гарнітура, розмір шрифту, його повнота, обставини(?), довжина рядка, відстань між словами тощо. Чим довше рядок, тим більше інтерліньяж. Чим більший розмір шрифту, тим менший інтерліньяж. Хороше правило - встановлювати інтерліньяж на 2-5pt більше, ніж розмір шрифту, залежно від гарнітури. Так що якщо шрифт 12pt, то для веб інтерліньяж повинен бути 15pt або 16pt.
Визначення правильного інтерліньяжу потребує певної спритності, але нижче наведено приклад того, на що має бути схожий ваш код: body font-family: Helvetica, sans-serif; font-size: 12px; line-height: 16px; >
3. Обробка лапок
Обробка лапок повинна проводитись на полях тексту. Якщо лапки зливаються з текстом, вони розривають ліве полі і порушують риму блоку тексту. Обробка лапок не порушує вирівнювання по лівому краю та балансу і тому – покращує читабельність.
Це легко досягається за допомогою CSS, використовуючи елемент blockquote: blockquote text-indent: -0.8em; font-size: 12px; >
Негативний відступ залежатиме від гарнітури, розміру шрифту та полів.
4. Вертикальний ритм
Сітка базових ліній – це основа постійного друкарського ритму на сторінці. Він дозволяє читачам легко стежити за текстом, що, у свою чергу, збільшує читабельність.Постійний ритм у вертикальному просторі утримує текст на постійній сітці так, що пропорції та баланс зберігаються незмінними по всій сторінці незалежно від розміру шрифту, інтерліньяжу або довжини рядка.
Для тогоЩоб підтримувати вертикальний ритм за допомогою CSS, необхідно, щоб відстань між елементами і міжрядкову відстань (інтерліньяж) дорівнював розміру сітки базових ліній. Допустимо, ви використовуєте 15pxсітку базових ліній, маючи на увазі, що між кожною лінією сітки 15px. Інтерліньяж буде 15px і відстань між параграфами також буде 15px. Ось приклад: body font-family: Helvetica, sans-serif; font-size: 12px; line-height: 15px; >
Це дозволяє кожному параграфу розташовуватись на сітці, зберігаючи вертикальний ритм тексту.
5. Верхні та нижні висячі рядки
Верхній висячий рядок — рядок тексту або слово в кінці параграфа.Нижній висячий рядок — слово або короткий рядок тексту на початку або в кінці колонки, який відокремлений від решти тексту. Верхні та нижні висячі рядки утворюють незграбні шматки, переривають погляд читача та впливають на читабельність. Цього можна уникнути збільшивши розмір шрифту, інтерліньяж, довжину рядка, відстань між словами та міжлітерну відстань або вводячи вручну розриви рядка.
На жаль, немає простого способу запобігти висячим рядкам за допомогою CSS. Один зі способів їх позбудеться був описаний вище, ще один - jQWidon't ( davecardwell.co.uk/javascript/jquery/plugins/jquery-widont /), плагін для jQuery, який розміщує нерозривні пробіли між останніми двома словами елемента.
6. Виділення
Важливовиділяти слова не відволікаючи читача. Курсивне зображення часто розглядається як ідеальна форма виділення. Деякі інші поширені форми виділення: напівжирне зображення, великі літери, капітель, розмір шрифту, колір, підкреслення або інша гарнітура. Не важливо, якою ви скористаєтеся, постарайтеся використовувати лише одну.Такі комбінації як капітель - напівжирне - курсивне зображення відволікають і виглядають незграбно.
Ось кілька способів виділення за допомогою CSS: span font-style: italic; >
h2 text-transform: uppercase; >
b font-variant: small-caps; > Майте на увазі, що font-variant працює лише у випадку, якщо шрифт підтримує капітель.
7. Масштаб
Завжди верстайте з урахуванням масштабу, чи традиційного масштабу розробленого в шістдесятих і з яким ми всі знайомі, або той, який ви придумали. Масштаб важливий, оскільки створює типографічну ієрархію, що покращує читабельність, створює гармонію і покращує когнітивну придатність тексту.
Приклад типографічного масштабу визначеного CSS: h1 font-size: 48px; >
8. Підчищаємо рвані краї
Коли створюється блок тексту з вирівнюванням по лівому або правому краю, не забудьте підчистити рвані краї (нерівні рядки) і збалансувати текст без будь-яких несподіваних «дір» чи незграбних форм текстових блоків. Рвані краї можуть відволікати читача. Хороший край «м'який», рівномірний, без надто довгих або надто коротких рядків. Не можна контролювати це за допомогою CSS, так що для отримання хороших країв треба вносити в текст ручні редагування.