10 страхотни комбинации от шрифтове в Google, които са в тенденция през 2020 г.

Списък на модни шрифтове, подбрани ръчно от Google Fonts, които се съчетават добре заедно и как да ги инсталирате на уебсайта си.


Най-добрите комбинации от Google Шрифтове

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

Всичко това се промени през 2010 г. с излизането на Google Шрифтове, проект с отворен код, който позволява далеч по-лесното прилагане на персонализирани шрифтове на уебсайтове. Инсталирането на тези шрифтове на вашия собствен уебсайт е за щастие процес, който е бърз и лесен, но трябва да знаете, че не всяка комбинация от шрифтове в библиотеката на Google е рецепта за типографски успех. С правилните съчетания на шрифтове и съображенията за използване обаче, вашата онлайн марка може да излъчва професионализъм, красота и дружелюбност за четене без нужда от скъпи персонализирани шрифтове. В тази статия ще ви покажа как да постигнете всичко това.

Списък с 10 тенденции за комбиниране на шрифтове в Google

Нека да стигнем до това! Без конкретен ред, ето 10 от най-добрите комбинации на Google Font, които в момента са в тенденция:

1. Open Sans Condensed + Open Sans

Тенденционна комбинация от шрифтове на Google - Open Sans Condensed и Open Sans

Ето една лесна комбинация, която създава чудеса за почти всяка приложима употреба. Open Sans е един от – ако не и – най-универсалните шрифтове в цялата колекция от Google Fonts. Изключително лесно е да се чете в големи блокове текст, като същевременно е достатъчно впечатляващ за заглавия.

Simple. Сложен. Познати. Не можете да сбъркате!

Използване в реалния свят

Не мога да предвидя сценарий, където Open Sans би бил лош избор. Освен ако не търсите специално сериен шрифт, мисля, че този ще служи перфектно на повечето бизнес, блог, целева страница или уеб приложение.

2. Освалд + ЕБ Гарамонд

Тенденционна комбинация от Google Fonts - Oswald с EB Garamond

Осуалд е чудесен шрифт за заглавия, независимо от теглото на шрифта или използването на главни букви. Съкратената му природа му помага да привлича вниманието и да изскача, но също така създава приятно уникален текст като шрифт на основното ви тяло.

Е. Б. Гарамонд е елегантна актуализация на класическия шрифт Garamond. Незабавно разпознаваем и безвременен на външен вид, този шрифт излъчва отличителен професионализъм във вашата типография.

Използване в реалния свят

Това сдвояване работи добре за професионалисти, занимаващи се с клиентите от висок клас, като адвокати, агенции за недвижими имоти или дори висококачествени бутици. Универсалността на Осуалд и класическия вид на Е. Б. Гарамонд пригответе за страхотен текст на описанието на продукта, когато е важно да се подчертае елемент с първокласно качество.

3. Монсерат + Мериуедър

Тенденционна комбинация от Google Fonts - Монтсеррат с Merriweather

Монсерат е фаворит сред дизайнерите заради своята универсалност и простота, и Merriweather съчетава чудесно със своя контрастен стил и лесна четимост. Чувствайте се свободни да ги обменяте като заглавия или текст на абзац – и двете работят отлично!

Използване в реалния свят

Тази конкретна комбинация е приятен баланс на модерен и класически дизайн. Поради това разнообразието от приложения може да поддържа много видове бизнес. Лично аз смятам, че тези шрифтове биха се справили добре за всякакъв вид онлайн източник на новини или издателска агенция.

4. Roboto тънък + Roboto редовен

Тенденционна комбинация от Google Шрифтове - Roboto Thin with Roboto Regular

Най- Roboto семейството на шрифтовете е личен фаворит и той също е този, който използваме тук, как да стигнем онлайн. Изключително универсален с широк диапазон на теглото на шрифта, практически няма ограничение за това, за което може да се използва шрифта. Модерно и геометрично, но все пак по някакъв начин дружелюбен и надежден, Roboto е чудо на формата и функцията.

Използване в реалния свят

Ето още едно сдвояване, за което ще ви бъде трудно да намерите неправилна употреба. Докато Roboto работи за почти всичко, мисля, че е особено чудесно за технологични стартиращи фирми, модерен малък бизнес или всякакъв тип марка с поглед към бъдещето.

5. Raleway + Roboto Slab

Тенденционни комбинации от Google Fonts - Raleway с Roboto Slab

Нашият приятел е Roboto отново! Този път обаче разглеждаме вариацията на серифа, Roboto Slab. Това е шрифт, който е също толкова универсален като братовчед му, но малко по-класически по стил. Когато се сдвоява с отличителните и смели Raleway, имаме невероятно съвпадение на чиста и изискана типография.

Използване в реалния свят

Raleway е един от онези шрифтове, който крещи изтънченост. Когато се използва като заглавие с пълни шапки, мисля, че работи прекрасно за луксозни артикули като бижута, дизайнерско облекло или подобно висококачествени продукти за електронна търговия. Roboto Slab го поддържа добре с прост и достъпен описателен текст.

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

