Кращі практики веб-типографії для сучасного веб-сайту

Посібник з чуйної веб-типографії, що охоплює всі найкращі практики & правила розміру шрифту, щоб забезпечити читати вміст вашого веб-сайту & радість спостерігати.


Передовий досвід типографіки

Художники мають свої пензлі. Скульптори мають свою глину. У веб-дизайнерів є свої… шрифти? Як зараз має Олівер Рішенштайн чудово написано: “95% інформації в Інтернеті – це письмова мова.” Після ретельної уваги, яку ви приділили користувальницькій графіці, значкам, гарним меню та чистим інтерфейсам вашого сайту – гріхом було б потім оглядати важливий компонент веб-типографії..

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

Встановлення візуальної ієрархії

Найважливішою метою гарної веб-типографії є ​​створення ієрархія вмісту, який візуально перетікає від одного елемента до іншого. Правильне розмежування заголовків, підзаголовків та основного тексту, різноманітні ваги та стилі шрифту та достатня кількість білого простору між текстовими блоками – це всі фактори, що сприяють безпроблемному читанню.

Приклад візуальної ієрархії типографіки

Побудова міцного тіла

Ваше перше замовлення – це визначити головне на веб-сайті Тіло текст, оскільки саме на це відвідувачі проведуть більшу частину свого часу за читанням. Ваша мета – створити текст, який природним чином перетікає великі абзаци, надихаючи здоровий ритм для тривалих протягів читання.

  • Найбільш поширений розмір шрифту для тексту тексту 16 пікс—І ще краще, 1ем (докладніше про це пізніше).
  • Уникайте вирівнювання тексту в центрі, оскільки нерівні краї з обох сторін стануть непривабливим видовищем. Замість цього встановіть ліворуч і праворуч маржа текстового контейнера до авто для досягнення більш бажаного ефекту.
  • Виправданий текст відмінно підходить для газет, а не для веб-сторінок. Характер розкладки рідини може створити непередбачувані прогалини між проміжками між словами.
  • Виберіть низькоконтрастний шрифти над високими. Шрифти, як Дідот добре працює над заголовками джембору або для друку великого формату, але його високий контраст між товстими та тонкими лініями обведення робить важким читання при невеликих розмірах на веб-сайтах.
  • Пам’ятайте розбірливість. У багатьох безсерійних шрифтах великі літери “Я” і малі літери виглядають точно так само, що може створити непотрібну плутанину.
  • Оптимальний лінія-висота текст абзацу має розмір шрифту 1,25–1,5 ×. Відрегулюйте відповідно залежно від обраного вами шрифту.

Рубрики для успіху

На краще чи гірше, більшість читачів, ймовірно, проглядатимуть ваші сторінки Рубрики навіть не турбуючись про основний текст. Тому дуже важливо привернути їх увагу та закликати до подальшого читання, гарантуючи, що типографія ваших заголовків є чудовою.

  • Середній розмір шрифту для заголовка тексту десь навколо 36 пікс—І ще краще, навколо 2.25ем (ми збираємось дійти до цього).
  • Увага завжди повинна спрямовуватися на Заголовок перед Органом. Переконайтесь, що текст заголовка не надто сильний на шрифт у тілі.
  • Переконайтеся, що ваші заголовки відповідають очікуванням читачів. Значно більший текст з достатньою відстані між дочірнім абзацом означає зміну теми, тоді як менші заголовки, набагато ближче до абзаців, означають, що вміст пов’язаний.
  • У тому випадку, якщо ваш заголовок повинен перейти до наступного рядка, пам’ятайте, що це оптимально лінія-висота для заголовків є менше ніж те, що це для тексту тексту.

Простір між

Кількість простору, що розділяє елементи вашої сторінки, багато в чому говорить про їх взаємозв’язок, і це принцип дизайну, який неможливо не помітити. Домінуючі заголовки, оточені білим океаном, забезпечують набагато інший контекст, ніж менші заголовки, прикріплені до абзаців (пам’ятайте, що ми створюємо зорова ієрархія).

Як правило, краще помилитися з боку білого простору, ніж недостатньо. Очищення макетів із великим простір – те, що віддається перевазі в сучасній мережі.

Падіння в лінію

Уявіть, що читаєте текст на 27-дюймовому моніторі з високою роздільною здатністю, який розтягується по всьому краю екрана. Ваші очі втомлюються лише через один абзац!

Важливо, щоб кожен рядок основного тексту був обмежений певною кількістю символів, щоб очі залишалися зосередженими на центральній точці. Популярний консенсус полягає в тому, що ця магічна міра для настільні є 60–75 символів. Для екрани мобільних пристроїв, там, де ми хочемо уникати примружених очей і надмірно ущільненого тексту, це число сидить навколо 35–40 символів на рядок.

