Как решить, какое семейство шрифтов использовать для веб-дизайна

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

Один из самых простых способов повлиять на дизайн веб-страницы — это шрифты, которые вы используете для текстового контента на этом сайте. К сожалению, многие веб-дизайнеры, которые находятся в начале своей карьеры, сходят с ума, используя слишком много шрифтов на каждой странице. Это может привести к мутному опыту, которому, похоже, не хватает единства дизайна. В других случаях дизайнеры пытаются экспериментировать с практически нечитаемыми шрифтами, используя их только потому, что они «крутые» или разные. Они действительно могут быть классно выглядящими шрифтами, но если текст, который они предназначены передать, не может быть прочитан, то «крутость» этого шрифта исчезнет, ​​когда никто не читает этот сайт и вместо этого отправляется на сайт, который они могут обработать!

Некоторые правила большого пальца

1. Не используйте более 3–4 шрифтов на одной странице. Все, что больше, чем это начинает чувствовать себя любительским — и даже 4 шрифта может быть слишком много в некоторых случаях!
2. Не меняйте шрифт в середине предложения, если у вас нет веских причин
3. Используйте шрифты без засечек или шрифты с засечками для основного текста, чтобы облегчить чтение этих блоков содержимого.
4. Используйте моноширинные шрифты для текста на печатной машинке и блок кода, чтобы отделить этот код от страницы.
5. Используйте сценарии и фантазийные шрифты для акцентов или больших заголовков с очень небольшим количеством слов.

Помните, что это все предложения, а не жесткие и быстрые правила. Если вы собираетесь делать что-то другое, то вам следует делать это намеренно, а не случайно.

Шрифты без засечек являются основой вашего сайта

Шрифты без засечек — это те шрифты, которые не имеют «засечек» — немного добавленный дизайн на концах букв.

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

Некоторые примеры шрифтов без засечек:

• Arial
• Женева
• Helvetica
• Люцида Санс
• Требушет
• Verdana

Запись

Verdana — это семейство шрифтов, которое было изобретено для использования в Интернете.

Используйте шрифты с засечками для печати

Хотя шрифты с засечками могут быть трудно читаемыми в Интернете для старых дисплеев, они идеально подходят для печати и хороши для заголовков на веб-страницах. Если у вас есть печатные версии вашего сайта, это идеальное место для использования шрифтов с засечками. Серифы, напечатанные, облегчают чтение, поскольку они позволяют людям более четко различать буквы. А поскольку печать имеет более высокое разрешение, они могут быть видны более четко и не выглядят размытыми вместе.

Некоторые примеры шрифтов с засечками:

• Garamond
• Грузия
• раз
• Times New Roman

Моноширинные шрифты занимают одинаковое пространство для каждой буквы

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

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

Некоторые примеры моноширинных шрифтов:

• курьер
• Новый Курьер
• Lucida Console
• Монако

Фантазийные и скриптовые шрифты трудно читать

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

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

Некоторые примеры фантазийных шрифтов:

• Медная тарелка
• Дездемона
• Влияние
• Kino

Запись

Impact — это семейство шрифтов, наиболее вероятно, на компьютерах Mac, Windows и Unix.

Некоторые примеры шрифтов скриптов:

• Apple Chancery
• Comic Sans MS
• Лусида Почерк

Запись

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

Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирар.