Сайт – это текст!
Если открыть страницу выбранного сайт, то увидим, что львиную долю ее занимает текст. По-разному организованный, но текст. Выделение цветом, размерные буквы, шрифты… Иногда надпись даже выполняет роль изображения. Когда это в балансе, то сайт смотрится читабельно и удобен для пользователя. Как этого добиться?
- Правила подбора шрифтовых пар
- Правило 1: «Мы с Татьяной ходим парой»
- Правило 2: «Гармония в контрасте»
- Правило 3: «Размер, начертание, цвет – разве товарищей нет?».
- Правило 4. «Каркас – всему голова»
- Правило 5. «Подобное к подобному».
- Правила 6. «Фи!!! Какая гадость!».
- Правило 7. «Когда очень хочется, то можно. Но осторожно!».
- Таблица сочетания шрифтов
- Онлайн сервисы для подбора шрифтовых пар
- Примеры готовых пар
- Хорошие шрифтовые пары для:
- Roboto
- Proxima nova
- Montserrat
- Readymag.com
- Google fonts
- Лучшие шрифтовые пары
Правила подбора шрифтовых пар
Со времен первой печатной книги создано много шрифтов. Как прекрасных так и ужасных. Поэтому не все годятся для страниц вашего проекта. Давайте разберемся почему?
Правило 1: «Мы с Татьяной ходим парой»
Одним шрифтом, одного кегля и одного цвета, даже используя форматирование, не добиться выделения фрагментов текста и визуализации, и визуальной же гармонии. Главному шрифту нужен, как минимум, один напарник-противовес.
Однако шрифтовая абракадабра на странице не дизайнерский моветон, а сложности для того, кто смотрит страницу. Если используется более двух шрифтов, то внимание посетителя рассевается, из-за неодинаковости начертания букв текст визуально рассыпается на фрагменты, что затрудняет восприятие.
Чтобы убедиться в этом, поэкспериментируйте со шрифтами на страничке того же Word.
Как показал мировой опыт, лучше, когда используется только пара шрифтов.
Никто не заставляет вас ограничиваться этим числом, но использование большего оправдывается только: информационно, функционально, визуально.
Правило 2: «Гармония в контрасте»
Шрифты одной пары обязаны быть в равной мере как непохожими, так и похожими друг на друга. Добивайтесь гармонии в контрасте. Удачное сочетание образуют шрифты, у которых общие черты. На практике добиться гармонии сложно: признаков несовместимостей шрифтов много. Главная причина… в их слишком большом сходстве.
Правило 3: «Размер, начертание, цвет – разве товарищей нет?».
Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.
3 самых важных правил типографики в веб дизайне и главные тенденции.
Ничто не мешает использовать размер, начертания и цвет в виде усиления контраста и гармонии при использовании в паре других шрифтов. Но тут важно, соблюсти баланс. Ведь визуальные варианты одного шрифта обречены на общие черты, в отличие от пары разных.
Хотя, сложности возникают и одного шрифта, если он лишен вариантов характеристик указанных выше или они порождают нечитаемым текст.
Правило 4. «Каркас – всему голова»
Гармоничное сочетание шрифтов создается, если в них присутствуют общие элементы в каркасе символов, но они обязаны отличаться как минимум по одному пункту, но не более, чем по четырем признакам. Иначе шрифты не совместимы друг с другом.
На базе близкого каркаса сочетаются шрифты с засечками и без. Антиква и Гротеск, например.
«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.
Правило 5. «Подобное к подобному».
При сведении в пару неродственных шрифтов рекомендуется тщательно их сравнивать. Наложить слово, набранное гарнитурами-претендентами на парность друг на друга. Чем меньше отличий, чем гармоничнее пара.
Правила 6. «Фи!!! Какая гадость!».
Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).
Правило 7. «Когда очень хочется, то можно. Но осторожно!».
(Только для опытных дизайнеров и любителей экспериментировать!)
Можно добиться гармонии и при несочетающихся шрифтах. Эта сложная задача, доступная только опытному дизайнеру, и осуществима, если такая необходимость оправдана.
- Вариант 1 (Совершенно нет сходства)
Абзацы (элемента набраны разными гарнитурами) для того чтобы подчеркнуть разность их содержания. В таком случае рекомендуется выбрать основной шрифт, который будет акцентом внимания.
- Вариант 2 (Настроение)
Наберите одно слова разными шрифтами. Даже стандартные начертания одного шрифта создают настроения. Нормал – нейтрален, жирный – усиливает внимание к себе, курсив – создает некую интимную атмосферу. Разные сочетания могут дать неожиданные положительные эффекты.
С настроением шрифта нужно работать аккуратно: легко перестараться. Текст быстро визуально перегружается и разваливается.
- Вариант 3 (Найти общее)
Можно назвать высшим пилотажем дизайна. Доступен при хорошем графическом вкусе, который вырабатывается опытом. Шрифты используются на первый взгляд непохожие, но в них находятся такие общие и тонкие мелочи как:
• засечки;
• толщина штрихов;
• ширина символов;
• расстояния между символами;
• оформление контуров и теней;
• декоративные элементы;
• пластика шрифта;
• заполнение знаков;
• художественный стиль;
• и прочее подобное.
Таблица сочетания шрифтов
Накопленный дизайнерский опыт, порожденный методом проб и ошибок, воплотился в несколько вариантов таблиц, с помощью которых без труда можно подобрать шрифтовую пару.
Не стоит воспринимать такие таблицы, как догму, но как рекомендацию использовать можно и нужно.
Предлагаем такой вариант, шрифтов, конечно, существует много больше. Выбраны популярные. Количество звездочек – оценка по пятибалльной шкале.
Заголовок |
||||||||||||
Текст | Arial | Comic Sans | Courier New | Garamond | Times | PT Serif | PT Sans | Verdana | Roboto | Tahoma | Palatino | |
Arial | **** | *** | **** | **** | ***** | **** | **** | *** | *** | *** | **** | |
Comic Sans | ** | *** | ** | ** | ** | ** | ** | ** | ** | ** | ** | |
Garamond | **** | ** | *** | **** | *** | **** | *** | **** | **** | **** | *** | |
Times | **** | ** | *** | *** | **** | *** | *** | **** | **** | **** | *** | |
PT Serif | **** | ** | *** | *** | *** | **** | **** | **** | **** | **** | *** | |
PT Sans | *** | *** | *** | *** | *** | ***** | **** | *** | *** | *** | **** | |
Verdana | *** | *** | **** | **** | **** | **** | *** | **** | *** | *** | **** | |
Roboto | *** | *** | **** | **** | *** | **** | *** | *** | **** | *** | **** | |
Tahoma | *** | *** | **** | ***** | **** | **** | *** | *** | *** | **** | **** | |
Palatino | **** | ** | *** | *** | ***** | *** | **** | *** | **** | **** | **** |
Онлайн сервисы для подбора шрифтовых пар
Type Genius. Здесь можно подобрать шрифт, а заодно и пару к нему.
Font Pair. Название сервиса говорит само за себя. Нужный шрифт тут же можно закачать на компьютер.
Typ io. Выбор основного шрифта, затем его напарника. Можно наглядно увидеть, в чем сочетается пара.
Typespiration. Сайт примеров и рекомендаций по подбору шрифтовых пар.
Примеры готовых пар
Интернет-дизайн и типографский печатный дизайн существуют не один десяток лет, поэтому уже давно сложились устоявшиеся зарекомендовавшие себя пары.
Назовем их:
- Garamond и Verdana. Garamond – заголовок, жирный с засечками, Verdana – удобный для чтения «беззасечный» шрифт.
- Proxima Nova и Palatino. Обратно сочетание выше названной пары.
- PT Sans и PT Serif. «Родственники», представители одного семейства не могут не сочетаться.
Хорошие шрифтовые пары для:
Roboto
Шрифт Roboto близок к курсивному написанию, но при этом символы остаются прямыми. Подбираем схожие в элементах шрифты. Используем указанные выше сервисы. Идеальным сочетанием при использовании Roboto в заголовках видятся Bookman Old Style.
Приятный результат дают:
- Garamond;
- Georgia;
- MS Serif;
- Palatino;
- Times;
- Roboto;
- PT Serif;
- Lora.
Текст в Roboto хорош, если заголовок идет тем же шрифтом. Хорошо смотрятся заголовками:
- Bookman Old Style;
- Courier;
- Garamond;
- Georgia;
- Palatino;
- PT Serif;
- Lobster.
Proxima nova
Лучшими парами к этому шрифту семейства Sans Serif будут:
- Helvetica;
- Garamond;
- Lucida Grande;
- Georgia;
- Atrament;
- Skolar;
- Futura PT;
- Century School;
- Adelle;
- FF Meta Serif Web Pro.
Для полного понимание как сочетать шрифты смотрите видео:
Montserrat
Еще один шрифт Sans Serif. Лучше всего сочетается с:
- Source Sans Pro;
- Open Sans;
- Lora;
- Esteban;
- Lato;
- Gill Sans;
- Georgia;
- PT Serif;
- Roboto;
- Tinos.
Readymag.com
Сайт для создания журналов в Интернете также может быть использован для подбора шрифтов, но уже с конкретной целью. На сайте имеется необходимый инструментарий для работы с web-журналами.
Google fonts
Сервис-библиотека от Google, позволяющий работать со шрифтами в Интернете. Шрифты бесплатны для загрузки и имеется интерактивный просмотр, возможности их изучать.
Лучшие шрифтовые пары
Называть какие-то пары совсем уж лучшими будет неправильно. Абсолютно лучших не существует. Устоявшиеся сочетания (классику) названы выше, а лучшая шрифтовая пара у каждого дизайнера своя. Все зависит от вкуса, задач которые возлагаются на шрифты и настроения. Удачи в творческом поиске!