Часто задаваемые вопросы

 

    ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

https://faq-ru.ru             

 

Как правильно выбрать размер шрифта


процесс выбора шрифта / Цифровые Экосистемы corporate blog / Habr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Другой полезный ресурс — 100 Greatest Free Fonts Collection for 2015 от Awwwards.

Кроме того, 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 предлагают платные и бесплатные варианты.

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

Теперь, когда вы определились с сочетанием, следующий шаг — выставить размеры. Для этого есть замечательный инструмент Modular Scale работы Tim Brown, главного специалиста по типографики в компании Adobe. Modular Scale — это система, определяющая соотношения, которые, как показывает история, наиболее приятны для глаза, и выстраивающая шкалу размеров текста на основании этих соотношений.

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

Golden Ratio (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

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

Golden Ratio (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

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

Minor Second 15:16
Major Second 8:9
Minor Third 5:6
Major Third 4:5

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

Perfect Fourth (3:4)

9.969 x 1.333 = 13.288
13.288 x 1.333 = 17.713
17.713 x 1.333 = 23.612
23.612 x 1.333 = 31.475
31.475 x 1.333 = 41.956
41.956 x 1.333 = 55.927

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

Font Sizes
Header 1: 55px
Header 2: 42px
Header 3: 31px
Header 4: 24px
Header 5: 14px
Body: 17px
Caption: 14px

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

Создайте библиотеку стилей для шрифтов

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

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

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

Обязательно включите в библиотеку стилей следующее: типы шрифтов, цвета, размеры и образцы. Таблица стилей от Google’s Material Design typography— хороший пример того, как её составлять. Также как пособия можно использовать библиотеки стилей от Mailchimp, Apple, и Focus Labs.

Типографика — это область экспериментов, искусство и наука в одном флаконе. Я призываю вас выйти из зоны комфорта и активно исследовать все возможности.

habr.com

Как правильно подобрать шрифт для сайта

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

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.

2. Избегайте шрифтов одного класса

Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.

3. Присвойте шрифтам разные роли

Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

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

4. Контрастная насыщенность шрифтов

Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну.
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

5. Создайте на странице различную тональность текста

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

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

6. Не смешивайте настроения шрифтов

Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

7. Сочетайте яркое с нейтральным

Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon, который относится к классу Old style, но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

8. Избегайте несоизмеримых сочетаний

Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

9. Будьте проще – не используйте более двух шрифтов

Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

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

10. Используйте различные размеры шрифта

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

Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.

В заключение

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

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine (в ред. автора)

html5book.ru

Как выбрать правильный шрифт для сайта и статьи

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

Что такое насыщенность шрифта

Насыщенность шрифта (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть так же дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold).

Каким должен быть размер шрифта на сайте

Размер шрифта зависит от количества текста. Если текста очень мало, и он используется, по сути, только для подписей и комментариев, сделайте его крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно. Если текста достаточно много, наoборот, уменьшите до 18px, так он будет легче читаться.

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

Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

Настройка шрифтов для сайта в зависимости от тональности

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

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

1. Полужирный заголовок и нормальный текст

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

Для каких сайтов подойдет: для любых.

Пример: Страница вакансии. В примере используются шрифты: Open Sans (для заголовков) и Roboto (для текста).

2. Жирный заголовок и нормальный текст

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

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

Пример: Сайт коворкинга. В примере используются шрифты: Ubuntu (для заголовков) и PT Sans (для текста).

3. Жирный заголовок и тонкий текст

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

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

Пример: Страница дизайн-студии. В примере используются шрифты: Noto Sans (для заголовков) и Open Sans (для текста).

4. Тонкий заголовок и тонкий текст

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

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

Пример: Лэндинг мобильного приложения для обработки фотографий.

Примеры сочетаний разных шрифтов

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

Подбираем шрифты для статьи

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

Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет, и текст — это, в основном, подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.

Пример: Страница поста в блоге о моде.


 
Пример: Корпоративный блог.


 
Пример: Статья о контент-маркетинге.

С засечками или без?

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

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

Список хороших шрифтов, в которых есть кириллица

● Futura. Где купить: myfonts.com/fonts/paratype/futura-book
● Proxima Nova. Где купить: myfonts.com/fonts/marksimonson/proxima-nova
● Franklin Gothic. Где купить: myfonts.com/fonts/itc/franklin-gothic
● Graphik. Где купить: type.today/ru/Graphik
● Museo. Где купить: myfonts.com/fonts/exljbris/museo-sans
● Gotham. Где купить: typography.com/fonts/gotham
● GT Walsheim. Где купить: grillitype.com/typefaces/gt-walsheim
● Helvetica Neue. Где купить: myfonts.com/fonts/linotype/helvetica-neue
● 21 Cent. Где купить: myfonts.com/fonts/letterheadrussia/21-cent
● 20 Копеек. Где купить: yurigordon.com/ru/shop/fonts/20kopeek

Читабельность шрифта

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

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

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

Пример 1: Текст читается не очень


 
Пример 2: Текст читается хорошо

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

Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ — ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.

Источник: tilda.education

infogra.ru

Какой размер шрифта лучше для сайтов ? — Хабр Q&A

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

Пять лет назад базовым размером стандартного шрифта, используемого для вывода текстов для чтения, считалось 12-13px. В то время как шрифт в 10-11px использовался для мелких подписей. За последние несколько лет произошло увеличение этих размеров. Сегодняшние сайты, задающие тренды, используют для вывода тестов для чтения размер шрифта 14-16px. Соответственно для мелких подписей используется уже шрифт не менее 12-13px.

Связано это прежде всего с тем, что за последнее время сильно увеличилось разрешение экранов при сохранении их физических размеров, а то даже и при их уменьшении. А это значит, что увеличивается плотность пикселей, а значит и шрифт одного и того же размера начинает выглядеть мельче. В 2012 году самым популярным стал экран с разрешением 1366px шириной, вытеснив лидера всех прошлых лет с шириной 1024px: habrahabr.ru/post/141948/.

По моему личному опыту скажу, что на мониторах с разрешением 1366px и выше стандартные системные шрифты размером 12px в текстах для чтения выглядят уже очень недружелюбно, приходится всё время увеличивать их размер с помощью браузера или наблюдать, как люди щурятся, вглядываясь в экран. Оптимальным оказывается как раз размер 14-16px.

Подбирая размер шрифта для чтения текста на вашем сайте, нужно понимать, какова статистика экранных разрешений вашей аудитории. В среднем по рунету мы видим, что пользователей с разрешением 1366px и выше примерно столько же, соколько и всех остальных: www.liveinternet.ru/stat/ru/resolutions.html?perio... Однако для Хабра, например, таких пользователей в 2 раза больше. А значит, для Хабра нужно делать размер шрифта крупнее.

Ну и конечно, не стоит забывать о том, что системные шрифты с засечками (Times New Roman, Georgia) выглядят мельче шрифтов без засечек (Verdana, Tahoma, Arial) при одних и тех же размерах. Чтобы Georgia смотрелась также как Verdana в размере 12px, нужно ставить ей 14px. Точно также отличаются видимым размером и несистемные, подгружаемые шрифты. На Lookatme используют шрифт ProximaNova-Regular размером 16px. Если вы попробуете прямо в браузере удалить этот шрифт из стилей, оставив только системый sans-serif, то увидите как этот системный шрифт увеличится. И чтобы он по размеру выглдяел бы как подгружаемый, нужно будет уменьшить в стилях размер до 15px.

qna.habr.com

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

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

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

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

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

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

Разборчивость очень важна

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

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

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

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

Самый часто задаваемый вопрос при выборе шрифта: с засечками или без?

Самые распространение категории шрифтов – это serif или sans serif. Serif – это шрифты с заческой на концах букв. Sans serif же, соответственно – шрифты, которые засечек не имеют.

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

Огромное количество хороших шрифтов существует и в той, и в другой категории. Можно намного лучше начать понимать шрифты, изучая различные классификации, такие как humanist, modern, slab serif, geometric, old style и transitional. Некоторые дизайнеры даже советуют создавать свои собственные категории для удобной работы с различными проектами.

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

Автор статьи : Designyourway

Перевод : Sayhi

Мы рекомендуем :

20 бесплатных шрифтов, созданных в 2015 году

Микола Ковальчук: «Хороший, поганий, бридкий: Як обирати шрифт»

100 лучших бесплатных шрифтов

say-hi.me

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

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

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

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

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

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

Разборчивость очень важна

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

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

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

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

Самый часто задаваемый вопрос при выборе шрифта: с засечками или без?

Самые распространение категории шрифтов – это serif или sans serif. Serif – это шрифты с заческой на концах букв. Sans serif же, соответственно — шрифты, которые засечек не имеют.

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

Огромное количество хороших шрифтов существует и в той, и в другой категории. Можно намного лучше начать понимать шрифты, изучая различные классификации, такие как humanist, modern, slab serif, geometric, old style и transitional. Некоторые дизайнеры даже советуют создавать свои собственные категории для удобной работы с различными проектами.

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

Источник: say-hi.me
Фото на обложке: ShutterStock

infogra.ru

Как выбрать и использовать шрифт: 10 советов

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

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

1. Объедините текст на странице в несколько блоков

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

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

2. Выберите оптимальное позиционирование и выравнивание шрифта

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

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

3. Подбирайте шрифты, соответствующие характеру вашего продукта и бренда

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

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

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

4. Убедитесь в читабельности текста

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

5. Выберите оптимальный размер шрифта и попробуйте использовать разные размеры

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

6. Попробуйте Caps Lock

Когда речь идет о большом количестве текста, заглавные буквы уменьшают читабельность. Однако Caps Lock уместно использовать для повышения визуальной привлекательности заголовков, подзаголовков, коротких слоганов. Обратите внимание на обложку страницы компании Nike в Facebook:

7. Выберите оптимальный интервал между буквами

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

8. Попробуйте использовать разные пары шрифтов

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

9. Убедитесь, что текст расположен там, где его удобно читать

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

10. Уменьшите объем текста

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

Выбирая шрифт…

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

Адаптация материала 10 Helpful Tips for Choosing and Using Fonts by Melanie Perkins.

kak-vybrat-i-ispolzovat-shrift-10-sovetov

texterra.ru

Правила подбора шрифтов

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

Использование шрифта в сочетании с иллюстрациями

Чтобы правильно подобрать шрифт для сочетания его с иллюстрациями, профессиональные дизайнеры советуют отвлечься на время от функциональности шрифта, не пытаться его «читать», а рассмотреть шрифт как картинку. Подобно тому, как изображение содержит свои характерные черты (например, толщина и жесткость кисти), буквы шрифта тоже можно рассматривать как подобный рисунок. Анализируйте отличительные черты стиля изображения и подбирайте шрифт похожего начертания. Если картинка состоит только из прямых горизонтальных или вертикальных линий, то и шрифт ей Вы подбираете такой же «прямолинейный». Например, шрифт Mashine. Если наоборот, рисунок весь живой, плавный и «рукописный», то и шрифт к нему Вы подбираете такой, который имитирует рукописный почерк. Например, такой как Betina. Каждая надпись, особенно в рекламной продукции, должна иметь свой художественный облик и, помимо смысловой нагрузки, нести в себе образность, способствующую эмоциональному зрительному восприятию. Существуют особенности корректного применения шрифта и более тонкие, относящиеся уже не к рекламной продукции, а к применению в больших массивах текста, а именно в книгах, журналах, газетах и т.п. Если речь идет о создании сайта или рекламного объявления, дизайнерам приходится учитывать еще и другие условия: и общую тему, и характер текста, и место, и причину публикации и т.д. и т.п. Среди всех требований к подбору шрифтов можно выделить самое главное правило – для больших текстов шрифт должен быть легко читаемым. Остальные правила можно свести к следующим основным:

Общие правила подбора шрифтов

Размер шрифта

Размер шрифта значительно влияет на удобочитаемость текста. Все рукописные шрифты (каллиграфические и свободные) лучше распечатывать в соответствии с размером букв, написанных от руки (14-18 пунктов). В мелких кеглях прочесть такой текст окажется непросто. Далеко не все шрифты, даже текстовые, терпят уменьшение до 6-7, тем паче меньших кеглей. Но если одни (Академическая, Бодони) протестуют категорически, то другие (Банниковская, ITC Гарамон) переносят относительно неплохо. В докладе британского типографа Марка Барретта на конференции ATypI в Хельсинки в сентябре 2005 г. приводятся следующие правила построения или подбора шрифта для использования в мелком кегле:
  1. Рисунок шрифта должен быть простым, ясным и привычным. Революционные формы и дизайнерские изыски неуместны.
  2. Шрифт должен обладать увеличенным очком строчных знаков и широкими пропорциями.
  3. Контрастность относительно слабая, приблизительно 3/4.
  4. Открытые формы предпочтительнее закрытых.
  5. Засечек либо вовсе нет, либо следует их "усилить", придав простую и даже грубоватую форму. Шрифт вообще не должен иметь деталей, исчезающих при уменьшении.
Тип шрифта и уместное его использование Выбирайте шрифт в зависимости от того, где вы собираетесь его применить. К примеру, рубленый шрифт в рекламе более удобочитаем, чем новая антиква, и лучше других шрифтов подходит для выполнения плакатов и лозунгов. И, наоборот, в почетных грамотах, по сравнению с новой антиквой, рубленый шрифт выглядит невыразительно. Наиболее частая ошибка начинающих - выбор рубленого шрифта для основного текста. Если в печатном издании можно регулировать межсимвольный интервал, то в Интернете это пока вопрос будущего. Из за особенностей начертания рубленых шрифтов (особенно малого размера) буквы сливаются друг с другом, а это, как вы наверное понимаете никак не способствует повышению читабельности текста. Из этого следует четкий вывод. Рубленые шрифты - только большого кегля и с увеличенным межсимвольным интервалом. Рубленые шрифты идеально подходят для заголовков. Они притягивают к себе внимание и заставляют читателя бросить на них взгляд. Гарнитуры с засечками намного более функциональны. Благодаря именно своим засечкам, они позволяют набирать тексты небольшого размера (в 10-12 пунктов) с потерей читабельности равной нулю. Но, к огромному сожалению, такие шрифты в своем большинстве не выразительны. Для заголовка лучше выбирать рубленый шрифт. Если не представляется возможным менять шрифт, тогда стоит прибегнуть к какому-либо приему выделения. Не злоупотребляйте шрифтами с засечками, если вы подбираете шрифт для компьютерных текстов. Чем шрифт проще, тем он легче читается. При работе с декоративными гарнитурами будьте предельно осторожны! При всей своей красоте и изящности у них есть один сильный недостаток - их трудно читать. Чаще всего декоративные шрифты используются в логотипах и для создания внутреннего настроения на веб-странице (например, страницы с древне-русской тематикой используют старославянские гарнитуры и т.д.). Выбор необычного шрифта может быть обусловлен только неординарностью текстов, в которых такой шрифт применен. Поэтому используйте нестандартные шрифты с осторожностью. Предпочитайте деловые, ясные и простые шрифты, например, Arial, Bastion, Pragmatica, Futura или Gelvetica. Рекомендуют выбирать для заголовков тот же шрифт, что и для основного текста.

Цвет шрифта

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

Средства выделения шрифтов

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

Прописные и строчные буквы

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

Выравнивание текста

Не забывайте о выравнивании. Приведите текст в порядок и проследите, чтобы слова не "прыгали" по странице без смысла: глаз должен свободно скользить по буквам, мозг не должен тратить чрезмерные усилия на чтение. Строки, выровненные по левому краю или по центру, читаются легче, чем выровненные по ширине. Выравнивание по правому краю допустимо только как специальный прием. Лучше не располагать строки вертикально. При горизонтальном расположении строк допустим небольшой (не более 20 градусов) наклон.

Психология восприятия шрифта в текстах

Многие психологи и графологи утверждают, что с помощью правильного подбора шрифтов, можно передать настроение, задать общий настрой при чтении текста. Если принять во внимание, что формы (геометрические) имеют определённое психологическое и эмоциональное воздействие на человека, то такое утверждение не лишено основания. Как известно, различные шрифты имеют разное написание, размер и кернинг. Соответственно слово, набранное одним шрифтом, будет существенно отличаться по ФОРМЕ от этого же слова, набранного другим шрифтом. Конечно, данная тема скорее относится к печатной рекламе, написанию слоганов, рекламных текстов. Но ведь шрифт используется и при написании логотипов. В конце концов, есть такой вид логотипов, как шрифтовые логотипы. Человеческий глаз воспринимает не отдельные буквы, а группы букв или слов. Это свойство глаза, охватывать группы букв, их форму, а также определённую длину строк является фактором, ускоряющим или замедляющим чтение. Поэтому, помимо рисунка шрифта не менее важно правильно выбрать его размер, расстояние между буквами, строчками, длину строк и расположение текста на странице или листе печатной продукции. По устоявшемуся мнению многих экспертов, строгие прямолинейные шрифты, обладающие «машинными», «техническими» качествами, привлекательнее для мужчин, а у женщин фаворитами являются более округлые и пышные шрифты с выраженными «хвостиками». Различные исследования показали, что шрифты с засечками читаются легче, так как засечки помогают взгляду передвигаться от буквы к букве, и буквы при этом не сливаются друг с другом. С другой стороны, что буквы без засечек легче читать в шрифтах очень большого или очень малого размера. Но установить единообразные правила очень сложно (а если точнее, практически невозможно), так как кроме начертания, огромное значение имеет кегль шрифта, длина строк, интерлиньяж, свободное пространство и даже бумага. А если обратить внимание на то, что в последнее время течение моды поставило под вопрос саму удобочитаемость (для привлечения внимания используются причудливые шрифты и различные эффекты их размещения).

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

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

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

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

Прямолинейные и угловатые шрифты

Ассоциируются с непреклонностью, жестокостью; они характеризуются холодностью, безликостью и механистичностью. В терминах психоанализа их определяют такие выражения, как «эмоционально зажатый» или «крепкий задним умом».

Гарнитурные шрифты

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

Декоративные шрифты

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

Шрифты рукописного стиля

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

Источник

www.ph4.ru

Как выбрать шрифт — инструкция для маркетологов — Netpeak Blog

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

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

Типы шрифтов

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

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

Засечки — это небольшие штрихи на конце буквы.

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

шрифты с засечками

Длинные тексты любят шрифты с засечками

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

Опровергать эту теорию я не буду — шрифты с засечками и по сей день лидируют в использовании для статей или книг. Самые популярные из них: Times New Roman, Georgia, Courier New.

Для коротких текстов и больших размеров зайдут гротески

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

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

Все больше современной литературы печатается с использованием шрифтов этого типа: Verdana, Tahoma, Montserrat, Open Sans и Helvetica (кстати, про этот шрифт сняли целый фильм).

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

гротески, чтобы бренды выглядели современно и доступно

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

бренды направлены на упрощение шрифтов

Размер имеет значение

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

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

Классические цвета для основного текста

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

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

светлый текст на темном фоне

Не уменьшайте интервалы между строк

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

Что это такое: интервал 100% означает, что размер шрифта равен ширине между строк, например, текст написан восемнадцатым шрифтом и восемнадцатым интервалом (в пунктах — единица изменения размера шрифта).

интервал 100%

Расставляйте акценты

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


Например, текст, написанный прописными буквами не подходит для длинного чтения. И НИКОГДА И НИГДЕ НЕ ПИШИТЕ ТЕКСТ ОДНИМИ ЗАГЛАВНЫМИ БУКВАМИ, ОСОБЕННО, КОГДА ШРИФТ ПОЛУЖИРНЫЙ.

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

шрифты с акцентами

Учитывайте настроение шрифта

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

Сочетайте, чтобы быть в тренде

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

сочетайте шрифты

Скачивайте с проверенных источников

Есть масса бесплатных, платных и пиратских шрифтов. Самые популярные бесплатные шрифты собраны в библиотеке Google Fonts. Большой выбор кириллических и латинских шрифтов на Webfonts. С помощью фильтров бесплатные шрифты можно найти даже на MyFonts. Кстати, если хотите найти шрифт, но не знаете его названия, сервис WhatTheFont может с высокой точностью определить шрифт по картинке.

Запомнить

  1. Используйте шрифты с засечками для лонгридов и без засечек для короткого текста или наоборот. Выбирайте подходящий вариант исходя из вашей ситуации и предпочтений.
  2. Выбирайте удобный для чтения размер шрифта для основного текста и делайте акцент там, где это необходимо.
  3. Использование темного шрифта на светлом фоне повышает восприятие информации.
  4. Между фоном и цветом шрифта самое главное — это достаточный контраст.
  5. Соблюдайте нормальный межстрочный интервал (130-150%).
  6. Расставляйте акценты с помощью начертаний и насыщенности шрифта.
  7. С помощью цвета можно привлечь внимание к определенному сообщению в тексте.
  8. Никогда не пишите текст одними заглавными буквами.
  9. Выбирайте шрифт, релевантный изложенной информации.
  10. Сочетайте гротеск для заголовка и антикву для основного контента.

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

netpeak.net

Типографика в вебе / Habr

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

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

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

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

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.

Гарнитуры можно разделить на две основные категории:

  • Антиква — шрифты с засечками.
  • Гротеск, соответственно, — шрифт без засечек.

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

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

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

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

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

Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?


Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

Не знаем какого размера должен быть шрифт

Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор — в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.

Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование — Установки — Основные. Далее — Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».

Длина строки — разве это важно?

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

Интерлиньяж соответствует размеру шрифта

Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.

Выбираем любой понравившийся шрифт

Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru, если, конечно, заказчик не предоставил вам свой шрифт.

O Lorem, lorem...

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

Ссылки

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

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

Выравнивание

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

Контраст

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

Стили

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

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

habr.com

Как правильно выбрать шрифт

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

Какова ваша цель?

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

Четкость

На первый взгляд может показаться, что четкость и читабельность одно и то же, но это не так. Четкость относится к дизайну шрифта, например к ширине штрихов, наличию засечек, наличию нового типа элементов дизайна и т.д. При разборчивом шрифте легко отличить одну букву от другой. Например, декоративные шрифты имеют низкую четкость, потому что они в первую очередь должны бросаться в глаза, а не читаться в длину. И наоборот, шрифты, предназначенные для романов или газет имеют очень высокую четкость. Вы должны разработать конкретную общую четкость на основе функции текста.
Рассмотрим следующий пример, где левая часть текста написана Tobin Tax, декоративным шрифтом с засечками. Сравните его с тем же текстом, написанным шрифтом Sabon, классическим и четким шрифтом с засечками. Какой из этих вариантов вы предпочтете?

Советы по четкости:

  • Выбирайте шрифты со стандартными буквами.
    Буквы с уникальными формами, художественными деформациями, чрезмерными украшениями или другими элементами дизайна заставляют читателей сначала обрабатывать увиденное, и мешают сразу воспринимать информацию. Новизна шрифта всегда мешает восприятию текста.
  • Выбирайте шрифты с хорошим интервалом.
    Близкое расположение букв заставляет глаза заполнять оставшееся пространство, что замедляет процесс восприятия информации. Хороший интервал между буквами позволит читателю воспринимать текст быстрее.
  • Выбирайте шрифты с хорошей высотой строчных знаков (x-height).
    Небольшая высота высота строчных знаков уменьшает четкость некоторых букв.
    Обратите внимание: высота строчных букв не должна быть «большой». Размер шрифта и ширина должны выбираться в зависимости от высоты строчных букв.
Читабельность

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

Советы по читабельности:

  • Выбирайте те шрифты, которые были разработаны с той целью, которую вы преследуете (шрифты для заголовков, шрифты для основного текста и т.д.). Шрифт, предназначенный для привлечения внимания, например для заголовков или плакатов, означает, что его нельзя так же эффективно применить в качестве шрифта для основного текста, где нужно читать большое количества текста. С другой стороны, шрифт, предназначенный для длительного чтения, теряет свое воздействие в большом размере.
  • Не выравнивайте текст по правому краю для получения правильных пробелов между словами. Избегайте justify-выравнивания в тексте (растягивания текста на всю строку, чтобы он выглядел более ровно по краям), — это создаёт некрасивые пробелы в тексте, которые мешают читателям правильно воспринимать текст. На данный момент в CSS нет свойства, позволяющего расставлять переносы, но вы можете использовать скрипт Hyphenator.js для правильной расстановки переносов.
  • Убедитесь, что расстояние между строками больше, чем размер вашего шрифта, особенно для многострочного текста. Читателям трудно будет отслеживать строчки и не перескакивать с одной на другую, если строчки расположены слишком близко. Можно спутать строчки при переходе с одной на другую. Сколько раз вы читали одну и ту же строчку текста дважды в тексте с хорошим расстоянием между строк? Наверное, один раз — если, конечно, содержание легко понять. Не заставляйте ваших читателей работать больше, чем им нужно.

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

Аспекты соответствия

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

Назначение дизайна

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

Эстетика

Ваш шрифт должен соответствовать эстетике, ожидаемой аудиторией, для которой предназначен дизайн. Например, если вы разрабатываете дизайн для банка, написание их логотипа или текста для рекламной кампании в шрифте Souvenir может показаться немного легкомысленным, а это не то качество, которое нужно ассоциировать с банкирами. А вот величественный и стабильный Bembo может быть лучшим выбором в этой ситуации. Чем больше вы соотнесете суть шрифта с вашей темой, тем лучше.
В этом примере мы создали две комбинации шрифтов. В первом случае Lithos и Souvenir создают эстетику, более подходящую для детского музея, чем для банка. Вторая комбинация из Clarendon и Bembo подходят этому случаю, как хорошо сшитый костюм — банкиру.

Советы по эстетике:

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

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

Советы по настроению:

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

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

Советы по личному выбору:

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

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

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

Советы по выбору шрифта

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

1. Продумайте иерархию

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

2. Учитывайте опыт других людей

Вы увидите, что дизайнеры до вас уже выработали способы использовать те же шрифты, которые хотите применить вы, так что вам не нужно изобретать колесо. Посмотрите вокруг, и внимательно изучите то, что уже сделали другие. Сайт Fonts In Use, например, содержит информацию о выборах шрифтов, сделанных профессиональными дизайнерами в различных отраслях. И не стоит пугаться, когда вы сталкивались с такими же шрифтами в работе других дизайнеров. Зачастую слова «скучный» и «знакомый» — ваши лучшие друзья, когда речь заходит о выборе типа. Существуют веские причины, по которым некоторые шрифты используются так часто- они просто работают, и работают очень хорошо.

3. Попробуйте сделать проще

Вот несколько советов, которые помогут вам экспериментировать с вариантами шрифта быстро, но вдумчиво:

  • Настройте таблицы стилей и для интернета, и для печати. Это придаст мобильности, потому что их будет легко изменять. Вы можете также использовать для этой цели Web Font Specimen.
  • Поиграйте с иерархией, изменяя размер различных элементов для создания и снятия напряжения.
  • Оцените результаты и попробуйте что-то изменить, но изменяйте только одну вещь за раз.
  • Спросите мнения независимой стороны. Возможно, вы пропустили что-то очевидное.
4. Избегайте ляпов

Например, если вы не знаете истории шрифта, то это может в конечном итоге привести вас к тому, что вы используете его таким образом, что будете выглядеть глупо. Например, вы выбрали Trajan для титульного листа статьи о Древней Греции? Это было бы неуместной неточностью, так как Греция предшествует Риму, а Траян был римским императором. Шрифт Trajan был взят с колонны Траяна, которая является памятником военной победы около 100 года нашей эры. Если вы ответите «Trajan» на вопрос «Какой шрифт вы установите на обложке этой книги о Древней Греции?», то вы будете выглядеть глупо. Все стоит проверять по несколько раз. И иногда стоит быть нейтральным, выбрав какой-нибудь безопасный шрифт для академических тем, например Arno.

5. Избегайте банальных ассоциаций

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

  • Не используйте Papyrus, просто потому что ваша тема имеет отношение к древности, особенно к Древнему Египту. (А лучше вообще не используйте Papyrus)
  • Не используйте Comic Sans только потому, что ваша тема имеет отношение к юмору. ( А лучше вообще не используйте Comic Sans)
  • Не используйте Lithos только потому, что ваша тема имеет отношение к греческим ресторанам.
  • Не используйте Futura только потому, что ваша тема имеет отношение к будущему.

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

6. Подумайте об использовании расширенной версии шрифтов

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

7. Придерживайтесь классических сочетаний

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

8. Используйте ограниченную палитру

Вы услышите много мнений по этому вопросу, но все же это не плохая идея — составить ограниченную палитру шрифтов, которые вам нравится больше всех из списка самых популярных шрифтов всех времен. Они являются наиболее популярными неспроста. Некоторые дизайнеры за время всей карьеры использовали в большинстве случаев менее двадцати шрифтов. Например, вы можете использовать FontShop’s 100 Best Typefaces (на немецком языке, также доступен в формате PDF) в качестве источника. Попытайтесь также добавить к этому списку классических шрифтов несколько новых. А также добавьте парочку уникальных, но универсальных современных шрифтов от независимых разработчиков.
В этом примере объединены Bembo и различные шрифты от Haptic Pro ( группа шрифтов, первоначально разработанной в 2008 году Henning Hartmut Skibbe). Сочетайте старое с новым, и вы сможете разработать свой уникальный стиль:

Последний совет: нарушайте правила

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

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

via

Naikom » Дизайн » Типографика

naikom.ru


Смотрите также

faq-ru.ru

  Карта сайта, XML.