Просте керівництво по адаптивної типографике

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

Принципи адаптивного шрифту

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

Зміна розміру шрифту за допомогою rems

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

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

Одиниці rem в даний час підтримується у всіх основних сучасних браузерах, в тому числі Opera, починаючи з версії 11.6, а також IE9.

Оскільки ви будете використовувати одиниці rem, потрібно переконатися, що ви застосовуєте їх до елементів в html, а не до body. Це повинно виглядати так:

Тепер одиниці rem будуть застосовуватися за замовчуванням.

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

Природно, ви хочете додати додаткові вказівки для ваших елементів, таких як, припустимо, h1. Щоб побачити, як насправді буде виглядати шрифт, можна використовувати Web Font Specimen.

Підтримка оптимальної довжини рядка

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

Свого часу було досить багато дискусій на тему, яка довжина рядка є оптимальною і більш зручною для читання. Але відповідно до Baymard Institute був досягнутий консенсус - 50 - 75 символів в рядку.

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

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

Ми повинні також встановити максимальну ширину (або break points) для областей текстового контенту. Подивіться на розмір шрифту, який ви використовуєте для даного розміру екрану, а потім визначте ширину контейнера контенту, коли в рядку приблизно 75 символів. Саме ця довжина стає максимальною шириною контейнера.

Наприклад, на Ваш пристрій розмір шрифта 16px, і ви хочете, щоб ваш розмір шрифту став 20px (припустимо, для даного прикладу ми використовуємо шрифт із зарубками Droid Serif). Це означає, що ви для шрифту будете задавати розмір 1.25rem. При цьому розміру шрифту, ширина контейнера повинна бути 675px. У нас в середньому виходить кількість символів 60.

Щоб задати ширину контейнера, просто використовуйте цей код:

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

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

Код є досить простим.

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

Використання альтернативних шрифтів

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

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

Наприклад, в дизайні для настільних комп'ютерів для заголовків ви можете використовувати шрифт League Script. Але на більш меленьких дисплеях, наприклад в iPhone, необхідно зробити його настільки великим, що читання буде практично неможливим.

Щоб зробити це, потрібно просто вказати код:

Звичайно, це може бути зроблено не тільки для заголовків.

висновок

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

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

Переклад - Вартівня