Подборка шрифтов

UI UX дизайн
14.11.2017

Моя небольшая подборка шрифтов:

  • Roboto
  • Open Sans
  • Source Sans Pro
  • Rubik
  • SF Pro Display (San Francisco)
  • Myriad Arabic
  • Adobe Clean
  • Acumin-pro

Сайты для скачивания шрифтов:

Google Fonts

Adobe Fonts

Apple Developer

Почему я предлагаю использовать именно эти шрифты? Они правильно отображаются всеми браузерами. Пропорции букв сохраняются у всех букв. Т.е. буква "ш" по ширине такая же, как буква "е" например. У некачественных шрифтов эти пропорции теряются. Обычно это из-за перевода на кириллицу.

У выбранных мной шрифтов большая коллекция начертаний, поэтому можно использовать один шрифт на всем сайте, при этом менять его от очень толстого (например для заголовков) до сильно тонкого.

Выбранные шрифты хорошо читаются, как при большом кегле, так и при маленьком.

Кроме выше перечисленных достоинств выбранные шрифты просто красивые и одобрены нашими любимыми разработчиками apple, adobe и google.

Позволю себе так же дать пару советов в использовании:

  • Не выбирайте кегель слишком крупный или мелкий;
  • Для заголовока подойдет 30-55;
  • Подзаголовок 24-30;
  • Текст 16-18;
  • Подписи 12-14.

Выберите для себя 4 размера шрифта, каждый с определенным начертанием, цветом и используйте только такие 4 варианта. Цвет может варьироваться в зависимости от фона.

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

Если вам нравится какой-то шрифт, можете поставить себе приложение WhatTheFont. Для iPhone точно есть, для Android — не знаю. Фотографируете текст, программа отправляет его на сервер и возвращает ответ, какой это шрифт.

Если вы хотите сочетать шрифты между собой, рекомендую зайти на сайт Fonts in use и поискать тот шрифт, что вам нравится. Если его там нет, не пользуйтесь им. Наконец, есть сайт Font Squirrel с кучей бесплатных шрифтов. Там есть поиск по кириллице.

Как легко проверить читаемость шрифта?

  1. Скопируйте слой с текстом, преобразуйте в смарт-объект или в обычный растр
  2. Фильтры > Размытие > Размытие по Гауссу
  3. Сравните шрифты после фильтра, как вы заметите один шрифт читается лучше другого. Это может сыграть большую роль для слабовидящих.
Шрифты
Опубликовано: 2017-11-14

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку