С чем сочетается шрифт roboto
8 шрифтовых пар для дизайна сайтов и документов
Несколько лет назад Оливер Райхенштайн (Oliver Reichenstein) потряс технологический мир, заявив о том, что так как веб на 95% состоит из написанного текста, а веб-дизайн – на 95% типографика. Учитывая проявляющийся в последних тенденциях минимализм, значимость типографики стала еще ощутимее.
С появлением удобных веб-шрифтов возможность усовершенствовать свой сайт стала ещё доступнее. Но изобилие шрифтов может сбить с толку не только новичка – какой из них подойдет именно вам? Старший дизайнер Skillcrush Аиша Соуто-Майор (Aisha Souto-Maior) сталкивается с этой проблемой ежедневно, поэтому решила поделиться своими любимыми комбинациями бесплатных шрифтов.
Roboto Slab и Open Sans
Легкая и удобная комбинация. Её можно использовать для сайтов, которым нужна легкая вариативность в шрифте, при этом не вызывающая сильный визуальный контраст.
Raleway и Roboto
Порой бывает сложно совместить два довольно непохожих Sans-Serif шрифта таким образом, чтобы это не выглядело ошибкой. У Raleway визуально приятное начертание, а Roboto улучшает читабельность в маленьком размере.
Lora и Source Sans Pro
Это сочетание шрифтов выглядит элегантно и современно. Lora не уступает шрифту Serif, но при этом не расстраивает узнаваемостью и типичностью, а Source Sans Pro контрастен и хорошо читается в малом масштабе.
Merriweather и Open Sans
Эта пара имеет еще более выраженную контрастность, чем Lora и Source Sans Pro, поскольку Open Sans весит еще меньше, а Merriweather имеет более сильные линии, чем у Lora. Всё это придает данной комбинации современный вид. Serif также может выглядеть современно, но только в том случае, если использовать его корректно и «небольшими дозами».
Dancing Script и Ledger
Осуществить выбор между Script-шрифтами довольно непросто, а выбрать пару, которая не выглядит нелепо и не отдает китчем – и того сложнее. Dancing Script в разумных количествах отлично подойдет для любого женского сайта или блога, а в удачной комбинации с Ledger будет хорошим решением для основного текста в боле традиционном стиле.
Sansita One и Kameron
Очень интересное сочетание. Благодаря мягкости и «коренастости» Sansita эта комбинация выглядит игриво и серьезно одновременно, а Kameron придает эстетичность и улучшает читабельность.
Quando и Judson
Quando отлично подойдет для продукта, прямо или косвенно связанного с литературой. А Judson – это еще один serif-шрифт, просто более мягкий. Его причудливо округлые «О» и закрученные «F» хорошо дополняют орнаментированные детали Quando.
Montserrat и Domine
Если вы ищете хорошее сочетание шрифтов для современного выглядящего новостного сайта, остановите свой выбор на Montserrat и Domine. Подойдет как для заголовков, так и для основного текста.
Шрифтовые пары для сайта
Сайт – это текст!
Если открыть страницу выбранного сайт, то увидим, что львиную долю ее занимает текст. По-разному организованный, но текст. Выделение цветом, размерные буквы, шрифты… Иногда надпись даже выполняет роль изображения. Когда это в балансе, то сайт смотрится читабельно и удобен для пользователя. Как этого добиться?
Правила подбора шрифтовых пар
Со времен первой печатной книги создано много шрифтов. Как прекрасных так и ужасных. Поэтому не все годятся для страниц вашего проекта. Давайте разберемся почему?
Правило 1: «Мы с Татьяной ходим парой»
Одним шрифтом, одного кегля и одного цвета, даже используя форматирование, не добиться выделения фрагментов текста и визуализации, и визуальной же гармонии. Главному шрифту нужен, как минимум, один напарник-противовес.
Однако шрифтовая абракадабра на странице не дизайнерский моветон, а сложности для того, кто смотрит страницу. Если используется более двух шрифтов, то внимание посетителя рассевается, из-за неодинаковости начертания букв текст визуально рассыпается на фрагменты, что затрудняет восприятие.
Чтобы убедиться в этом, поэкспериментируйте со шрифтами на страничке того же Word.
Как показал мировой опыт, лучше, когда используется только пара шрифтов.
Никто не заставляет вас ограничиваться этим числом, но использование большего оправдывается только: информационно, функционально, визуально.
Правило 2: «Гармония в контрасте»
Шрифты одной пары обязаны быть в равной мере как непохожими, так и похожими друг на друга. Добивайтесь гармонии в контрасте. Удачное сочетание образуют шрифты, у которых общие черты. На практике добиться гармонии сложно: признаков несовместимостей шрифтов много. Главная причина… в их слишком большом сходстве.
Правило 3: «Размер, начертание, цвет – разве товарищей нет?».
Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.
3 самых важных правил типографики в веб дизайне и главные тенденции.
3 самых важных правил типографики в веб дизайне и главные тенденции.Ничто не мешает использовать размер, начертания и цвет в виде усиления контраста и гармонии при использовании в паре других шрифтов. Но тут важно, соблюсти баланс. Ведь визуальные варианты одного шрифта обречены на общие черты, в отличие от пары разных.
Хотя, сложности возникают и одного шрифта, если он лишен вариантов характеристик указанных выше или они порождают нечитаемым текст.
Правило 4. «Каркас – всему голова»
Гармоничное сочетание шрифтов создается, если в них присутствуют общие элементы в каркасе символов, но они обязаны отличаться как минимум по одному пункту, но не более, чем по четырем признакам. Иначе шрифты не совместимы друг с другом.
На базе близкого каркаса сочетаются шрифты с засечками и без. Антиква и Гротеск, например.
«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.
Правило 5. «Подобное к подобному».
При сведении в пару неродственных шрифтов рекомендуется тщательно их сравнивать. Наложить слово, набранное гарнитурами-претендентами на парность друг на друга. Чем меньше отличий, чем гармоничнее пара.
Правила 6. «Фи. Какая гадость!».
Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).
Правило 7. «Когда очень хочется, то можно. Но осторожно!».
(Только для опытных дизайнеров и любителей экспериментировать!)
Можно добиться гармонии и при несочетающихся шрифтах. Эта сложная задача, доступная только опытному дизайнеру, и осуществима, если такая необходимость оправдана.
Абзацы (элемента набраны разными гарнитурами) для того чтобы подчеркнуть разность их содержания. В таком случае рекомендуется выбрать основной шрифт, который будет акцентом внимания.
Наберите одно слова разными шрифтами. Даже стандартные начертания одного шрифта создают настроения. Нормал – нейтрален, жирный – усиливает внимание к себе, курсив – создает некую интимную атмосферу. Разные сочетания могут дать неожиданные положительные эффекты.
С настроением шрифта нужно работать аккуратно: легко перестараться. Текст быстро визуально перегружается и разваливается.
Можно назвать высшим пилотажем дизайна. Доступен при хорошем графическом вкусе, который вырабатывается опытом. Шрифты используются на первый взгляд непохожие, но в них находятся такие общие и тонкие мелочи как:
• засечки;
• толщина штрихов;
• ширина символов;
• расстояния между символами;
• оформление контуров и теней;
• декоративные элементы;
• пластика шрифта;
• заполнение знаков;
• художественный стиль;
• и прочее подобное.
Таблица сочетания шрифтов
Накопленный дизайнерский опыт, порожденный методом проб и ошибок, воплотился в несколько вариантов таблиц, с помощью которых без труда можно подобрать шрифтовую пару.
Не стоит воспринимать такие таблицы, как догму, но как рекомендацию использовать можно и нужно.
Предлагаем такой вариант, шрифтов, конечно, существует много больше. Выбраны популярные. Количество звездочек – оценка по пятибалльной шкале.
Онлайн сервисы для подбора шрифтовых пар
Type Genius. Здесь можно подобрать шрифт, а заодно и пару к нему.
Font Pair. Название сервиса говорит само за себя. Нужный шрифт тут же можно закачать на компьютер.
Typ io. Выбор основного шрифта, затем его напарника. Можно наглядно увидеть, в чем сочетается пара.
Typespiration. Сайт примеров и рекомендаций по подбору шрифтовых пар.
Примеры готовых пар
Интернет-дизайн и типографский печатный дизайн существуют не один десяток лет, поэтому уже давно сложились устоявшиеся зарекомендовавшие себя пары.
Хорошие шрифтовые пары для:
Roboto
Шрифт Roboto близок к курсивному написанию, но при этом символы остаются прямыми. Подбираем схожие в элементах шрифты. Используем указанные выше сервисы. Идеальным сочетанием при использовании Roboto в заголовках видятся Bookman Old Style.
Приятный результат дают:
Текст в Roboto хорош, если заголовок идет тем же шрифтом. Хорошо смотрятся заголовками:
Proxima nova
Лучшими парами к этому шрифту семейства Sans Serif будут:
Для полного понимание как сочетать шрифты смотрите видео:
Montserrat
Еще один шрифт Sans Serif. Лучше всего сочетается с:
Readymag.com
Сайт для создания журналов в Интернете также может быть использован для подбора шрифтов, но уже с конкретной целью. На сайте имеется необходимый инструментарий для работы с web-журналами.
Google fonts
Сервис-библиотека от Google, позволяющий работать со шрифтами в Интернете. Шрифты бесплатны для загрузки и имеется интерактивный просмотр, возможности их изучать.
Лучшие шрифтовые пары
Называть какие-то пары совсем уж лучшими будет неправильно. Абсолютно лучших не существует. Устоявшиеся сочетания (классику) названы выше, а лучшая шрифтовая пара у каждого дизайнера своя. Все зависит от вкуса, задач которые возлагаются на шрифты и настроения. Удачи в творческом поиске!
Дизайн для недизайнеров: 10 идеальных шрифтовых пар
В VistaCreate этот параметр настроить легко: 
Еще в оформительной типографике часто используются рукописные и акцидентные шрифты, но антиква, гротеск и брусковый шрифт самые распространенные. 
Шрифты рукописный Lemon Tuesday и акцидентный Ruslan Display
Принцип объединения №2. Контраст
Избегайте конфликта
10 шрифтовых сочетаний в дизайнах VistaCreate
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bd2dbf078e1194aa6ff06c3/» background=»red»/]
2. Oswald + Playfair Display 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bf7ec838caf671e1c9f2da7/» background=»red»/]
3. Cookie + Josefin Sans 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5a96bfa1f07aee6977cd50bf/» background=»red»/]
4. Montserrat + Playlist Script 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bc09ae978e1194aa64837af/» background=»red»/]
5. Arapey + Josefin Sans 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5aa69a03f07aee69774a652a/» background=»red»/]
6. Grand Hotel + Podkova 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6c55011cc8aa54292895f7/» background=»red»/]
7. Abril Fatface + Raleway 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891c9418654940f7ca946c/» background=»red»/]
8. Graduate + Montserrat 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891a5c18654940f7beb452/» background=»red»/]
9. Abril Fatface + Raleway 
[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6d9d2f1cc8aa54291cd948/» background=»red»/]
10. Bangers + Contrail One 
Топ-10 комбинаций шрифтов 2021
Знание того, как правильно сочетать нужные шрифты, требует навыков и практики. Поэтому мы создали список из 10 комбинаций шрифтов, которые идеально сочетаются друг с другом:
1. Exo и Web Serveroff
Комбинация этих шрифтов, состоящая из Exo для текста заголовка и Web Serveroff для субтитров и основного текста, идеально подходит для любого контента, связанного с наукой.
2. Oswald и Lato
Второй шрифт без засечек, Lato, был использован для более мелкого текста из-за его читаемости и более округлого и дружелюбного внешнего вида, чтобы уравновесить Освальда.
3. Monteserrat и Lato
Винтажный шрифт Montserrat, напоминающий городскую типографику первой половины 1900-х годов, используется в сочетании со шрифтом без засечек Lato. Монсеррат очень удобно-читаемый и при меньшем размере, он также используется в качестве подзаголовка.
Как геометрический шрифт, состоящий из простых форм, Montserrat хорошо сочетается с таким универсальным шрифтом, как Lato, который сочетает в себе серьезность и теплоту своей индивидуальности. Оба они чистые и гладкие, что всегда хорошо сочетается с любым дизайнерским проектом.
4. Rokkitt & Hattori Hanzo
Rokkitt, дисплейный шрифт, который идеально подходит для заголовков и текста заголовка, сочетается с Hattori Hanzo, чистым и современным шрифтом, который особенно хорошо работает для коротких фрагментов текста в диаграммах и инфографике.
Использование большого количества белого пространства и приглушенной цветовой комбинации также поможет сделать этот дизайн гармоничным и эффектным.
5. Oswald & Helvetica
Освальд использован жирным шрифтом и курсивом. Освальд, как очень чистый и разборчивый шрифт, особенно хорошо работает в заголовках ; слегка наклоненный вправо, он также добавляет ощущение движения и динамизма этому изделию.
Для ясности и разборчивости вневременной и очень популярный шрифт Helvetica используется как для субтитров, так и для основного текста.
6. Helvetica & Georgia
Helvetica используется для названия, жирным шрифтом. Как чистый шрифт без засечек, он отражает стабильность и профессионализм сообщения, которое он передает.
Georgia, очень разборчивый шрифт с засечками и большим интервалом между буквами, использовался для подзаголовков и основного текста. Оба эти шрифта очень распространены, и их можно использовать в различных дизайнерских проектах.
7. Pacifico и Junction
Сочетается с Junction, шрифтом, который, как говорят, предлагает лучшее из шрифтов с засечками и без засечек, сочетая нарисованные от руки, гуманистические качества засечек с чистым и минималистичным видом без засечек.
8. Trebuchet MS & Fjord
Здесь он гармонично сочетается с Fjord, который идеально подходит для больших блоков текста небольшого размера.
9. Trocchi & Source Sans Pro
Обычный плоский шрифт с засечками, вдохновленный более ранними шрифтами, Trocchi сочетается с чистым Source Sans Pro как для субтитров так и основоного текста.
10. Archistico & ST Marie
Выбирая изображения для своего проекта, убедитесь, что вы выбрали те, которые дают вам достаточно места, чтобы вы могли легко наложить текст.
Записки Ночного Блоггера
Бизнес-блог от Sergio
Не знаешь с чего начать? Тогда раздел «Учебник» для тебя! =)
6 готовых шрифтовых пар для сайтов
Сегодня речь пойдет снова о шрифтах. Предлагаю готовую подборку по сочетаниям шрифтов, которые можно взять для своего сайта. Уже несколько лет в веб-дизайне модно делать плоский дизайн, а шрифты — как и картинки, служат дополнительным элементом стиля.
Конечно же, есть много крутых платных кириллических шрифтов, однако веб-мастера не любят платить лишние деньги. Сегодня обойдемся бесплатными шрифтами. Не посвященным в тонкости типографики, сложно самостоятельно составить такую пару. Есть много правил и особенностей, а основная сложность в том, что эти правила условны, и часто умело нарушаются.
Сейчас нам достаточно знать, что лучше и проще всего сочетать противоположные шрифты, т.е к шрифту с засечками выбираем шрифт без засечек. Для того, чтобы проще было оценить привлекательность той или иной пары, возьмем одну и ту же картинку, текст и наглядно продемонстрируем сочетаемость. Выбирайте то, что понравится и используйте!
Первая шрифтовая пара: Roboto Slab и Neo Sans Pro
Roboto Slab круто смотрится в качестве заголовков или текста на картинках. Neo Sans Pro простой и читабельный шрифт, отлично подходит для набора основного текста.
На картинке: большой заголовок — Roboto Slab, Regular, 36 пт. H2 — Roboto Slab, Regular, 28 пт. H3 — Roboto Slab, Bold, 18 пт. Основной текст — Neo Sans Pro, Regular, 14 пт. Мелкие сноски, ссылки — Neo Sans Pro, Regular, 12 пт.
Второе сочетание: Garamond и Verdana
EB Garamond — зачемательный шрифт с засечками, он так хорош, что его почти не переделывают уже много лет. Adobe в 2005 году создал веб версию под названием Garamond Premier Pro.
Третье сочетание: Playfair Display и Fira Sans
Playfair Display — очень выразительный, поэтому идеально подходит для заголовков, в то же время уравновешивается простым и читабельным Fira Sans.
Четвертое сочетание: Adobe Garamond Pro и Futura PT
Futura PT маленькие буквы, поэтому нужно использовать кегль побольше, вместо 14, лучше брать 17-18 пт. А для заголовков используется графичный Adobe Garamond Pro.
Пятая шрифтовая пара: Philosopher и PT Sans
Для заголовков берем красивый шрифт Philosopher, но использовать его лучше только для больших заголовков таких как h1 или h2, а подзаголовки поменьше h3 и основной текст лучше набирать шрифтом без засечек PT Sans.
Ещё одна классическая шрифтовая пара это PT Sans и PT Serif
Здесь интересное сочетание получается, когда PT Sans в заголовке, а PT Serif — набран основной текст.
Есть вопросы? Напишите в комментариях, всем отвечу 🙂
Как установить такие комментарии вконтакте себе на сайт?
4 комментария к “6 готовых шрифтовых пар для сайтов”
Еще бы, как это вставить на сайт, а то пост для отдельной группы людей, которые знают, что и куда.
Интересная подборка. Надо будет ещё раз заглянуть сюда, когда буду менять морально устаревший дизайн на своём блоге. Пока мне первый вариант понравился (в контексте тематики хайперсео)
Sergio Reply:
декабря 8, 2016 at 12:38
Да, Roboto Slab крут. Можно вместо Neo Sans Pro взять в качестве основного шрифта Open Sans, тоже круто смотрится связка.
Теперь я знаю всё о ресторанах Москвы 