Красивые веб шрифты. Нужно ли ограничивать набор символов? Как браузеры отрисовывают шрифты

• Перевод

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck ; создание нового формата шрифтов — архивированного файла шрифта WOFF.

* Мало что из этих шрифтов есть для кириллицы, поэтому эта подборка больше подойдет для «аутсорсеров». Будем надеятся, что скоро появится хоть часть этих и не только шрифтов для славянских языков на кириллице. Добавить метки

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

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

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

1. Слишком мелкий шрифт

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

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

Проведенное в 2013 году исследование показало падение средней продолжительности концентрации внимания до 8 секунд, что на 1 секунду меньше, чем у золотой рыбки. Возможно ли это?

Чтобы сразу привлечь внимание посетителей, нужно:

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

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

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

Ниже мы приводим несколько примеров отличного веб-дизайна со шрифтами идеального размера.

Совесть

Заголовок: 50 пикселей
Подзаголовок: 36 пикселей
Основной текст: 21 пиксель

Заголовок: 80 пикселей
Подзаголовок: 24 пикселя
Основной текст: 15 пикселей

Заголовок: 60 пикселей
Подзаголовки: 35 пикселя
Основной текст: 18 пикселей

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

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

Шрифт текста в футере может быть небольшим, но если вы хотите, чтобы посетители прочитали написанное там, выбирайте шрифт не менее 16 пикселей.

Совет от профессионалов: Чтобы правильно подобрать тип и размер шрифта, скачайте приложение WhatFont. Это плагин для Google Chrome, который определяет параметры шрифта по клику на него. Открывайте сайты, дизайн которых вам понравился, и собирайте информацию.

2. Слайдеры

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

В большинстве случаев ответ будет отрицательным.

Пип Лайя (Peep Laja), основатель одного из самых известных блогов по ConversionXL, в статье «Игнорируйте моду на слайдеры и карусели (Don’t Use Automatic Image Carousels or Sliders)» приводит цитаты экспертов в сфере интернете-маркетинга:

«Мы неоднократно тестировали динамические блоки и убедились в том, что это малоэффективный способ позиционирования контента» — Крис Говард, CEO WiderFunnel.

«Динамические баннеры — абсолютное зло, и они должны быть немедленно удалены» — Тим Эш, CEO SiteTuners

Также Лайя упоминает два исследования, доказавших неэффективность динамических слайдеров.

Первое исследование проводил юзабилити-гуру Джекоб Нильсен (Jakob Nielsen). Он провел опрос посетителей сайта Siemens о специальном оффере про стиральные машины на главной странице. Сообщение о скидках было написано 98-пиксельным шрифтом, но, к сожалению, посетители его не заметили — оффер затерялся в переключающихся блоках слайдера.

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

Второе исследование проводилось в Университете Нотр-Дам (Индиана, США). Исследователи выяснили, что на слайдер кликает около 1% посетителей сайта, причем 84% кликов приходится на первый слайд.

Зачем размещать слайдер, который займет ценную площадь главной страницы и получит лишь 1% CTR? Зачем досаждать посетителям мелькающими картинками, за которыми непросто уследить? Возможно, стоит предложить им один вариант, если большинство и так выберет первую картинку слайдера?

Так почему же, будучи такими неэффективными, слайдеры так популярны?

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

Но именно владелец лендинга/сайта должен отдавать себе отчет, будет ли этот слайдер эффективным и действительно ли это лучший способ донесения информации. Пип Лайя, Крис Говард (Chris Goward, Тим Эш (Tim Ash)) и многие другие известные интернет-маркетологи больше не верят в это.

Решением проблемы должно стать не копирование понравившегося макета в деталях, включая слайдер на главной странице, но попытка самостоятельно ответить на вопрос: «Как должна преподноситься именно ваш оффер?».

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

Лаконичная страница с отличным дизайном и высокой конверсией вполне обошлась без слайдера. Превосходная работа, не так ли?