Накидання ваги

Багато написано на предмет масштабування між розміром шрифту Body та Heading. Який же ідеальний розмір Н2, якщо текст тіла, скажімо, 1ем? Визначення найбільш естетично пропорційних розмірів між текстом тексту та заголовками H1 – H6, на щастя, є чимось, що багато друкарні вже розшифрували. Крім того, ці математичні пропорції також повинні адаптуватися залежно від розміру екрана користувача.

Дизайнер Джейсон Фундаментальний забезпечує корисна діаграма тому що, на його думку, найбільш оптимальні розміри шрифту на різних медіа-пристроях, і я, як правило, погоджуюся з ним. По суті, навіть незважаючи на те, що ідеальний розмір Н1 на робочому столі може бути 3 × розмір корпусу, на екрані мобільних пристроїв це буде занадто перебільшено – тому його потрібно зменшити для розміщення для меншої області перегляду.

Діаграма оптимальних розмірів шрифту на різних медіа-пристроях

ШВИДКА ПРИМІТКА: Як ви можете сказати, чи маєте ви добру зорову ієрархію? Коситься на екрані поки весь текст не стане розмитим. Якщо макет виглядає як аморфна крапля без розрізнення між секціями, то ваша ієрархія може бути невдалою. Якщо ви можете легко розрізнити розділення між текстовими блоками, заголовками та чітко знати, куди мають рухатися очі, то ви в чудовій формі!

Зберігання тексту чуйним

Чуйний веб-дизайн є важливою практикою в наші дні – особливо, коли все більше людей використовують мобільні пристрої як основний засіб для перегляду Інтернету. Хоча дизайн із відсотками, а не пікселями, змінив спосіб адаптації зображень та полів до ширини рідини, веб-типографія, що реагує, на жаль, залишається жорсткішою для яєць.

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

Ems Over Pixels

Щоб спростити типографіку вашого сайту, викопайте піксель і почніть використовувати емс. Ems дозволяють легше зрозуміти масштабування між розмірами шрифту вашого веб-сайту, а їхні менші одиниці є більш керованими, ніж двозначні числа пікселів.

Що ще важливіше, з ems все відносно батьківського контейнера. Якщо ви встановите лінія-висота контейнера на 1,5ем, то навіть якщо ви змінили розмір шрифту цього контейнера, висота рядка залишиться у правильній пропорції. За допомогою пікселів вам доведеться постійно коригувати властивість висоти рядка контейнера для кожної зміни розміру шрифту, щоб підтримувати візуальну узгодженість.

Цей принцип справедливий для маржа, підкладка, інтервал між літерами, і більшість інших стилів, які ви застосовуєте до тексту вашого сайту. Немає більше майстерності пікселів на підкладці вашого вмісту для кожного медіа-запиту – просто встановіть його початковий стан в ems, і він автоматично регулюється з початковими пропорціями!

Використання Ems

Перше, що потрібно зробити – це встановити базову посилання на розмір шрифту вашого сайту. У вашому аркуш стилів, введіть це:

корпус {
розмір шрифту: 100%;
}

Це встановлює відносний розмір шрифту вмісту вашого веб-сайту 1ем, що інтерпретує більшість браузерів 16 пікс. Тепер усі розміри ваших заголовків – 2,25ем, 1,5ем тощо – є прямими кратними базового рівня 1ем.

ВАЖЛИВА ПРИМІТКА: Ems є каскадні—Значення їх розміру є відносно встановленого значення його батька. Наприклад: Якщо встановити розмір шрифту для тіла в 1,25ем, а потім розмір шрифту дочірнього контейнера до 1,25ем, два шрифти не будуть однакового розміру! Швидше, текст дочірнього контейнера буде дорівнює 1,25 × початкового розміру батька 1,25.

Більше підказок для чудової веб-типографії

Ось ще кілька порад для чудової веб-типографії:

Не перестарайтеся

Ви повинні обмежити типографіку свого веб-сайту 2–3 шрифти щонайбільше Як правило, це буде шрифт для ваших заголовків, шрифт для основного тексту, а, можливо, шрифт підзаголовка, якщо потрібно. Використання занадто багато шрифтів може створити брудний і нефокусований макет. Час завантаження вашого сайту також може вплинути, як це пояснено в наступному пункті.

Вставте лише те, що вам потрібно

Розгляньте лише те, що найнеобхідніше для вашого сайту, а решту залиште подалі. Якщо ви знаєте, що вам це потрібно регулярні, сміливий і курсивом стилі для заданого шрифту, потім вставляйте лише ці варіанти та виключайте худий, світла і чорний стилі. Завантаження більшої кількості стилів, ніж необхідно, може спричинити сильне враження щодо ресурсів вашого сайту, оскільки кожен окремий стиль – це окремий запит сервера.

