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

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

Что отличает «супер» от обычного? Как восклицает один синий большеголовый персонаж фильма: «Презентация!»

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

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

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

Как выбрать шрифты для веб-дизайна

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

1. Разборчивость и читабельность
2. Постоянство бренда
3. Настроение и тон
4. Рекомендации по обеспечению доступности веб-сайтов
5. Кроссбраузерная совместимость
6. Масштабируемость

1. Разборчивость и читаемость

Разборчивость — это то, насколько легко ваши пользователи могут различать символы. Если ваш читатель не может определить, является ли символ «S» или «5», вам, возможно, придется выбрать другой шрифт. Некоторые шрифты предоставляют разные формы для одинаковых символов (например, «1», заглавная «I» и строчная «l»), чтобы отличать их друг от друга.

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

В этом отношении удобочитаемость отличается от удобочитаемости.

Удобочитаемость — это то, насколько удобно читателю читать блоки текста. На этот уровень комфорта также влияет разборчивость вашего текста. Если слово слишком маленькое, чтобы отличить буквы друг от друга, слово может быть нечитаемым. То же самое и в плотном блоке легального «мелкого шрифта», где можно прочитать весь текст, но не так удобно, как хотелось бы.

2. Постоянство бренда

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

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

3. Настроение и тон

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

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

4. Руководство по доступности веб-сайтов

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

Для этого дизайнеры часто используют рекомендации по улучшению веб-доступности своих сайтов. Эти правила и рекомендации делают контент более удобным и понятным для всех посетителей. Хотя на данный момент это не требуется, улучшение доступности веб-сайтов — это хороший способ установить взаимопонимание с вашей потребительской базой и показать им, что вы заботитесь о них и хотите, чтобы они были частью того, что вы создаете. Четыре основных стандарта:

• Воспринимаемый. Проще говоря, ваши потребители должны понимать ваш контент. Это также не ограничивается только «просмотром» контента. Имейте в виду, что слепые или слабовидящие пользователи используют альтернативное программное обеспечение для чтения с экрана, чтобы помочь им ориентироваться в Интернете. Учитывайте этих пользователей при настройке веб-страницы.
• Действующий. Это означает, что все пользователи могут получить доступ ко всем частям вашей веб-страницы (текст, ссылки, аудио, видео, другие медиафайлы) и управлять ими. Как правило, большинство работающих веб-сайтов просты, и поэтому на них легко ориентироваться.
• Понятно. Ваши пользователи должны быть в состоянии переварить всю информацию, которую вы говорите. Вы можете использовать общий язык или предложить альтернативные языки. Точно так же навигация по вашему веб-сайту должна быть организована интуитивно и естественно, чтобы помочь пользователям понять вас и ваш продукт.
• Крепкий. Контент на вашем веб-сайте должен легко разбиваться и анализироваться вспомогательными программами, такими как программы чтения с экрана. Таким образом, люди с трудностями по-прежнему будут частью опыта, который предоставляет ваш веб-сайт.

РЕКОМЕНДУЕМАЯ ЧТЕНИЕ: Концепции веб-дизайна, которые ставят во главу угла клиентоориентированность

5. Кроссбраузерность

Вы должны учитывать, что некоторые пользователи просто не хотят использовать популярные веб-браузеры, такие как Chrome или Mozilla (по той или иной причине). В некоторых случаях эти альтернативные браузеры используют замещающие шрифты, такие как Arial или Times New Roman, для отображения вашего текста. Используйте шрифт, который может правильно отображаться в большинстве, если не во всех, браузерах.

Веб-сайты поддерживают следующие четыре формата шрифтов:

• Встроенный открытый тип (EOT). Поддерживается только браузерами Microsoft (Internet Explorer и Microsoft Edge).
• Шрифт True Type/Шрифт открытого типа (TTF/OTF). Эти форматы, основанные Apple и Microsoft в 1980-х годах, поддерживаются всеми основными браузерами, а именно Chrome, Firefox, Opera, Microsoft Edge и Internet Explorer.
• Формат открытого веб-шрифта (WOFF). Основанный Mozilla в 2009 году, этот формат представляет собой сжатую версию TTF/OTF, предназначенную для более быстрой загрузки.
• Формат открытого веб-шрифта (WOFF2). Это редакция более ранней версии WOFF, основными игроками которой являются Chrome, Firefox и Opera; он предназначен для замены WOFF и в конечном итоге сделает это

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

6. Масштабируемость

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

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

Популярные шрифты веб-дизайна

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

1. Откройте Санс

Open Sans — шрифт «без излишеств». Это прямо и по делу, и не путается с вашим сообщением. Open Sans также на удивление очень универсален. Он выглядит формально, но дизайнер придал ему «нейтральный, но дружелюбный вид».

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

Вы можете понять, почему Open Sans обычно используется в Интернете. Фактически, более 84 миллионов веб-сайтов так или иначе используют его. Некоторые из этих веб-сайтов включают:

• Апворк
• Вана
• Атолл Диджитал
• Журнал Ssense

2. Робото

Roboto — еще один популярный шрифт, рекомендуемый дизайнерами. Это жесткий и геометрический шрифт с «дружественными и открытыми изгибами». Буквы кажутся более плотными друг к другу, что делает чтение немного более ритмичным.

Семейство шрифтов Roboto включает Roboto Condensed и Roboto Slab, что делает все семейство Roboto гибким. Это шрифт, который можно использовать практически для чего угодно, от заголовков до заголовков и простого старого основного текста. В любом случае, он выглядит достаточно профессионально и дружелюбно, чтобы разместить его на вашей веб-странице.

