Як вибрати правильний шрифт для сайту і статті
Шрифт - це важливо. Як повітря, який не помічаєш, поки все в порядку. Більшість людей поняття не мають, як називаються шрифти і чим вони різняться (і це нормально), але безпомилково відчувають, що з вашим сайтом щось не те, якщо шрифт, який ви використовуєте, не підходить вашому проекту.
Що таке насиченість шрифту
Насиченість шрифту (накреслення, font weight) визначає товщину кожної літери. Зазвичай ми звикли називати текст нормальним (normal) і жирним (bold). У шрифтів можуть бути так само додаткові варіанти товщини - від дуже тонких (super light) до дуже жирних (super bold).
Яким повинен бути розмір шрифту на сайті
Налаштування параметрів шрифту для різних типів проекту
Ми розглянемо 4 варіанти поєднань різної насиченості шрифту в заголовках і в тексті. Вони допоможуть висловити тональність сайту, щоб він виглядав гармонійно і у вас вийде хороший проект.
1. Жирний заголовок і нормальний текст
Це саме базове поєднання, яке буде добре працювати в більшості випадків. Використовуйте, якщо ваше завдання зробити просто хороший сайт без яскраво вираженого акценту.
Для яких сайтів підійде: для будь-яких.
Приклад: Сторінка вакансії. У прикладі використовуються шрифти: Open Sans (для заголовків) і Roboto (для тексту).
2. Жирний заголовок і нормальний текст
Для яких сайтів підійде: бар, коворкінг, анонс концерту, спортивні змагання, промостраніца туру і т.д.
Приклад: Сайт коворкінгу. У прикладі використовуються шрифти: Ubuntu (для заголовків) і PT Sans (для тексту).
3. Жирний заголовок і тонкий текст
Більш незвичайне поєднання, виглядає ефектно за рахунок контрасту. Доречно в разі, коли вам потрібно поєднувати і драйв, і стиль
Для яких сайтів підійде: Наприклад, таке поєднання ми використовували на Лендінгем нашого курсу «Інтернет-маркетинг з нуля». З одного боку, нам потрібні були яскраві, добре Новомосковскемие заголовки, з іншого боку, текст повинен був передати естетику якісного оформлення курсу.
Приклад: Сторінка дизайн-студії. У прикладі використовуються шрифти: Noto Sans (для заголовків) і Open Sans (для тексту).
4. Тонкий заголовок і тонкий текст
Поєднання для проектів, пов'язаних з високими технологіями, чимось прогресивним і сучасним. Або естетичним і стильним. Особливо добре спрацює, якщо у вас багато білого простору і є невеликі акценти яскравих кольорів. І красиві фотографії.
Для яких сайтів підійде: технологічні пристрої, ювелірні прикраси, дороге кафе або ресторан, студія краси.
Приклад: Лендінг мобільного застосування для обробки фотографій.
Приклади поєднань різних шрифтів
Поєднуючи різні шрифти в заголовках і в тексті, можна домогтися різного ефекту, висловити характер і тональність сайту.
Підбираємо шрифти для статті
У статті найголовніше, щоб текст Новомосковсклся максимально легко. Тому він повинен бути контрастним і не дуже великим.
Приклад: Сторінка поста в блозі про моду.
Приклад: Корпоративний блог.
З зарубками або без?
Довгий час вважалося, що шрифт із зарубками краще Новомосковскется, так як зарубки утворюють направляючу лінію і погляду зручніше і швидше ковзати уздовж неї. З появою перших комп'ютерів стали поширені шрифти без зарубок, так як на екранах з низьким дозволом більш розбірливо виглядали шрифти простої форми, без зарубок.
Сучасні дисплеї однаково добре відображають і ті, і інші. Тому зараз вибір «із зарубками або без» - питання характеру повідомлення, а не Новомосковскбельності. Шрифти із зарубками можуть задавати більш формальний тон і бути придатними для деяких брендів.
Список хороших шрифтів, в яких є кирилиця
читабельність шрифту
Стиль, який застосовується таким чином, поверх загальних параметрів, завжди буде пріоритетним. Тому, якщо раптом ви міняєте параметри в налаштуваннях сайту, а зміни не видно, значить в цьому місці застосований «інлайновий стиль». Щоб його прибрати, потрібно виділити текст і натиснути іконку «очистити».
Приклад 1: Текст Новомосковскется не надто
Приклад 2: Текст Новомосковскется добре
Якщо тема вибору шрифту вам цікава, знайдіть хороші сайти, близькі до вашого проекту, і подивіться які шрифти вони використовують. Визначити це допоможе розширення для браузера What Font.