6. Playfair Display + Source Sans Pro

Тенденционна комбинация от Google Шрифтове - Playfair Display с Source Sans Pro

Според неговия дизайнер, Playfair Дисплей е бил вдъхновен от буквените форми от 18-ти век по време на прехода от писалки към химикалки със стоманен връх. Не е изненада, че този шрифт излъчва очарование от стария свят, но със съвременен завъртане.

Източник Sans Pro тласка нещата докрай в бъдещето, създавайки интригуваща комбинация, която е богато украсена, докато все още е утилитарна.

Използване в реалния свят

Playfair Дисплей добавя лично докосване до нещо като надпис или описание на продукта. Ако имате възможност да използвате символите му за амперсанд или валута, веднага ще видите защо това е идеалният избор за продукт или услуга, съсредоточени върху лукса и външния вид. Източник Sans Pro поддържа текста заземен в модерна и чиста презентация.

7. Fjalla One + Noto Sans

Тенденционна комбинация от Google Fonts - Fjalla One с Noto Sans

Fjalla One може да не е най-универсалният шрифтове, но едно нещо, което прави изключително добре, е да създадете заглавия, които изискват внимание. Малки или големи, малки и малки букви, тези букви са хипнотични, независимо какво правите с тях.

Noto Sans цели да бъде наистина универсален шрифт, където, независимо от езика, той може да се показва без грешки при форматиране за потребители от цял ​​свят. Подходящо, естетиката на шрифта е също толкова многостранна, колкото и неговата полезност.

Използване в реалния свят

Блоговете или целевите страници биха били чудесни за това сдвояване – или наистина нещо с дълги текстове, които изискват забележими подзаглавия, за да разделят съдържанието. Универсалната адаптивност на Noto Sans също го прави добър избор, когато достигането до международна аудитория е приоритет.

8. Алегрея + Лато

Тенденционна комбинация от Google Fonts - Alegreya with Lato

Alegreya има известна привлекателност, която се чувства много “земен” и приятелски настроен към мен. Няма претенции за неговата личност; това, което виждате, е това, което получаваш.

Lato може да даде Open Sans тичам за парите си като шампион по многоцелеви шрифтове в библиотеката на Google.

Заедно те правят комбинация, която е забавна, лесна за четене и прагматична.

9. PT Sans тесни + PT Sans

Тенденционна комбинация от Google Шрифтове - PT Sans тесни с PT Sans

Друго модерно поемане на стария свят стайлинг, PT Sans и братята му, PT Sans тесен, направете незабавно и безпогрешно изявление, когато се сдвоявате заедно.

Използване в реалния свят

Всеки шрифт работи еднакво добре като заглавие или текст на тялото; конкретното сдвояване, което сте избрали, ще зависи от естеството на думите ви – въпреки че аз предпочитам PT Sans Narrow при по-кратки изблици.

Замислен като „много важен инструмент за съвременни цифрови комуникации“, той изглежда най-подходящ за – макар и със сигурност да не се ограничава до – използването на тези шрифтове за стартиране на технологии, софтуерни приложения или друг цифров бизнес.

10. Amatic SC + Josefin Sans

Тенденционна комбинация от Google Fonts - Amatic SC с Josefin

Добре, това е определено повече от лекомислена страна. Очевидно тази комбинация няма да работи за всички, но причудливостта и на двете Amatic SC и Жозефин Санс създайте нещо, което сигурно се откроява – стига да проявите повишено внимание!

Използване в реалния свят

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

Съвет: Не използвайте Amatic SC като основен текст на тялото. Ще подлудите читателите си безумно.

Бонус: 5 от любимите ни премиум шрифтове

Знаем, че тази статия е за най-добрите, тенденциозни шрифтове на Google, но искахме да споменем и някои от нашите любими премиум шрифтове като бонус. Премиум шрифтовете, разбира се, не са безплатни – но те дават на вашия уеб сайт по-уникален и персонализиран дизайн. Тези шрифтове не са популярни или тенденциозни и наистина са противоположни от изброените по-горе. Те обаче са чудесни за онези, които искат персонализиран и персонализиран дизайн за своята марка и наистина вървят добре, когато се използват за Логотипи или дори креативни заглавия:

Бонус 1: Мега занаятчийската група X

Бонус 2: Пакетът на Свети Валентин

Бонус 3: Пакетът с готините шрифтове

Бонус 4: Малкият графичен пакет

Бонус 5: Ревнив

БЪРЗ СЪВЕТ: Премиум шрифтовете предлагат на дизайнерите шанс да постигнат вечен дизайн и силно се препоръчват за лога и идентичност на марката.

Защо трябва да използвате Google Шрифтове?

Добре дошли в това, което много уеб дизайнери смятат за най-добрия си приятел. Като говоря от опит, мога да ви кажа, че рядко вграждам файлове с персонализиран шрифт в уебсайтове. Google Fonts сега е почти изключително първото и последното място, на което се обръщам за типография на уебсайт. Ето защо:

  • е напълно безплатно. Няма значение в колко шрифтове сте избрали или в колко уебсайтове ги използвате. Никога няма да платите и стотинка.
  • Към март 2018 г. има над 850 шрифта в библиотеката. Вероятно ще намерите подходящия стил, който да съответства на вашата марка.
  • е бърз. Тъй като шрифтовете се хостват на сървърите на Google, файловете се компресират интелигентно и са проектирани да се зареждат бързо.
  • е лесно. Просто копиране и поставяне в HTML файл и сте готови.
  • е организиран. Всички шрифтове са категоризирани и могат да се търсят в една база данни. Няма повече търкане в разхвърлени подпапки на вашия компютър, за да намерите този перфектен шрифт.
  • Споменах ли, че е Безплатно? Безплатно е!

Как да инсталирате Google шрифтове

Тук не се изисква главоболие. Просто отидете на Google Шрифтове и намерете необходимия шрифт (и).

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

Добавяне на стилове

От тук можете да изберете да включите допълнителни стилистики като курсив, смели, смели курсиви и т.н. Просто кликнете върху CUSTOMIZE и изберете стиловете, които смятате, че ще се нуждаете.

Например, ето как бих избрал и двете редовен и смел текст за шрифта Khula.

Добавяне на стил на шрифт в Google Fonts

Вграждане на стандарта или @Import?

Ще забележите, че имате две възможности за вграждане на шрифтове на уебсайта си: като използвате стандарт да се използва в сайта на сайта Ви HTML файл или a @import URL да бъдат включени в сайта на вашия сайт CSS файл. И така, кой от тях трябва да използвате?

Като цяло най-добрият вариант е да копирате и поставите линия във вашия HTML файл. Обикновено шрифтовете ви се зареждат по-бързо по този начин, вместо да чакате CSS файла да се зареди, като този метод също има малко по-добра поддръжка за (много) стари браузъри.

Къде да поставим кода

Ще копирате и поставите реда от кода, който Google ви дава в раздел на вашия HTML файл. Така че използвайки шрифта Khula, който избрах по-горе, ще изглежда така:

БЪРЗ СЪВЕТ: Можете също да зададете стилове на шрифта, като ги изпишете в URL адреса, разделен със запетаи. Например: „https://fonts.googleapis.com/css?family=Khula:удебелен, наклонен, bolditalic

Използване на шрифта в стила ви

Сега просто се обаждате на шрифта, както обикновено в рамките на вашия CSS код. За демонстрационни цели главният ви текст и текст на абзаца могат да изглеждат така:

h1 {
семейство шрифтове: „Khula“, sans-serif;
тегло на шрифта: 700;
размер на шрифта: 48px;
}
p {
семейство шрифтове: „Khula“, sans-serif;
тегло на шрифта: 400;
размер на шрифта: 16px;
}

БЪРЗ СЪВЕТ: Не забравяйте да включите резервен шрифт като „serif“, „sans-serif“ или подобен шрифт в мрежата, в рядкото събитие, което вашето Google Font не успее да зареди..

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

Решението кои шрифтове да се групират понякога може да бъде труден артистичен баланс, който да постигнете. От една страна, вашият избор на шрифт ще бъде най-ефективен, когато има достатъчно контраст в стилове; всеки шрифт на вашия сайт трябва да се откроява от останалите и да печели обосновка за използването му. От друга страна, не искате шрифтовете ви да се отдалечават твърде далеч един от друг стилистично, което може да създаде впечатлението, че са избрани на случаен принцип.

БЪРЗ СЪВЕТ: Помислете каква емоция или идея предизвиква определен шрифт. Опитайте да го сдвоите с друг шрифт, който предизвиква същата емоция или идея. Всичко е в намирането на правилните шрифтове, които говорят на вашата уникална марка. Ще го познаете по своята същност, когато даден шрифт се чувства като вашата марка или дали дава смесени сигнали.

Serif и Sans-Serif

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

Експериментацията е ключова

Когато избирам шрифтове за нов уебсайт, обичам да изтеглям всички възможни опции на Google Font на моя компютър и да играя с тях в текстообработващ документ. Фиджирането с различни размери и тегло и сравняването на комбинациите отстрани е ефективен начин за определяне на възможно най-доброто сдвояване. Като отделите време за експерименти, можете дори да откриете, че с помощта на a тънък вариацията на даден шрифт прави по-добър текст на заглавието, отколкото ако използвате напълно отделен шрифт. (Най-простото решение често е най-доброто.)

заключение

Google Fonts е мощен ресурс за DIYers, които не искат да плащат за скъпи персонализирани шрифтове на своя уебсайт. Но с голяма сила идва голяма отговорност: типографията изисква внимателна мисъл, за да се направи добре, а не всеки шрифт има победител. Надяваме се, че това ръководство ви помага да се насочите в правилната посока, вдъхновявайки ви да намерите идеалното сдвояване на шрифтове, за да заснемете личността на вашата марка.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map