Для достижения аналогичных результатов на следуйте этим правилам:

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

3. Неконтрастные шрифты

Еще одна большая ошибка — использование низкоконтрастных шрифтов.

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

Содержимое посадочной страницы должно быть максимально читабельным. Согласно исследованиям, с возрастом роговица глаза пропускает все меньше света: в 40 лет через нее проходит в два раза меньше света, чем в 20, к 60 годам количество поступающего в глаз света сокращается еще на 20%. А теперь прибавьте к этому людей с более серьезными проблемами со зрением.

Принимая во внимание эти цифры, вы действительно хотите усложнить восприятие контента, особенно после потраченных на привлечение посетителей сил и средств?

Всегда используйте контрастные шрифты: светлые на темном фоне и наоборот. Изредка возникает необходимость использовать цветной шрифт помимо черного или белого. Иногда дизайнеры используют светло-серый шрифт на белом фоне и светло-синий — на темно-синем. Зачем? Неужели так удобнее читать? Или внешние эффекты стали важнее содержания текста? Книги печатаются черными чернилами на белой бумаге по одной простой причине — так удобнее читать. Лендинги и сайты должны следовать этому правилу.

Ниже представлены примеры лендингов с низкой контрастностью текста:

Винни Пух

Каргомарт

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

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

Дополнительный совет: важна не только контрастность текста. Также будьте аккуратны с использованием реверсивного шрифта. Реверсивный шрифт — это белый текст на черном (или цветном) фоне вместо черного на белом.

Дэвид Огилви, величайший маркетолог современности, утверждал, что в рекламном тексте никогда не следует использовать реверсивный шрифт. Колин Уилдон, редактор крупнейшего в Австралии автомобильного ресурса, решил проверить эту теорию. Полученные им результаты поразительны:

• черный текст на белом фоне: 70% хорошо, 19% удовлетворительно, 11% плохо
• белый текст на черном фоне: 0% хорошо, 12% удовлетворительно, 88% плохо
• белый текст на фиолетовом фоне: 2% хорошо, 16% удовлетворительно, 82% плохо
• белый текст на синем фоне: 0% хорошо, 4% удовлетворительно, 96% плохо

Удивительно: результаты черного текста на белом фоне практически противоположны обратному сочетанию!

4. Неправильная высота строки

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

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

Хорошая новость: у опытного веб-дизайнера рука набита на многих прошлых проектах, и он сможет подобрать подходящую высоту строки «на глаз».

Плохая новость: дизайнер среднего уровня может не заметить проблемы и выбрать неверное решение.

Крис Пирсон (Chris Pearson), дизайнер проекта DIYThemes, серьезно озаботившись этой проблемой, создал калькулятор, который вычисляет высоту строки по принципу «золотого сечения». Достаточно ввести размер шрифта и ширину строки, а калькулятор сам подсчитает идеальную высоту.

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

5. Слишком длинная строка

Еще одна возможная ошибка — слишком большая ширина текста.

Существует ли оптимальная длина строки?

Слишком короткие — нагружают глаза, что быстро утомляет.

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

Для решения этой проблемы институт Бэймард рекомендует выставить максимальную ширину текста в 516 пикселей, что при использовании шрифта 18 пикселей составляет 65 символов в строке. Эти наиболее комфортные параметры текста для чтения онлайн приведены на картинке ниже

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

Следующий в списке грехов веб-дизайна — пренебрежение цветовыми акцентами.

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

Кажется, все просто. Но нередко дизайнеры не используют яркий акцент на самых основных СТА-кнопках, вместо этого они выбирая один из основных цветов лендинга.

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

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

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

от Deni K for Civil Pour

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

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

Важность последовательности

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

Соответствие вашим существующим шрифтам бренда

от FuturisticBug для Nordkern

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

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

Еще нет шрифтов и указаний
—

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

