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