Шрифты в дизайне вашего блога простыми словами

Что такое шрифт

❓Шрифт — это то, как выглядит текст?

✅ Почти, но не совсем.

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

Это с одной стороны — утилитарная, с другой — очень мощная часть в коммуникациях. Одна и та же мысль, оформленная разными шрифтами, может вызвать прямо противоположные реакции, совсем разные эмоции.

Так как не навредить себе, и не «проиграть в шрифты»?

Как усилить эффект от своего контента, или хотя бы не помешать ему?

В первую очередь — нужно понимать, с чем мы работаем.

Часто путают шрифты и гарнитуры

Шрифт — набор символов с определенным стилем и начертанием.

Например: Open Sans Regular, Open Sans Black, Merriweather Regular и Merriweather Bold — Это названия шрифтов.

Гарнитура (тип шрифта) — группа шрифтов с одинаковым стилем, но разными начертаниями.

Например, гарнитура Open Sans состоит из шрифтов Open Sans Light (тонкий), Open Sans Light Italic(тонкий курсив), Open Sans Regular (обычный), Open Sans Semibold (полужирный), Open Sans Bold (жирный), Open Sans Black (экстра-жирный), и др.

Начертание — конкретный вариант шрифта в гарнитуре.

Например, Open Sans Black — это шрифт с самым жирным начертанием из гарнитуры Open Sans, а Open Sans Thin — самое тонкое начертание этой же гарнитуры.

Но в разговорной речи гарнитуру как раз и называют шрифтом с разными начертаниями. Еще не запутались?

Почему шрифт — это важно?

Основная задача шрифта

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

С другой стороны — шрифт должен помогать в структурировании информации, обращать внимание на важные блоки

Основные типы шрифтов*

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

Шрифты с засечками (Serif).

У таких шрифтов есть небольшие линии или «засечки» на концах букв. Также называют «Антиква»

Примеры: Times New Roman, Georgia, Merriweather

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

Шрифты без засечек (Sans-serif, Sans)

Примеры: Arial, Calibri, Roboto, Open Sans, Noto Sans

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

в 99% случаев — если вы используете шрифты без засечек для заголовков и текстовых блоков в своих постах — не ошибетесь.

Гротескные — тоже шрифты без засечек, но более необычные, с выраженной формой, чистыми линиями, без каких-либо декоративных элементов. Хорошие примеры гротесков — Montserrat и Rubic.

Рукописные Шрифты (Script)

Рукописные (или скриптовые) шрифты имитируют рукописный текст.

Примеры: Caveat, Bad Script, Brush Script, Pacifico

Они добавляют индивидуальность и эмоции, но почти всегда страдает читаемость. Рукописным шрифтом можно набрать короткое пожелание, подпись, небольшой заголовок (смысл которого и так понятен и ожидаем), например: «Поздравляем с Новым годом», «До новых встреч», «Спасибо!»

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

Декоративные шрифты (Display / Decorative)

Примеры: Yeseva One, Impact, Russo One, Playfair Display, Lobster

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

Моноширинные шрифты (Monospaced, Mono):

В них все символы занимают одинаковое пространство. Например, в моноширинном шрифте символы «М» и «f» — одинаковой ширины, в классических (пропорциональных) — ширина разная, расстояния между символами тоже разное.

Примеры: Courier New, Consolas, Noto Sans Mono

Шрифты использовались в наборных текстах, напечатанных на старых станках и печатных машинах с наборными формами, например, в старых газетах. Сейчас часто используются в программировании для отображения кода, чтобы было проще искать символ в строке и столбце.

Более необычное применение — для коротких заголовков и логотипов. Такие решения выглядят интересно, но применять в медицине их сложно (хотя возможно). Без опыта, скорее всего, получится что-то неудобное. Важно: для больших объемов текста такие шрифты лучше не использовать.

Какой тип выбрать?

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

В блогах о медицине чаще всего применяют шрифты без засечек с разными вариантами начертаний. Но и другие типы шрифтов могут найти свое место в этой области.

Важные характеристики шрифта, которые влияют на восприятие

— Читаемость: Важно, чтобы шрифт оставался читаемым даже в больших размерах.

— Контраст: Высокий контраст между толстыми и тонкими линиями может привлечь внимание.

— Размер — высота символов, измеряемая в пунктах.

— Насыщенность — толщина линий шрифта (Например, обычный или жирный. У современных вариативных шрифтов этот параметр часто обозначается числом от 200 до 900 с шагом в 100 или 200, где 200 — Тонкий / Light, а 900 — самый жирный / Black).

— Кернинг — расстояние между парами букв.

— Интерлиньяж — расстояние между строками текста.

— Стиль — наклон, курсив или обычный. Выбор стиля должен соответствовать теме и настроению проекта.

Какие шрифты можно использовать в медицинских тематиках

Как уже писали выше, шрифт без засечек — почти беспроигрышный вариант для блога, который будут читать с экрана телефона или компьютера. Причем, почти для любой тематики, и для медицины в том числе.

Пока у вас не так много опыта в подборе шрифтов, лучше взять как раз такой: Выбрать один шрифт, который будет хорошо читаться на ПК и телефоне. Можно набрать пару абзацев для вашей карточки в посте и посмотреть, как они выглядят с разными шрифтами.

Для заголовков можно выбрать другое, более жирное начертание той же гарнитуры.

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

Шрифтовые пары

Более изящное и профессиональное решение — шрифтовая пара. Это Особый шрифт для заголовков, и второй шрифт для основных текстовых блоков. В шрифтовой пане не обязательно именно два шрифта, их может быть и три, и иногда больше. Смысл в том , что это готовая к использованию гармоничная система из шрифтов. Сложность в том, что такие пары должны (естественно) хорошо сочетаться друг с другом, и подобрать их на глаз иногда сложно.

Как быть, если вы хотите попробовать использовать разные шрифты в заголовках и тексте, но сомневаетесь в уместности и сочетаемости?

Самое простое — подсмотреть и сделать по образцу.

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

Например, недавно появился отличный сервис по подбору шрифтовых пар — Fontjoy с помощью нейросети — все, как мы любим.

Еще могут помочь Typotheque, Fontspair (практически все шрифты в нем — бесплатные, в том числе — из набора Google Fonts), Typespiration (тоже коллекция готовых пар из бесплатных шрифтов Google Fonts).

Помимо этого много идей с кириллическими шрифтами можно найти на Pinterest по запросам «Шрифт», «Кириллица», «Font», «Font», «Pair».

Удачные примеры использования шрифтов

Вот карточка из одной публикации в блоге врача-онколога с разными сочетаниями шрифтов.

В чем разница вариантов с выделением цветом и без него:

С цветом: Заголовки явно выражены, за них цепляется глаз, можно легко пробежать только позаголовкам. Текст визуально разбит на блоки с первого взгляда. Можно использовать практически везде.

Однотонный варниант: Заголовки выделены, но с первого взгляда являются частью текста. Пробежать по диагонали за 1 секунду сложнее. Но создается ощущение единого текста. Лучше использовать в карточках, где предполагается чтение всего материала

Arial + Times — старые знакомые со времен первых рефератов и курсовых. Заголовки максимально выражены, за них цепляется глаз, можно легко пробежать только по заголовкам. Текст визуально разбит на блоки с первого взгляда.
Заголовок — жирный, без засечек. Основной текст выполнен шрифтом с засечками. Это подходит для больших текстовых блоков, например, если вся карточка занята текстом, нет иллюстраций или они небольшие. Так сочетать шрифты сложнее, но можно подсмотреть готовые шрифтовые пары, и использовать их.

Ubuntu + Arimo. Заголовки выражены, но все еще являются частью текста с 1 взгляда.
Заголовок — жирный, без засечек. Основной текст также без засечек.
Текстовые блоки без засечек — почти беспроигрышный вариант для соц. сетей, так как за последние годы мы все уже привыкли к подаче информации именно такими гарнитурами, они хорошо читаются, хорошо выглядят на экранах ПК и телефонах.

Иногда шрифт хорошо читается в 1-2 строки, но даже небольшой абзац — уже не для него. Посмотрите, как изменится эта же карточка с более длинными заголовками:

Очень спокойные варианты с интересными заголовками:

Какие вариации лучше не использовать:

Общие рекомендации:

• Не ставить рукописные и вызывающие декоративные шрифты в основной текстовый блок
• С осторожностью использовать в основном тексте шрифты с засечками (но это возможно. Есть отличные гармоничные примеры).
• Стараться не использовать больше 3 гарнитур в одной карточке (желательно использовать 2 гарнитуры, одну — для заголовков, вторую — для основного текста, подписей, цитат. Для разных типов текста в основном блоке можно использовать разные начертания).

Примеры спорных решений, и как можно их улучшить

Один шрифт для заголовков и текстовых блоков: Merriweather — шрифт из набора Google Fonts, Бесплатный таким шрифтом выделить заголовки сложнее. Не очень удачный вариант.