Выясните личность вашего бренда

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

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

Выберите шрифты, соответствующие вашему бренду

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

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

by gotza

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

Что такое безопасные веб-шрифты?
—

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

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

Какие типы шрифтов подходят для Интернета и почему это важно?
—

через Google Fonts.

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

Как объединить разные шрифты в веб-дизайне
—

Когда вы создаете сайт, скорее всего, вам понадобится больше одного шрифта. Существует три основных правила, которые вы хотите использовать при объединении шрифтов:

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

by MarkoSimić.

Вот как это выглядит в действии: во-первых, определите основной шрифт, который является наиболее заметным и должен использоваться для заголовков. Совет. Вы можете сопоставить этот шрифт с стилем вашего логотипа . Как правило, вы хотите, чтобы ваш основной шрифт был привлекательным. Мне очень нравятся тяжелые шрифты, такие как Rubic Black или слегка округленный, как Nunito для заголовков, но какие шрифты вы выбираете, полностью зависит от вашего бизнеса и брендинга. Затем выберите дополнительный шрифт, который будет использоваться для основного текста. Этот должен быть легко читаемым при использовании для более длинных текстовых проходов даже на небольших экранах, поэтому мы могли бы выбрать шрифт, например Noto Sans, в дополнение к нашим основным параметрам шрифта. И, наконец, ваш третий шрифт должен быть шрифтом с акцентом. Этот шрифт можно использовать на кнопках, CTA или чтобы подчеркнуть некоторые части текста, чтобы привлечь внимание ваших посетителей. serrat будет хорошо работать с нашими первичными и вторичными выборами.

Как различные типы шрифтов влияют на ваш веб-дизайн
—

Как сказал великий Винсент ван Гог: «Великие дела не совершаются по импульсу, а ряд мелких вещей объединяются», поэтому разумно выбирайте шрифты. Умная комбинация шрифтов может оказать мощное влияние на ваш веб-дизайн.

от LoudFrog для Coffee And Chokes BJJ

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

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

Скажите это шрифтом

—

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

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

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

1. Montserrat

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

2. Abril Fatface

Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.

3. Playfair Display

Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.

4. GT Walsheim

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

5. Merriweather

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

6. Josefin Sans

Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.

7. Gravitas One

Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.

8. Jura

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

9. League Gothic

Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.

10. Fjord

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

11. Amaranth

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

12. Poly

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

13. Gentium Basic

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

14. Open Sans

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

15. Ledger Regular

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

16. Signika

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

17. Josefin Slab

Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.

18. Forum

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

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

20. Arvo

Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.

21. Bevan

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

22. Old Standard TT

Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.

23. Kreon

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

24. Droid Sans

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

25. Italiana

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

26. Vollkorn

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

27. Actor

Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.

Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.

31. Ubuntu

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

32. Rosario

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

33. Roboto Slab

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

34. Oswald

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

35. Stalemate

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

36. Crimson Text

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

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

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

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

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

В основном разрабатывая контентную часть дизайна используются две разновидности шрифтов:

• шрифты с засечками
• рубленые шрифты (шрифты без засечек)

Шрифты с засечками — (англ. serif - засечка) шрифты начертание которых начинается и заканчивается штрихами. Например Times New Roman.

Шрифты без засечек (рубленые шрифты) — (англ.sans-serif -без засечки) шрифты со строгими ровными линиями без засечек. Например Arial.

Ниже Вы можете увидеть скриншот шрифтов с засечкой и без.

Шрифты для web дизайна:

• Arial
• Arial Black
• Arial Narrow
• Book Antiqua
• Century Gothic
• Comic Sans MS
• Courier New
• Franklin Gothic Medium
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (различные символы и знаки)
• Wingdings (различные символы и знаки)

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

Из стандартных шрифтов в Windows не имеют курсива:

• Arial Black
• Comic Sans MS
• Franklin Gothic Medium
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

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