Якщо ви не хочете обмежувати свою творчість під час етапу проектування, продовжуйте вбудовувати все; просто пам’ятайте, щоб видалити надлишки стилів, перш ніж ваш веб-сайт вийде на екран.

Якщо ви не можете його прочитати, не використовуйте

Це велика особа. Поки квітучий рукописний шрифт можливо, спокусити використовувати, якщо є навіть найменша плутанина, чи це “g” чи “y”, тоді не використовуйте! Для читача немає нічого страшнішого, ніж намагатися розшифрувати нерозбірливий шрифт.

Улюблений реальний текст над “Lorem Ipsum”

Кожен дизайнер покладається на lorem ipsum фіктивний текст для заповнення порожніх областей вмісту при плануванні макета проекту. Однак ви можете бути здивовані тим, який вплив впливає використання фактичного вмісту на зовнішній вигляд вашої друкарні. “Lorem ipsum” повністю без емоцій та інтелектуально порожнистий; це не дає реального поняття, як ваші слова та ваша особистість будуть виражатися за допомогою шрифтів. Тому підключіть фактичний вміст до свого сайту якомога швидше, перш ніж доопрацювати його дизайн.

Контраст з фонами

Темний шрифт на простому білому тлі завжди забезпечить найкращу читабельність. Білий текст проти темного або розмитого зображення також стає популярним в наші дні. Майте на увазі, що ваш фон не надто складний або деталізований, що пересилить текст переднього плану.

Неправильний приклад типографіки тексту над фоном текстуПриклад поганої типографічної практики з використанням фону “текст над текстом”.

Спарювання шрифтів – наче притягує подобається

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

З’єднання шрифтів – зберігайте їх у сім’ї

Найпростішим рішенням часто є найкраще. Іноді найкращі пари виходять із використання варіацій (засічка, змінна вага, плита) у межах однієї сімейства шрифтів.

Гіперпосилання

Загальна і очікувана практика – це підкреслити посилання та видаліть підкреслення для подій наведення курсора. Переходячи цим маршрутом, переконайтеся, що ваш підкреслений текст є курсивом або курсивом напівжирний а не підкреслено, щоб уникнути плутанини.

Однак сьогодні прив’язаний текст, як правило, кольоровий, з перехідним ефектом, застосованим під час наведення. З точки зору дизайну це, безперечно, кращий варіант, але пам’ятайте, щоб дотримуватися його послідовності!

Деякі CSS, щоб знати

Це впливає на відстань між літерами. Корисно для підкреслення заголовків.

інтервал між літерами: x.xxem;

Це впливає на відстань між словами:

інтервал між словами: x.xxem;

Це дає альтернативу всім кришкам для наголосу. Корисно також для скорочень.

шрифт-варіант: small-caps;

Це дозволить КАПІТАЛІЗАЦІЯ ВСІХ ТЕКСТІВ.

перетворення тексту: великі літери;

Це дозволить використовувати велику літеру першого тексту.

перетворення тексту: з великої літери;

Це поставить закреслений текст.

оздоблення тексту: наскрізний;

Це покращує відображення шрифтів у сучасних браузерах:

передача тексту: optimizeLegibility

Розуміння типів файлів шрифту

Рекомендується вбудовувати декілька типів файлів, щоб забезпечити правильне завантаження шрифтів у широкому діапазоні браузерів. Це ті, з якими ви повинні найбільше перейматися:

TrueType

TTF – це найпоширеніший формат для Mac та Windows, і він підтримується у всіх основних браузерах.

OpenType

OTF також широко підтримується, і він дозволяє додавати додатки, такі як маленькі літери та альтернативні символи, без необхідності вставляти окремий шрифт.

Вбудований відкритий тип

EOT підтримується лише Internet Explorer – і якщо ви не переживаєте за користувачів на старих версіях IE, можливо, краще просто залишити цю.

Відкритий формат шрифту

WOFF – і його наступник WOFF2 – нові королі в місті. Їх підтримка в основних браузерах та можливість стиснення роблять їх сучасним типом файлів.

Потрібно перетворити тип файлу?

Ви, ймовірно, зіткнетеся з ситуацією, коли у вас є лише один тип файлу шрифту і вам потрібно якось перетворити його в інший. Шрифт білки і Font2Web пропонуйте онлайн-інструменти, які будуть робити саме це.

Висновок

Ви це вже знали зміст є найбільш важливим аспектом вашого веб-сайту. Добре продуманий контент заслуговує на добре продуману типографіку; не розчаруйте відвідувачів сайту текстом, який важко прочитати чи заплутати в структурі. Завдяки ретельно спланованій візуальній ієрархії, яка дотримується кращих типографічних практик, ваші творчі думки також можуть бути творчо представлені. Щасливі введення тексту!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map