Неудивительно, что более 630 миллионов веб-сайтов, включая Google и YouTube, неукоснительно используют Roboto.

3. Лато

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

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

Знакомство и теплота также являются важными темами шрифта. Lato (лето по-польски) также был разработан с учетом летнего настроения. Он жесткий, но не слишком, издает серьезный, но успокаивающий тон.

Хороший пример использования Lato можно найти на корпоративном венчурном сайте Bundl.

4. Гельветика

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

Helvetica изначально была разработана в 1957 году как нейтральный шрифт, который можно было использовать практически везде. Он отлично выполнил эту роль, быстро зарекомендовав себя как один из самых популярных шрифтов в Интернете. Шрифт облегчает чтение слов на расстоянии, а также идеально подходит для заголовков. Он также остается разборчивым и читаемым независимо от размера шрифта вашего текста.

Helvetica также постоянно развивается в ногу со временем благодаря своей гибкости. Бренды в разных отраслях так или иначе используют Helvetica, а именно: BMW, Motorola, Nestle, Microsoft и Apple. Государственные органы, такие как НАСА и Европейский Союз, также используют Helvetica.

5. Проксима Нова

Бывший глава отдела дизайна Facebook Кэмерон Молл опубликовал статью об истории Proxima Nova. Он описывает шрифт как «невероятно универсальный для цифровых интерфейсов, работает как рабочая лошадка в разных размерах и замечательно выглядит на дисплеях Retina».

Proxima Nova — это начертание шрифта, предназначенное для передачи округлости таких шрифтов, как Futura, и геометрии таких шрифтов, как Helvetica. Однако в этом отношении он не уникален, поскольку другие шрифты также пытались сделать то же самое. Gotham был более популярен, чем Proxima Nova в начале 2000-х. Молл утверждает, что раннее появление Proxima Nova в сети сделало его культовым шрифтом.

С тех пор он стал самым популярным коммерческим шрифтом в Интернете.

6. Монтсеррат

Шрифт Montserrat был вдохновлен одноименным бразильским районом. Он пытается уловить атмосферу старой типографики Буэнос-Айреса и перенести ее в современные средства массовой информации. Из-за этого Монтсеррат вызывает у зрителей ностальгию и знакомство. Он задает серьезный, но дружелюбный тон для всех видов рекламных материалов.

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

7. Рейлвей

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

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

8. Источник без профи

Source Sans Pro — первое семейство шрифтов Adobe с открытым исходным кодом. Он предназначен для особенно хорошей работы с пользовательскими интерфейсами. Его округлые формы облегчают восприятие букв, максимально увеличивая расстояние между символами.

Наиболее заметным качеством Source Sans Pro является его разборчивость, и вы можете легко отличить похожие символы благодаря некоторому стилистическому выбору дизайна. По своей сути Source Sans Pro — это доступность. Он легко читается и имеет профессиональный тон. Стэнфордский университет и Adobe используют этот шрифт для своих веб-сайтов.

9. Поппинс

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

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

Анимационная студия Wonderlust входит в число 8,1 миллиона веб-сайтов, использующих этот шрифт.

10. Грузия

Разработанный Microsoft шрифт Georgia предназначен для чтения в цифровом формате. Он выглядит элегантно и разборчиво даже на экранах с низким разрешением.

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

Microsoft регулярно обновляет шрифт, чтобы придать ему более современный и гибкий вид. Обновленная версия Georgia Pro доступна для покупки. Однако пользователи Microsoft могут получить шрифт бесплатно в магазине Microsoft.

11. Дисплей Playfair

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

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

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

1. Спаривание и комбинация шрифтов.

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

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

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

2. Создание пользовательского шрифта.

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

3. Лицензирование и права использования.

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

4. Тестирование и оптимизация.

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

РЕКОМЕНДУЕМАЯ ЧТЕНИЕ: Как создать бесшовный рабочий процесс веб-дизайна и разработки

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

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

1. Загрузите и установите шрифты.

В некоторых творческих наборах уже есть предустановленные шрифты, готовые к использованию. Однако, если вы обнаружите, что шрифт, который вам нравится, отсутствует в вашем каталоге, вы можете просто поискать его в Интернете. Вы также можете выбрать, какой формат вы хотите загрузить (например, будете ли вы использовать TTF/OTF, WOFF или оба).

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

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

Просто дважды щелкните файл, а затем нажмите «Установить» на всплывающем экране предварительного просмотра.

2. Вставьте шрифты на свой сайт.

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

Имейте в виду, что существует контрольный список веб-дизайна, прежде чем опубликовать свою веб-страницу.

3. Обеспечьте кросс-браузерную совместимость.

Наиболее популярные и часто используемые шрифты уже представлены в версиях TTF/OTF или WOFF, что означает, что они корректно отображаются во всех основных браузерах. Однако вы можете столкнуться с нестандартным шрифтом, который выглядит не совсем так, как задумано, поскольку имеет другой формат.

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

Советы по оптимизации веб-шрифтов

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

1. Не используйте слишком много шрифтов.

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

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

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

К сожалению, ни один формат не работает во всех браузерах. Вы должны использовать разные форматы при создании веб-страницы. С помощью Google Analytics вы можете проверить, какие браузеры и устройства наиболее популярны среди ваших посетителей.

Если вам удобно использовать старые браузеры с альтернативными шрифтами, вы всегда можете использовать ярлыки. Но опять же, это не рекомендуется.

Основные выводы

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

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

Свяжитесь с Propelrr сегодня, чтобы узнать больше о концепциях веб-дизайна. Мы более чем рады помочь вам. Если вам нужна дополнительная помощь или дополнительная информация, свяжитесь с нами через Facebook, Twitter или LinkedIn.

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