<
  • Главная
Статьи

Як вибрати шрифт для сайту

  1. Різновиди шрифтів для сайту
  2. Які шрифти актуальні сьогодні?
  3. Характер і настрій шрифту
  4. Шукаємо правильні поєднання шрифтів для сайту
  5. Корисні інструменти в роботі зі шрифтами

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

Шрифт, як його складова, може спростити сприйняття сайту і інформації на ньому для нового користувача або, навпаки, ускладнити.

Дослідження показали, що багато людей не читають текст на сайті цілком, а тільки проглядають (сканують) інформацію.

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

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

Різновиди шрифтів для сайту

Перш, ніж перейти до вибору шрифтових поєднань, потрібно знати, з чого вибирати. Всі шрифти діляться на дві основні категорії: рукописні і друковані. Рукописні шрифти мають оригінальний вигляд, серед них є персоналізовані (наприклад, шрифт Кафки, Пікассо, Сезанна). Їх використовують дизайнери для оформлення заголовків, логотипів. В якості основного шрифту для тексту вони не підходять, оскільки ускладнюють читання і сприйняття. Тут естафету у них переймають друковані шрифти. Їх поділяють на три групи: Перш, ніж перейти до вибору шрифтових поєднань, потрібно знати, з чого вибирати

  1. Шрифти із зарубками. Вони полегшують читання друкованих видань, візуально окреслюючи рядки. Але в веб-дизайні вони швидше ускладнюють сприйняття і розсіюють увагу читача. Основне призначення таких шрифтів - використання в логотипах, виділення заголовків і важливої ​​інформації на сторінці.
  2. Рубані. Шрифти нейтрального характеру, без зарубок. Підходять для заголовків, параграфів, основного тексту.
  3. Декоративні. Вони виглядають оригінально, яскраво. Такі шрифти відмінно підійдуть для молодіжних сайтів і будь-якої тематики, пов'язаної з творчістю. Але застосовувати їх потрібно дуже обережно: текст, написаний декоративним шрифтом, складний для читання. Найчастіше їх використовують для створення логотипів та виділення заголовків.

Які шрифти актуальні сьогодні?

В оформленні сайтів сучасні дизайнери віддають перевагу шрифтів Google Fonts, оскільки:

  • вони якісні і прості у використанні;
  • з ними не виникає проблем при верстці;
  • великий вибір, база шрифтів розширюється, додаються нові;
  • будь-який шрифт Google Fonts коректно відображається при відкритті сторінок будь-яким браузером.

Вибираючи шрифти в Google Fonts, важливо перевіряти наявність кириличних символів: вони є приблизно в кожному десятому шрифті.

Але навіть з урахуванням кирилиці для оформлення веб-сторінок підійде далеко не кожен варіант. Розглянемо рейтинг найпопулярніших шрифтів для сайту з Google Fonts в 2018 році:

  1. Open Sans. Нейтральний і легкий для сприйняття шрифт, зручний для читання, прекрасно поєднується з багатьма іншими (наприклад, Jubilat). Дизайнери «Бізнес Сайт» на базі Open Sans розробляли оформлення сайтів для студії граціозно спорту (http://gracebody.com.ua/), міжнародної платіжної системи (https://tyme.ua/), інтернет-магазину для гоління (https : //buymach.com/).
  2. Lora. Читабельний і чіткий шрифт. Використовується в різних накресленнях і насиченості як для основного тексту, так і для заголовків і параграфів. Цей шрифт не такий типовий і впізнаваний, як попередній, чим і заслужив прихильність дизайнерів.
  3. Roboto. Легко читається навіть в маленькому розмірі і прекрасно працює в парі з іншими кириличними шрифтами Google Fonts. Roboto був узятий за основу при розробці веб-студією «Бізнес Сайт» інтернет-магазину «Світ клею» https://mirkleya.com.ua/.
  4. PT Sans - один з найбільш затребуваних і універсальних шрифтів. Легко читається в розмірі 14-26 пунктів. При відповідному виборі накреслень і розміру підійде для основного тексту і заголовків.
  5. Ubuntu. М'який шрифт, викликає прихильність до себе відвідувача сторінки. Використаний в дизайні сайту веб-студії https://www.site2b.com.ua/, де забезпечив читабельність тексту маленького розміру і легке сприйняття заголовків.

Характер і настрій шрифту

У розмові про шрифтах, як правило, згадуються стандартні характеристики: накреслення, насиченість, чіткість, кегль і т. Д. Але кожен шрифт - це, перш за все, характер. На підтвердження цього можна навести такі цікаві факти:

  • Гумористичні замальовки, оформлені гарнітурою Times, порахувало смішними на 10% більше читачів, ніж при оформленні Arial.
  • Переконливість тексту в форматі Baskerville підтвердили на 5% більше респондентів порівняно з цим же самим текстом, написаним Comic Sans.

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

Характер шрифтів особливо важливо враховувати при створенні поєднань заголовок + текст.

Якщо в цій парі з'єднати суперечать один одному гарнітури, увагу читача зосередиться на самих шрифтах, а не на змісті сторінки. Наприклад, якщо заголовок виконаний в Franklin Gothic (елегантний, солідний, мужній стиль), а основний текст в Souvenir (легковажний, грайливий), в результаті вийде суперечливе поєднання, яке заважає гармонійному сприйняттю статті. А якщо замінити шрифт заголовка на Futura Bold, картина повністю зміниться: ці два шрифту доповнять один одного завдяки схожості елементів і не створюють непотрібної напруги.

Шукаємо правильні поєднання шрифтів для сайту

Приблизно 90% користувачів не звертають уваги на шрифт, який використовується на сайті.

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

Завдання дизайнера - опрацювати всі ці фактори, витримуючи дрес-код тематики сайту.

Зробити це правильно допомагають такі правила: Зробити це правильно допомагають такі правила:

  • Використання 2-3 шрифтів для оформлення сайту. Більша кількість буде відволікати увагу відвідувачів. До того ж, велика кількість використаних шрифтів збільшить час завантаження сторінки, що негативно позначиться на відвідуваності і пошуковому просуванні.
  • Читабельність. Все інше не матиме значення, якщо текст не зручно читати. Щоб користувач не покинув сторінку в перші ж секунди після переходу, важливо переконатися, що текстовий контент легко читається і чи правильні параметри: поєднання кольорів, розмір, накреслення та ін.
  • Виділення логічних блоків. Для цього застосовуються різні гарнітури або один і той же шрифт, але з різними параметрами насиченості, розміру, накреслення. Це допомагає відвідувачеві зорієнтуватися на сторінці.
  • Правильне поєднання обраних шрифтів між собою. Класичні варіанти: шрифт із зарубками + рубаний, поєднання шрифтів різного класу, контрастна насиченість шрифту в заголовку і в основному тексті, поєднання шрифтів різної тональності, яскраве + нейтральне. Оцінити гармонійність типографіки можна прийомом «бокового зору»: направити погляд ліворуч або праворуч тексту, щоб сприймати картинку в цілому, не читаючи текст.

Корисні інструменти в роботі зі шрифтами

Використання попередніх поєднання шрифтів за допомогою онлайн-сервісів:

  • Google Type http://femmebot.github.io/google-type/: велика кількість шрифтових пар, підібраних дизайнерами.
  • Type Genius https://www.canva.com/font-combinations/: вводите основний шрифт і отримуйте відповідну пару.
  • Font Combinator https://www.typotheque.com/fonts/fedra_serif_display, простий у використанні сервіс, дозволяє вибирати і гарнітуру і тип шрифту для заголовків і основного тексту серед гармоніюють між собою варіантів.
  • Font Pair https://fontpair.co/: підбирайте шрифтову пару по вступним характеристикам і завантажуйте їх на свій комп'ютер.
  • The Art of Mixing Typefaces https://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html - таблиця-шпаргалка по сполучуваності шрифтів для веб-дизайнерів.

Якщо хочете заощадити час, замовляйте розробку сайту під ключ, дизайн, редизайн сайту у професіоналів веб-студії «Бізнес Сайт».

Які шрифти актуальні сьогодні?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью