open sans с чем сочетается
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, позволяющий работать со шрифтами в Интернете. Шрифты бесплатны для загрузки и имеется интерактивный просмотр, возможности их изучать.
Лучшие шрифтовые пары
Называть какие-то пары совсем уж лучшими будет неправильно. Абсолютно лучших не существует. Устоявшиеся сочетания (классику) названы выше, а лучшая шрифтовая пара у каждого дизайнера своя. Все зависит от вкуса, задач которые возлагаются на шрифты и настроения. Удачи в творческом поиске!
15 последних тенденций парных шрифтов
Объединение парных шрифтов — отличный способ улучшить ваш дизайн и внести в него немного разнообразия. Вы можете использовать два шрифта при создании пригласительного на свадьбу или настроить шрифты для визитной карточки. Однако всегда так сложно определить правильную комбинацию шрифтов. Итак, сначала давайте посмотрим, как объединить в пару шрифты в соответствии с последними тенденциями. При работе с парными шрифтами следует помнить три вещи:
1. Согласованность
Согласованность — это когда вы используете одну гарнитуру в нескольких шрифтах на веб-странице. Это самый простой способ совмещения шрифтов, так как вам нужно найти только один классный шрифт, который хорошо работает в разных стилях. Итак, во-первых, вам нужно выбрать супер-семейство шрифтов. Супер-семейство шрифтов — это шрифт с несколькими вариациями, которые попадают в разные категории. Есть несколько классификаций для гарнитуры. Тем не менее, они в основном делятся на четыре категории:
Обычное супер-семейство состоит из семейств шрифтов, которые представлены как без засечек, так и с засечками. Например, шрифт Lucida включает в себя версии из рукописного шрифта, пишущей машинки, каллиграфии (скриптовыйй), Blackletter (готика) и без засечек в одном семействе. Поскольку эти семейства шрифтов созданы, чтобы соответствовать одному семейству, они имеют общие характеристики, которые помогают им хорошо работать друг с другом.
2. Контрастность
Контрастность относится к двум или более разным шрифтам, которые хорошо работают вместе. Это сложная задача создать пару шрифтов подобным образом, но это также более оригинальный и успешный метод создания уникального сочетания шрифтов. Ключевой момент заключается в том, чтобы найти различные шрифты, которые имеют что-то общее, что может заставить их отлично работать. Даже если шрифты совершенно разные, они должны иметь одну или две из этих характеристик, чтобы стать успешной парой:
3. Противоречие
Противоречие относится к двум или более гарнитурам, которые похожи друг на друга, а также хорошо работают вместе. Очевидно, вы хотите, чтобы ваши шрифты имели сходство, но они должны иметь достаточно различий, чтобы эффективно работать вместе. Некоторые из способов избежать противоречий:
Теперь, когда вы понимаете, как эффективно сочетать разные шрифты, вот несколько последних пар шрифтов, чтобы выделить ваш дизайн.
1. Proxima Nova и Futura
Proxima Nova и Futura показывают нам, что вы можете остаться в том же подсемействе шрифтов и по-прежнему управлять контрастом. Они имеют сходство в форме характера и начертания, поэтому они хорошо работают вместе.
2. Bebas Neue и Libre Baskerville
Bebas Neue — жирный и тяжелый шрифт без засечек. С другой стороны, Libre Baskerville — традиционный, тонкий шрифт с засечками. Они не имеют одинаковую высоту, форму символов или начертание, но схожи с точки зрения направления оси.
3. Nautilus Pompilius и Museo slab
Museo Slab — гибкий шрифтс засечками, а Nautilus Pompilius — современный скриптовы. Они оба имеют уникальный характер, но все же, имеют одинаковое начертание, чтобы поддерживать надлежащий баланс.
4. Adobe Garamond и Hoefler
Adobe Garamond и Hoefler — прекрасные шрифты с засечками в старом стиле, но они все еще хорошо работают друг с другом, когда дело доходит до объединения шрифтов в пары.
5. Merriweather и Montserrat
Montserrat — это обтекаемый, современный и четкий шрифт без засечек, а Merriweather — классический шрифт с засечками. Они отлично сочетаются, если вы хотите, чтобы ваш дизайн был минималистичным.
6. Source Sans Pro и Playfair Display
Playfair Display — это шрифт в традиционном стиле, а Source Sans — очень простой шрифт. Они придают элегантный вид вашему дизайну, когда соединены вместе.
7. Lato и Raleway
Raleway — это стильный, но простой шрифт без засечек, который можно использовать с различными стилями дизайна, что делает его универсальным. Lato также без засечек, который намного тоньше и меньше, что дополняет текст заголовка.
8. Roboto и Elsie
Elsie — это детальный, элегантный и художественный шрифт с засечками, созданный для чествования женщин. Его гладкие края делают его полностью совместимым с простым и классическим шрифтом, таким как Roboto. Это сочетание идеально подходит для выделения конкретных текстов в вашем дизайне.
9. Josefin Sans и Dancing Script
Dancing Script представляет собой плавный и креативный шрифт, который должен сочетаться с простыми шрифтами. Большинство скриптовых шрифтов выглядят лучше с базовыми шрифтами, поэтому Josefin Sans — отличный выбор.
10. Open Sans и Spirax
Spirax дает ощущение повествования и таинственности, поэтому разумно использовать что-то вроде Open Sans с этим шрифтом. Вы можете использовать эту прекрасную комбинацию в своем дизайне, чтобы придать ей уникальный поворот.
11. Raleway и Cherry Cream Soda
Cherry Cream Soda — это креативный шрифт, вдохновленный идеей содовой 1950-х годов. Его уникальный стиль должен сочетаться с простым шрифтом, таким как Raleway, чтобы смягчить настроение вашего дизайна.
12. Open Sans и Sansita
Sansita — это стильный, волнистый шрифт с различными вариантами размеров. Этот шрифт должен сочетаться с классическим шрифтом, таким как Open Sans, чтобы сохранить интересный баланс.
13. Lato и Wendy One
Wendy One — это необычный, привлекательный, жирный шрифт, который отлично подходит для выделения определенных частей текста. Поскольку ширина Wendy One велика, его необходимо сочетать с тонким шрифтом, таким как Lato.
14. Oswald и Merriweather
Merriweather легко читается, и его также можно изменять с точки зрения высоты и ширины. Этот четкий текст с засечками хорошо работает с тонкими шрифтами без засечек, такими как Oswald.
15. Montserrat и Baloo
Baloo — округлый пузырчатый шрифт, который может быть подавляющим, если он не сбалансирован должным образом. Поэтому такой, классический шрифт, как Montserrat, отлично сочетается с Baloo, делая его начертание легче.
Это некоторые из последних комбинаций, чтобы вдохновиться и создать свою эксклюзивную пару шрифтов, хотя нет никаких фиксированных правил парных шрифтов для создания уникального дизайна. Но вы должны обратить внимание на контекст и выбрать шрифты в соответствии с различными жанрами.
Всем успешной работы и творчества!
Топ-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
Выбирая изображения для своего проекта, убедитесь, что вы выбрали те, которые дают вам достаточно места, чтобы вы могли легко наложить текст.