Здесь как-будто читаем сложную научную работу. В статье для журнала или в блоге на своем сайте такое иногда можно использовать (но очень осторожно). А вот в постах для соц.сетей — не стоит.
Почему: Текстовые блоки читаются нормально, а вот заголовки с ними сливаются. не помогает ни «жирность», ни выделение цветом.

Как это исправить: заменить Merriweather в заголовках на что-то «потяжелее», и можно — без засечек. Например: Montserrat. А в основном блоке понизить вес Merriweather на Light / Thin, немного уменьшить кегль.

Так мы сохранили впечатление научного журнала, но сделали текст читаемым и разбили его на блоки.

В карточке используется один шрифт для заголовков и текстовых блоков — Comfortaa — шрифт из набора Google Fonts, Бесплатный и очень популярный, но таким шрифтом выделить заголовки сложнее. Не очень удачный вариант.

Применяя его в больших текстовых блоках рискуем создать «эффект Comic Sans». Читать текст можно, но в медицинской сфере лучше такой вариант не применять.
При этом: шрифт довольно популярен, и вы можете найти его на десятках сайтов, в том числе и на нашем Медконструкторском Бюро. Главное — понимать, где и как его использовать.

Как исправить ситуацию в данном конкретном случае? Есть несколько вариантов.

Первый: Оставить Comfortaa в заголовках, добавить им жирности. А текстовый блок набрать чем-то более строгим, но в то же время легким, неконтрастным, например Rubik Light.

Второй: Пойти дальше и заменить Comfortaa и в заголовке, например, на Noto Sans. То есть — здесь мы полностью отказались от «Комфорты», но стало только лучше.

Использовать рукописные шрифты опасно. Пример: шрифтовая пара Caveat + Noto Sans. Заголовки читать тяжело даже одной строкой. Рукописные шрифты в заголовках внутри карточек лучше не использовать.

Как исправить: Меняем на что-то подходящее. Здесь можно взять тот же самый Noto Sans.

Рукописные шрифты в текстовом блоке = нечитаемый текст почти 100%. Поэтому никогда так не делайте. В тех редких ситуациях, когда это возможно, вы, скорее всего, просто не окажетесь. А альтернативу найти можно всегда.

Использовать дисплейные шрифты в заголовках возможно, но есть очень высокий риск неудачного сочетания. Например здесь сам-по-себе прекрасный Seymour One выглядит очень инородно, а вот хорошо знакомый нам Noto Sans прекрасно спасает ситуацию.

Иногда использование декоративных шрифтов уместно, и вместо одного не очень удачного можно подобрать другой — вполне подходящий к ситуации. Меняем торжественный дисплейный шрифт Yeseva One в заголовках на тоже дисплейный (декоративный), но менее торжественный, простой — Prosto One.

Здесь тоже не очень уместен именно такой (как слева) вариант. Поэтому меняем Orelega One на уже использовавшийся в этой статье Russo One. Он тоже очень интересный, но больше подходит тематике и ситуации.

Где взять шрифты

Огромная библиотека Google Fonts уже встроена в редакторы Pixso / Figma. Мы рекомендуем вам остановиться на каком-то из этих вариантов. Подобрать подходящий там точно можно.

Отдельные шрифты, которых нет в редакторах, можно скачать с самого Google Fonts и использовать, как локальные шрифты на вашем компьютере (потребуются плагины «Ассистенты по локальным шрифтам» для Finga или Pixso, а все локальные редакторы будут работать со шрифтами и так.,

Есть библиотеки бесплатных шрифтов Open-Foundry, Fontshare, Fontspace и Fontesk (в последних двух нужно отметить бесплатное использование в коммерческих целях), а для кириллицы есть библиотека на сайте школы UPROCK, Шрифтотека студии с прекрасным названием «Мы с Котом» и подборка бесплатных шрифтов на доске Figma от Захара, дизайнера из Санкт-Петербурга.

Если в этих подборках вам може ничего не пришлось по вкусу — есть много хороших Telegram-каналов с бесплатными шрифтами. Ищите по запросам «Шрифт», «Font». Но в описании шрифта должно быть указано, что его можно свободно использовать в коммерческих целях, а лучше — чтобы была ссылка на страницу автора / каталога, где это подтверждено официально.

Самое важное из статьи

Вывод

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

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

Лучше избегать чрезмерного использования декоративных и рукописных шрифтов в больших текстовых блоках.