Типографика: процесс выбора шрифта. Информационные материалы по CMS Joomla

Какой шрифт использовать на сайте?

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

Многие шрифты уже по умолчанию установлены на наших компьютерах и ноутбуках. Это такие шрифты, как: Arial, Georgia, Comic Sans MS, Times New Roman, Verdana, Tahoma и другие. Но если вы будете устанавливать нестандартный шрифт на сайт, следует помнить, что у посетителей вашего сайта может не оказаться такого шрифта, и страница будет отображаться не так, как вы задумали.

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

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

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

Из каких критериев состоит выбор шрифта для сайта?

1. Выбор семейства шрифта

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

• Arial
• Times New Roman
• Georgia
• Trebuchet MS

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

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

Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта. Решение проблемы было простым: просто скопировал весь.js файл к себе на хостинг и подгружать его с моего хостинга. Поэтому лучше всего, когда весь сайт грузится с Вашего же хостинга. Однако перенести шрифты к себе на сайт не получится, придется всегда грузить их с сайта Google.

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

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

2. Выбор размера шрифта

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

3. Выбор цвета шрифта и фона под него

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

Список сочетаний цвета шрифта и фона (в порядке убывания читаемости):

• Черный на белом;
• Черный на желтом;
• Зеленый на белом;
• Синий на белом;
• Зеленый на красном;
• Красных на желтом;
• Красный на белом;
• Оранжевый на черном;
• Черный на пурпурном;
• Оранжевый на белом;
• Красный на зеленом;

Чем выше в списке сочетание цвет/фон, тем лучше его читаемость.

4. Другие мелочи

К этим мелочам я бы хотел отнести следующее:

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

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

Шрифты используемые в веб-дизайне

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

Подходит больше для технической тематики, имеет средне-широкие буквы.

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

Trebuchet MS

Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman

Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif

Системный шрифт Windows, хорошо читается при разных режимах.

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

Так какой все таки шрифт считается самым оптимальным?

Мое личное мнение полностью совпадает с исследованиями ученых:

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

Американские специалисты отмечают: шрифт Verdana 10-13 кегля наиболее комфортен для восприятия с экрана. Преимущества шрифта - отсутствие засечек, увеличенный межстрочный интервал, большая высота строчных букв без выносных элементов и четкие различия между знаками схожего начертания (такими как i/I/L/l/1).

Создатель шрифта Verdana - художник Мэттью Картер (Matthew Carter). Он разработал данный шрифт для компании Microsoft в 1996 году. Целью было создание шрифта, который легко читается с экрана даже при малом размере букв. Сегодня Verdana входит во все версии Windows, Office и Internet Explorer для операционных систем Windows и Macintosh.

Плюс все перечисленные выше шрифты.

О базовых принципах работы с типографикой.

В закладки

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

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

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

Определите свою цель

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

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

Выбирайте шрифт, соответствующий стилю иллюстраций

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

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

Определите свою аудиторию

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

Например, некоторые шрифты лучше подходят для детей. Поскольку они только учатся читать, для них лучше всего подходят легкочитаемые шрифты с крупными и различимыми буквами. Хороший пример такого шрифта - Sassoon Primary. Его создала Розмари Сассун, основываясь на собственных исследованиях того, какие буквы легче всего считываются детьми.

Sassoon Primary

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

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

Ищите вдохновение

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

Идеи для шрифтов

Если вы не знаете, какой шрифт выбрать, статья The 100 Best Free Fonts из CreativeBloq может быстро настроить вас на нужный лад. В ней автор объясняет, чем мотивирован дизайн каждого из ста представленных шрифтов.

Другой полезный источник идей - это 100 Greatest Free Fonts Collection for 2015 от Awwwards. К тому же, Invision не так давно огромный список ресурсов о типографике. Там источников идей предостаточно.

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

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

Идеи для сочетаний

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

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

Выберите свои шрифты

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

Прежде чем выбрать шрифт, узнайте, для чего он создавался

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

Сочетание двух шрифтов, контрастирующих друг с другом

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

Для веб-шрифтов хорошо подходят Google Fonts , Typekit , и Font Squirrel . Google Fonts бесплатны, а в Typekit и Font Squirrel есть и бесплатные, и платные шрифты.

Определите размеры шрифтов

Разобравшись с комбинациями шрифтов, займитесь их размерами. Для этого отлично подходит Modular Scale от Тима Брауна, главы отдела типографики Adobe. Фактически Modular Scale - это система для идентификации исторически сложившихся идеальных соотношений размеров шрифтов.

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

Золотое сечение (1:1.618)

1.000 x 1.618 = 1.618

1.618 x 1.618 = 2.618

2.618 x 1.618 = 4.236

4.236 x 1.618 = 6.854

6.854 x 1.618 = 11.089​

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

​Золотое сечение (1:1.618)

11.089 x 1.618 = 17.942

17.942 x 1.618 = 29.03

29.030 x 1.618 = 46.971

46.971 x 1.618 = 75.999

75.999 x 1.618 = 122.966

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

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

Шрифты имеют огромное значение в дизайне. В статье мы расскажем:

Как сочетать несколько шрифтов на одной странице;

Как создать контраст при помощи шрифтов.

1. Где брать шрифты?

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

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

Вот несколько ресурсов, где можно найти шрифты:

• http://www.google.com/fonts/ - каталог свободных шрифтов от Google;
• http://www.fontsquirrel.com/ - агрегатор и конвертер шрифтов;
• http://www.myfonts.com/ - большой каталог шрифтов;
• http://www.fonts.com/ - еще один большой каталог шрифтов;
• http://webfont.ru/ - коллекция бесплатных шрифтов.

2. Как выбрать шрифты?

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

При работе с визуальным редактором доступны разные типы шрифтов:

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

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

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

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

Определите свою цель

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

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

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

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

Очертите свою аудиторию

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

Например, некоторые шрифты больше подходят для младшего возраста. Детям, которые только учатся читать, нужны очень разборчивые шрифты с чёткими контурами букв. Хорошая иллюстрация к этому - Sassoon Primary . Sassoon Primary - проект Rosemary Sassoon , в основе которого лежат её исследования на тему того, какие шрифты детям проще всего считывать.

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

При выборе шрифта учитывайте особенности и потребности своей целевой аудитории. Говоря проще, ставьте себя на их место.

Ищите вдохновение

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

Вдохновение: шрифты

За свежими идеями насчет шрифтов можете обратиться к The 100 Best Free Fonts от CreativeBloq - это отличный источник, который придаст вам нужный настрой. В своей статье CreativeBloq объясняет логику, которой они следовали при выборе каждого из шрифтов.

Кроме того, Invision составил целый с ресурсами по типографике. Там вы найдёте массу источников для вдохновения.

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

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

Вдохновение: сочетания

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

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

FontPair - еще один ресурс о том, как лучше выбирать сочетания, предназначенный конкретно для работы с Google Fonts . На ресурсе предусмотрена возможность сортировки по сочетаниям стилей (например, sans-serif и serif или serif и serif).

И наконец, в Сети полно наборов готовых сочетаний от профессиональных дизайнеров. Скажем, Typography: Google Fonts Combinations или Typography: Google Fonts Combinations Volume 2 . Просто вбейте запрос «font pairing» на Behance , Dribble и других подобных сайтах.

Выберите шрифт

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

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

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

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

Для веб-шрифтов можно использовать Google Fonts , Typekit , и Font Squirrel . На Google Fonts всё бесплатно, Typekit и Font Squirrel предлагают платные и бесплатные варианты.

Задайте размер

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

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

Поможет решить данную проблему достаточно простым и оригинальным способом. Вы загружаете (со своего компьютера или указав ссылку) картинку или логотип, на которых содержится текст, а сайт выдаёт список шрифтов. Для загрузки подходят файлы размером не более 360 x 275 пикселей и следующих форматов: GIF, JPEG, TIFF, BMP. Иногда может потребоваться ввести соответствующие символы, изображенные на картинке, поскольку система не всегда способна сама их точно опознать.

Для лучшего распознавания системой отдельных символов, разработчики рекомендуют придерживаться следующих рекомендаций. Следует помнить, что чем меньше шрифт, тем более велика вероятность ошибочной идентификации текста. Оптимальным для системы является размер отдельного символа в пределах 100 пикселей (больший размер увеличивает время поиска совпадений). Конечно, ссылаясь на ограничение картинки по ширине, изображение будет содержать всего 3-4 символа, но этого вполне достаточно для определения похожих шрифтов. Сервис успешно работает с цветными картинками, однако высокой точности можно добиться только на черно-белых изображениях.

После загрузки изображения анализатор распознает символы.

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

Есть один недостаток - нет поддержки кириллических шрифтов.

Есть еще один замечательный онлайн сервис по распознанию шрифтов - (What Font is)

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

На сервисе Whatfontis есть 3 пути узнать что за шрифт:

Путь 1

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

По окончанию в самом конце страницы, будет три варианта поиска:

• Display only free fonts or free alternative fonts
  (Отобразить только бесплатные шрифты или альтернативные бесплатные)
• Display only commercial fonts or commercial alternative fonts
  (Отобразить только платные шрифты или альтернативные коммерческие)
• Display all fonts
  (Отобразить все шрифты)

Путь 2
Можно не загружать свою картинку содержащую текст с искомым шрифтом, а указать веб адрес картинки со шрифтом.

Путь 3
Поиск по имени. Можно ввести название шрифта и искать его аналоги.