6 способів поліпшити типографіку на сайті

20

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

Введення.

Типографіка — це мистецтво малювання букв, слів, абзаців і їх взаємодія між собою. Багато дизайнери і розробники ототожнюють типографіку з вибором шрифтів, а інші просто забули, що 95% веб-дизайну – це типографіка. Очевидно, що якщо типографіка на сайті – це 95% веб-дизайну, то вона повинна бути на передньому плані у свідомості у кожного дизайнера і розробника. Ось 6 способів поліпшити свою веб типографіку.

1. Розуміння основ друкарської справи (типографіки).

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

6 способів поліпшити типографіку на сайті

Нижче наведені деякі типографічні визначення, які кожен дизайнер/розробник повинен розуміти, коли має справу з типографікою. Цей перелік не є всеосяжним.

Ascender: будь-яка частина малої літери, що піднімається над лінією.

Baseline: лінія, на якій лежить текст.

Cap Height: верхня частина лінії.

Descender: будь-яка частина малої літери, що падає нижче базового рівня.

Kerning: ширина простору між двома заданими символи, використовувана для досягнення оптимального виду. Як правило, kerning відбувається автоматично за заданим застосування, але треба розуміти, що Photoshop (або іншого програмного забезпечення для редагування зображень) не завжди забезпечують kerning так само, як і веб-браузер.

Leading: висота відстань між будь-якими двома лініями розділу. Оптимальна величина leading, як правило, у половину висоти розміру шрифту.

Letter Spacing: за замовчуванням — ширина простору між будь-яким заданим набором символів. Це також іноді називається «Tracking.»

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

Line-Height: висота рядка. Висота лінії є найбільш ефективним способом контролю вертикального ритму друку. Наприклад, якщо використовується шрифт розміром 12px зі звичайними текстовими тілом, має бути приблизно 6px leading.

Measure: ширина даної рядки. Оптимальна кількість – 60 символів. Але це ще залежить від застосовуваних шрифтів, у яких різні відстані між літерами і словами.

Rendering: відображення шрифту різними браузерами. Різні браузери одні і ті ж шрифти відображають по різному. У це Ви можете переконатися, відкриваючи наш сайт різними браузерами, наприклад Opera, IE, FireFox і т. д.

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

Word-Spacing: ширина простору між двома заданими словами.

X-Height: висота тексту між baseline і meanline.

Типографический масштаб.

6 способів поліпшити типографіку на сайті

Щоб створити ефективний масштаб, кращий метод, який я знайшов — це використовувати одиниці виміру розміру «EM». Метод встановлює розмір по відношенню до бази того чи іншого документа. У прикладі, наведеному нижче, базовий розмір шрифту 12 пікселів, який встановлює стандартний розмір шрифту для параграфа 15 пікселів.

body {
font-size: 12px;
}
h1 {
font-size: 5.0 em;
}
h2 {
font-size: 4.0 em;
}
h3 {
font-size: 3.0 em;
}
h4 {
font-size: 2.0 em;
}
blockquote {
font-size: 1.5 em;
}
p {
font-size: 1.25 em;
}
input {
font-size: 1.0 em;
}
small {
font-size: 0.75 em;
}

Вертикальний розмір.

Вертикальний розмір міжрядкового інтервалу забезпечує оптимальне відстані для сприйнятливості очей. Виходячи з досвіду вертикальний розмір найкраще встановлювати в районі 1.5 em.

6 способів поліпшити типографіку на сайті

Нижче наведено стандартний вертикальний розмір, який я часто використовую у своїх сайтах на основі 960 grid system. Для досягнення вертикального розміру належним чином, кожний параграф повинен мати margin або padding нижче еквівалента стандарту базової сітки висоти.

body {
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}

2. Дизайн у браузері.

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

6 способів поліпшити типографіку на сайті

При створенні макета сайту або блогу, який багатий на свою змістовність (наприклад, сайт-журнал або блозі), мати можливість побачити різницю відображення в різних браузерах та операційних системах – це велике благо. Дизайн та проектування сайту в браузері немає нічого нового. Хоча не кожен сайт можливо проектувати у браузері.

6 способів поліпшити типографіку на сайті

For a Beautiful Web

Andy Clarke, популярний дизайнер/автор нещодавно рекомендував на конференції в Бостоні робити розробку сайтів в браузері. Зображення вище взяті з його виступу.

Кращий спосіб займатися дизайном сайтів в браузері – це використовувати сітку. Я включив в вихідні файли 2 різні сітки, кожна з 3 варіантами вертикальних розмірів. CSS код нижче показує простий спосіб розгортання однієї з цих сіток тестування шляхом заміни фонового зображення або зображення в тілі HTML-сторінки за допомогою класу конкретної сітки, яку Ви обираєте. Просто додайте зазначений клас в тег body або вмісту контейнера тега DIV, і Ви будете готові проектувати у браузері.

