Текст повинен легко читатися
Існує безліч різних розмірів екранів. І потрібно забезпечити легко читаність тексту на найменших і найбільших екранах. Наприклад, з допомогою font size HTML.
Забезпечте, щоб розмір шрифту підходив для будь-якого пристрою
Є кілька способів зробити це:
1. Придбання адаптивної теми або шаблону
Google рекомендує адаптивний дизайн. З допомогою адаптивної теми проблема з розмірами шрифтів буде вирішена.
2. Використання медіа-запитів / адаптивного дизайну
Якщо у вас є досвід роботи з CSS, і ви не боїтеся вивчити, як керувати тим, щоб текст легко читався на будь-яких розмірах екранів.
Як працює font-size
Style font size HTML оголошується у файлі CSS. Якщо розмір шрифту не оголошено, браузер буде використовувати значення за замовчуванням, яке зазвичай становить 16px.
У коді CSS установка значення font-size виглядає наступним чином:
p{font-size:120%;}
Для розміру шрифту можна використовувати різні одиниці вимірювання: пікселі (px), пункти (pt), em і відсотки (%).
Якщо мова йде про вибір шрифту і адаптивному дизайні, Google рекомендує наступне:
- Використовуйте базовий розмір шрифту — 16 пікселів в CSS. Налаштуйте інші розміри по мірі необхідності з допомогою властивостей шрифту;
- Щоб визначити типографический масштаб, використовуйте розміри відносно базового;
- Для тексту має задаватися вертикальне простір між символами. Загальна рекомендація полягає в тому, щоб використовувати висоту рядка 1.2 em, яка за замовчуванням застосовується браузерами;
- Використовуйте обмежена кількість шрифтів і типографських масштабів.
Використовуйте базовий розмір шрифту CSS в 16 пікселів
У цій рекомендації йдеться, що розмір шрифту для сторінки повинен оголошуватися явним чином — 16 px. Це означає, що потрібно використовувати значення HTML CSS font size, яке встановлює розмір шрифту 16 пікселів для всієї станиці. Зазвичай це робиться через елемент «body» або «html«.
Щоб визначити типографический масштаб, використовуйте розміри відносно базового розміру
Тепер, коли у нас є базовий розмір шрифту для всієї сторінки, потрібно задати інші розміри шрифтів, щоб елементи H1, H2 і т. д., відображалися більшим, ніж базовий.
Спосіб, рекомендований Google, це «відносні розміри«. У наших прикладах ми будемо використовувати відсотки.
На наведеному вище зображенні font size HTML для H1 оголошений як «250%«. Текст H1 буде в два з половиною рази більші, ніж базовий 16px. Це і є «відносний розмір«. Завдяки цьому скрізь, де ми оголошуємо розмір шрифту, він завжди буде встановлюватися в кілька разів більше, менше або того ж розміру, що і базовий шрифту:
Це гарантує, що незалежно від того, на екрані якого розміру проглядається сторінка, співвідношення розмірів шрифтів завжди залишатиметься однаковим. Наприклад, розмір шрифту H1 завжди буде два з половиною рази більше базового. Це також забезпечить чіткість тексту на мобільних або невеликих екранах.
Для тексту має задаватися вертикальне простір між символами, і, можливо, для кожного шрифту, його потрібно буде коректувати:
Ще одним важливим аспектом читаності шрифту є простір між рядками тексту. В CSS це властивість називається «line-height«.
Google рекомендує використовувати висоту рядка 1.2, яка використовується в браузерах. Це означає, що відстань між рядками тексту у 1,2 рази перевищувати style font size HTML.
Для цього потрібно оголосити висоту рядка в CSS:
p{font-size:120%;line-height:1.2;}
Ми часто переглядаємо веб-сторінки на моніторі комп’ютера, і навіть щільний текст з невеликими межстрочными інтервалами на них може виглядати добре. Проблеми виникають, коли цей текст проглядається на меншому екрані, і його майже неможливо читати без збільшення.
Задавши висоту рядка (як мінімум) в 1,2, ми сприяємо тому, що текст буде легко читати навіть таких маленьких екранах.
Проблеми зі списками посилань
Для посилання потрібно більше місця на екранах мобільних пристроїв. Це може стати проблемою, коли посилання розміщені в нумерованих або маркірованих списках.
Щоб вирішити цю проблему, спробуйте:
ul{line-height:200%;}
Збільшивши висоту рядка, ми гарантуємо, що для посилань у списку буде достатньо простору. Вам потрібно буде задати значення, відповідне для сайту, і змінити його на «200%«.
Використовуйте обмежена кількість шрифтів і типографських масштабів
Дуже багато шрифтів і оголошень font size HTML може призвести до того, що макет сторінки стане надмірно складним. Такі стариці можуть читатися на стаціонарному моніторі, але на невеликому екрані вони точно будуть важко читаються. Пам’ятайте, що «маленький» текст буде ще менше перегляду на мобільному пристрої.
Як зробити шрифт читати на будь-якому пристрої
Розмір тексту управляється медіа-запитами, які оголошуються для різних розмірів монітора. Можна сказати, що для мобільних пристроїв задається один розмір тексту, а для стаціонарних комп’ютерів — інший.
Розглянемо приклад медіа-запиту, за допомогою якого задається розмір шрифту.
html{font-size:100%;}
@media(min-width:60em){html{font-size: 100%}}
У нас є один і той же розмір шрифту, оголошений для великих і маленьких екранів. Розмір шрифту становить «100%«. Так як ми оголосили базовий font size HTML в 16 пікселів, це означає, що він буде використовуватися на стаціонарних ПК і на невеликих мобільних пристроях. Цей розмір завжди буде виглядати акуратно і легко читатися:
Цей шрифт буде читабельним на всіх типах пристроїв. Особливо, якщо слідувати всім вище перерахованим рекомендацій.
Проблеми можуть виникнути, коли стилі задаються таким чином, щоб на стаціонарних пристроях шрифт був менше. У цьому випадку на мобільних пристроях цей текст буде ще менше:
У подібній ситуації потрібно буде змінити медіа-запит. У першому прикладі style font size HTML був однаковим (100%) для стаціонарних комп’ютерів і мобільних пристроїв.
Розглянемо медіа-запит, який буде задавати менший, більш щільний текст для ПК, але більш читається для невеликих екранів.
html{font-size:110%;}
@media(min-width:60em){html{font-size: 90%}}
Цей код визначає, що текст повинен мати розмір шрифту 90% від розміру за замовчуванням для стаціонарних комп’ютерів. Але на мобільних пристроях розмір 110%:
Це означає, що текст буде легко читаним на екранах різних розмірів.
3. Створення різних версій сайту
Якщо ваш сайт не є адаптивним, то використовуйте мобільний URL-адресу або динамічний показ для мобільних відвідувачів. Створіть різні версії веб-сторінок, і встановіть стилі мобільних на свій розсуд, використовуючи звичайний CSS.
Переклад статті «Use legible font sizes» був підготовлений дружною командою проекту Сайтостроение від А до Я.