.grid960base15 {
width: 960px;
line-height: 15px;
background: url(images/grid960base15.png) repeat-y;
}
.grid960base18 {
width: 960px;
line-height: 18px;
background: url(images/grid960base18.png) repeat-y;
}
.grid960base30 {
width: 960px;
line-height: 30px;
background: url(images/grid960base30.png) repeat-y;
}
.grid600base12 {
width: 600px;
line-height: 12px;
background: url(images/grid600base12.png) repeat-y;
}
.grid600base16 {
width: 600px;
line-height: 16px;
background: url(images/grid600base16.png) repeat-y;
}
.grid600base18 {
width: 600px;
line-height: 18px;
background: url(images/grid600base18.png) repeat-y;
}

Слід зазначити, щоб досягти гарного вертикального розміру, необхідно мати чіткий контроль над лінією висоти. Крім того, ви можете використовувати цю сітку рішень (посилання: http://gridder.andreehansson.se/ ) для накладання будь-якого веб-сайту з налаштованої сіткою. Я вважаю, це буде корисно, коли Ви не можете замінити фонове зображення з однієї з мереж.

3. Використання CSS Техніки Заміни Зображень.

Заміна тексту з картинками було стандартною практикою у веб-дизайні з 90-х. З прийняттям CSS в основних браузерах, почали з’являтися методи заміни зображення, які складаються не тільки в створенні зображення і його розміщення в місцях тексту. З них першими широко поширилися Fahrner Image Replacement (FIR), але по мірі того, як люди грали з заміною зображень CSS, вони зрозуміли, ця техніка, недоступна. Техніка The Phark Image Replacement була спочатку задумана, як доступна заміна класичних технік FIR. Перший запропонований Mike Rundle of 9rules в 2003 році, Phark Image Replacement спирається на використання текстового відступу і фону зображення CSS-властивості для того, щоб приховати текст від користувача, але залишити доступ для читання екрану, і пошукові системи.

Для використання Phark Image Replacement, виберіть елемент контейнер (в даному випадку, the DIVs) з певною висотою і шириною. Потім встановіть фонове зображення. Нарешті, встановіть властивість текст-відступів -9999px. Це властивість зрушує текст вліво на 9999px, але це не призводить до збільшення прокручувати області, дійсно примушуючи текст зникнути.

6 способів поліпшити типографіку на сайті

Хоча Phark в даний час є найбільш поширеною CSS технікою заміни зображень, існують і багато інших з різними перевагами і недоліками. Наприклад, Phark не показує нічого користувачеві, якщо зображення неробочий при включеному CSS, а це порівняно невеликий недолік. Крім того, CSS заміни зображень не значима для великих статей, але краще всього підходить для кнопок і заголовків та інших малих кількостей тексту.

4. Використовуйте техніку «додаткової» заміни зображень.

Стандартна заміна зображень ідеально підходить для високо декоративних ситуацій і меншої кількості тексту. Що ви будете робити, коли хочете замінити текст для всього тіла статті? Що сказати про заміну заголовка і збереженні цього тексту? Відповіддю тут є додаткова техніка заміни зображень. Для всіх цілей існує три різних додаткових техніки заміни зображень, доступних в цей час (якщо ви знаєте будь-які інші, будь ласка, залишайте їх у коментарях): на основі Flash, Javascript, PHP.

Масштабована Inman Flash Replacement (sIFR)

Першим з методів додаткової заміни зображень, які прийшли на зміну, була масштабована Inman Flash Replacement (sIFR), спочатку розроблена Шоном Инманом як IFR, і згодом вийшла доповненням до роботи Майка Девідсона і Марка Вабена, які в даний час підтримують проект.

ЗА:

В основному чіткий шрифт за рахунок згладжування

Зберігає оригінальний семантичний і доступний текст

Витончено зменшує початковий текст

Текст на вибір (частково)

Зручність сценарію

ПРОТИ:

Не підходить для великих тіл тексту

Установка може бути складною і заплутаною

Вимагає Flash і Javascript

Часом завантаження може бути млявою

Друк буде проблематичною

Cufón

Найбільш популярним недавньої передовою технікою заміни зображень називається cufón, що означає валізу або «звичай» і «Шрифт». Він «покликаний стати гідною альтернативою sIFR, який, незважаючи на свої переваги, як і раніше болісно складно встановити і використовувати відповідно до cufón вікі.

ЗА:

Найшвидша передова техніка заміни зображення

Зберегли оригінальне значеннєве зміст тексту

Витончено зменшує початковий текст

Не вимагає ніяких плагінів (наприклад, Flash)

Зручність сценарію

Проста настройка

ПРОТИ:

Текст не може бути скопійований і вставлений (текст не за вибором)

Шрифтове ліцензування розмито щодо cufón

Текстове вирівнювання та ефекти не працюють

Стан невизначеності має багато примх

Потребує JavaScript

Якщо ви хочете дізнатися, як здійснювати і побачити приклади cufón, NETTUTS + має велике скрінкасти і підручник по використанню cufón або відвідайте офіційний сайт cufón.

Заміна зображення типу Facelift (FLIR)

Facelift Image Replacement (FLIR) техніка відрізняється від двох раніше згаданих у цьому використовується виконання сценаріїв на стороні сервера з PHP і зображень бібліотеки GD. Вона була розроблена Кору Mawhorter, щоб забезпечити автоматичні серверні техніки заміни шрифту.

ЗА:

Зберегли оригінальний смислового змісту тексту

Не вимагає ніяких плагінів (наприклад, Flash)

Шрифтове ліцензування саме непроблемматичное

ПРОТИ:

Текст не може бути скопійований і вставлений (текст не за вибором)

Рендеринг шрифтів не є регулярним порівняно з іншими альтернативами

Потрібно веб-сервера з PHP і GD

Потрібно більше ресурсів сервера

Може бути важко встановити

Якщо ви хочете дізнатися, як здійснювати і побачити приклади FLIR, Divito дизайн є хороший підручник з використання FLIR або відвідайте офіційний сайт FLIR.

5. Використання CSS3’s @font-face Rule. Правило для вбудовування Web Font.

CSS3 є відносно новим в ландшафті мережі, і вона ще не отримала широкого застосування. Однією з найбільш цікавих рис CSS3 є @font-face Rule. Є два великі перешкоди для використання @font-face Rule. По-перше, не так багато ливарних шрифтів і їх підтримка @font-face Rule. Деякі ліцензії є розпливчастими, а деякі прямо забороняють @font-face Rule. Щоб отримати список шрифтів, які підтримують @font-face Rule, можна на webfonts.info, де є великий список. Друга перешкода полягає в тому, що не всі браузери підтримують @font-face Rule, як показано в таблиці підтримки браузера нижче.

6 способів поліпшити типографіку на сайті

@font-face Rule тепер дозволяє впровадження шрифтів в IE6, IE7, IE8, Firefox 3.5 + (PC & Mac), а також Safari (Mac & PC) з підтримкою в опері 10 і Chrome найближчим часом. Це означає, що в будь-якій формі моди, webfonts будуть доступні для приблизно 90% + користувачів.

Крок перший: Зробіть шрифт @font-face опис (я)

В ідеалі, це перше @font-face опис має бути частиною CSS файлів, подається через умовні коментарі для IE тільки в СРВ версію шрифту. Друге @font-face опис має бути OTF або TTF файлом шрифту. Крім того, з-за обмежень по безпеці браузера, джерело URL для опису повинен бути відносним (хоча деякі браузери підтримують абсолютний URL).

@font-face {
font-family: «Anivers»;
src: url(«Anivers.eot»);
}
@font-face {
font-family: «Anivers»;
src: url(«Anivers.otf»);
}

Крок другий: Використання шрифтів

Так. Ось і все, що потрібно зробити.

body {
font-family: Anivers, «Helvetica Neue», Helvetica, Arial, sans-serif;
}

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

У зв’язку з майбутньою здачею проектів @font-face, таких як покращення якості її роботи і Typotheque ведеться пошук надання значної допомоги в плані договору про Web Embedding ліцензії з великими ливарними шрифтами. Крім того, з усіма питаннями про оренду шрифтів для веб-вкладень, може виявитися скрутним отримати деякі (або всі) з шрифтів, які ви збираєтеся використовувати у веб-дизайні або вашому програмному забезпеченні для редагування зображень.. Існує два рішення цього: 1) розробка в браузері, як це було рекомендовано вище, або 2) використання аналогічних шрифтів для розробки статичних сторінок.

6. Знайти натхнення і ніколи не зупиняти навчання.

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

Онлайн, перегляньте наступні статті провідних фахівців друкарні, таких як «За прекрасний Web, я люблю Typography, TypeInspire або webfonts.info. Нижче ви знайдете список рекомендованих посилань для читання і отримання додаткової інформації.

PSDTUTS+ Text Effects TUTS

101 Typography Resources from Vandalay Design Blog

A List Apart

Abduzeedo

Astheria

Font Lover

Smashing Magazine

The Archives Typographic

Typophile

Web Designer Depot

Web Typography Guide

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

Переклад і редакція: Ріг Віктор і Андрій Бернацький.

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування