CodeKitHub
Қазақша
Код құралдары

Google Fonts жұп таңдағыш

Соңғы жаңарту:

Бір-бірімен шынымен үйлесетін екі қаріпті таңдау көрінгеннен қиынырақ — тым ұқсас болса, бет тегіс көрінеді, тым әртүрлі болса — хаосты. Бұл құрал 28 іріктелген тақырып + мәтін жұбымен сынақ пен қателерден құтылады, әр жұп тірі көрсетіледі, сондықтан шешім қабылдамас бұрын нақты контрастты көре аласыз. Көңіл-күй бойынша сүзгілеп, Google Fonts ендіру сілтемесі мен CSS font-family ережелерін жобаңызға тікелей көшіріңіз.

The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Montserrat + Merriweather
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Poppins + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Oswald + Lato
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Raleway + Lora
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bebas Neue + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Merriweather + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Abril Fatface + Poppins
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cormorant Garamond + Nunito Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Archivo Black + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Libre Baskerville + Source Sans Pro
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Josefin Sans + PT Serif
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Fjalla One + Noto Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Playfair Display + Karla
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Work Sans + Georgia
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Space Grotesk + Inter
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
DM Serif Display + DM Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Anton + Roboto
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Crimson Text + Open Sans
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Quicksand + Nunito
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Rubik + Rubik
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Bitter + Raleway
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Yeseva One + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Barlow Condensed + Barlow
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Cinzel + EB Garamond
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Righteous + Mulish
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Prata + Jost
Embed code / CSS code
The quick brown fox
The quick brown fox jumps over the lazy dog. Typography is the quiet language of design — it carries hierarchy, mood, and readability, and a good font pairing improves the reading experience without the reader ever noticing why.
Staatliches + Karla
Embed code / CSS code

Бұл құрал не істейді?

Қаріп жұптау дегеніміз — бетте бірге қолдану үшін екі (кейде үш) қаріп таңдау, әдетте біреуі тақырыптарға, екіншісі мәтін денесіне арналады, осылайша бетте сәйкессіздік немесе бірсарындылық болмай, көрнекі иерархия пайда болады.

Төмендегі әр жұп тірі көрсетілген үлгіні көрсетеді: жоғарыда тақырып қаріпі, астында мәтін қаріпі, нақты Google Fonts файлдарын қолданады, сондықтан не көрсеңіз, сол сайтыңызда шығады.

Әр жұп дайын Google Fonts `<link>` ендіру тегімен және тақырыптар мен мәтінге арналған `font-family` анықтамалары бар сәйкес CSS үзіндісімен келеді — екеуін де көшіріп, дайын болды.

Оны неге пайдалану керек?

  • 28 қолмен таңдалған жұп, автоматты жасалған тізім емес — әрқайсысы екі қаріп шынымен бір-бірін толықтыратыны үшін таңдалған.
  • Тірі алдын ала қарау: әр жұп Google Fonts-тан жүктелген нақты қаріптермен көрсетіледі, статикалық сурет немесе қаріп атауын болжау емес.
  • Көңіл-күй бойынша сүзгілеңіз — Заманауи, Талғампаз, Батыл, Минималды, Классикалық — жобаңызға қажет сезімге дейін тарылту үшін.
  • `<link>` ендіру тегі мен CSS `font-family` ережелерін бір рет басып көшіру.
  • Тегін, браузеріңізде жұмыс істейді, аккаунт немесе кіру қажет емес.

Оны қалай пайдалану керек

  1. Тізімді тарылту үшін көңіл-күй сүзгісін (Заманауи, Талғампаз, Батыл, Минималды, Классикалық) басыңыз, немесе бәрін шолу үшін «Барлығы» таңдалған күйінде қалдырыңыз.
  2. Тірі алдын ала қарау карталарын қараңыз — жоғарғы жол тақырып қаріпін, астыңғы жол мәтін қаріпін көрсетеді.
  3. Ұнаған жұпты ашып, ендіру кодының бөлімін жаю үшін басыңыз.
  4. `<link>` тегін HTML `<head>` бөліміне, ал CSS үзіндісін стиль кестеңізге көшіріп, қаріптерді тақырыптар мен мәтін денесіне қолданыңыз.

Мысал

Енгізу

Талғампаз блог

Нәтиже

Playfair Display (тақырыптар) + Source Sans Pro (мәтін)

«Талғампаз» бойынша сүзгілеу жоғары контрастты серифті тақырыптарды таза, жақсы оқылатын сериф емес мәтінмен біріктіреді — бұл редакциялық және блог макеттеріне кең таралған комбинация.

Жақсы қаріп жұптаудың принциптері

  • Ұқсастықтан гөрі контраст: бір-біріне іс жүзінде бірдей көрінетін екі қаріп (мысалы, екі ұқсас геометриялық сериф емес қаріп) әдейі таңдау емес, қате сияқты көрінеді. Серифті сериф еместермен немесе ауыр дисплей қаріпін жеңілірек мәтін қаріпімен жұптаңыз, сонда айырмашылық әдейі жасалғандай оқылады.
  • x-биіктік пен пропорцияларды сәйкестендіріңіз: кіші әріптері ұқсас көрнекі биіктікте орналасқан қаріптер стильдері әртүрлі болса да бір бетке жататындай сезіледі — сәйкес келмейтін x-биіктіктер жұптың «дұрыс емес» сезілуінің ең жиі себептерінің бірі.
  • Өзіңізді екі тұқымдаспен шектеңіз (кейде үш): біреуі тақырыптарға, біреуі мәтінге, ал үшіншісі — түймелер немесе белгілер сияқты акценттерге болуы мүмкін. Одан көбі бетті жоспарланбаған сияқты сезінуге әкеледі.
  • Тек пішінді емес, көңіл-күйді де ескеріңіз: дөңгеленген, достық сериф еместі формальды серифпен жұптау, әріп формалары техникалық тұрғыдан үйлескенімен, қарама-қайшы сигнал береді — құрылымы да, тоны да сәйкес келетін қаріптерді таңдаңыз.
  • Нақты өлшемдерде тексеріңіз: үлкен алдын ала қарауда керемет көрінетін жұп мәтін өлшемінде контрастын жоғалтуы мүмкін, немесе дисплей қаріпі кіші өлшемдерде оқылмай қалуы мүмкін — әрқашан екі шеткі жағдайды да тексеріңіз.

Қолдану жағдайы бойынша жұп таңдау

Лендинг беттер мен маркетингтік сайттарға әдетте «Батыл» немесе «Заманауи» сүзгілер пайда әкеледі — беттің жоғарғы бөлігінде назар аудартатын күшті, жоғары контрастты тақырып қаріпі ұзақ мәтінді оқуды жеңілдететін таза, бейтарап мәтін қаріпімен біріктіріледі.

Блогтар мен редакциялық мазмұн көбіне «Талғампаз» немесе «Классикалық» жұптармен жақсы оқылады — нәзік сериф тақырып ойластырылған, редакцияланған дауысты білдіреді, ал ыңғайлы сериф немесе сериф емес мәтін ұзақ мақалаларды ұзақ уақыт оқуды ыңғайлы етеді.

Электронды коммерция және өнім сайттары әдетте «Минималды» жұптарды артық көреді — ұстамды, бейтарап қаріптер назарды өнім фотографиясы мен бағаға аударады, типографияға емес, бұл бір бетте ондаған өнім карталары көрсетілгенде маңызды.

Портфолио мен креативті сайттарда тәжірибе жасауға ең көп мүмкіндік бар — жеке тұлғасы басым «Батыл» немесе «Талғампаз» жұптары жақсы жұмыс істейді, өйткені аудитория ішінара көрнекі талғамды бағалау үшін келеді.

Өнімділік пен лицензиялау туралы жазбалар

Ендіру `<link>` тегі қаріптерді Google CDN-нен жүктейді, бұл жылдам және көрушілеріңіз бұрын барған көптеген сайттарда кэштелген — бірақ ол сыртқы сұрау қосады. Әр миллисекунд маңызды сайттар үшін қаріп файлдарын жүктеп алып, өз серверіңізде орналастыру (`font-display: swap`-ты қолмен орнатумен) осы сыртқы тәуелділікті жояды, бірақ біраз орнату күш-жігерін қажет етеді.

Google Fonts-тағы барлық қаріптер ашық көзді және коммерциялық қолдануға тегін, авторлықты көрсету талап етілмейді, дегенмен қаріп дизайнерін атап өту оңай жерде жақсы әдеп болып саналады.

Жиі қойылатын сұрақтар

Екі қаріпті «жақсы жұптасады» ететін не?

Жақсы жұптар контраст пен үйлесімділікті теңестіреді. Контраст — серифті сериф еместермен жұптау немесе батыл дисплей қаріпін қарапайым мәтін қаріпімен біріктіру — тақырыптар мен мәтіннің ерекшеленуін қамтамасыз ететін көрнекі иерархия жасайды. Үйлесімділік — ұқсас x-биіктік, салыстырмалы штрих қалыңдығы және ортақ формальдылық немесе ойнақылық сезімі — екеуінің қайшы келуіне жол бермейді. Мұндағы жұптар осы екеуін де ескере отырып таңдалған.

Тақырыптар мен мәтін әрқашан әртүрлі қаріп қолдануы керек пе?

Жоқ, бір қаріп тұқымдасын екеуінде де қолдану (мысалы, осы құралдың «Rubik + Rubik» жұбы сияқты) жақсы жұмыс істейді, тек қаріпте тақырыптарды мәтіннен ажырату үшін жеткілікті салмақ вариациясы болса болғаны. Бұл жарамды, минималды таңдау — қате емес.

Жұпты сайтыма нақты қалай қолданамын?

Қаріптерді Google CDN-нен жүктеу үшін `<link>` ендіру тегін бетіңіздің `<head>` бөліміне көшіріңіз, содан кейін CSS үзіндісін стиль кестеңізге көшіріңіз — ол тақырыптарға (h1, h2, h3) және мәтінге (body, p) арналған `font-family` орнатады. Разметкаңыз өзгеше болса, CSS селекторларын түзетіңіз.

Google Fonts жүктеу сайтымды баяулата ма?

Әрбір қосымша қаріп файлы желілік сұрау және рендерингті бөгеу қаупін қосады. Оны бір тақырып салмағы мен бір-екі мәтін салмағымен шектеңіз, `display=swap` қолданыңыз (ендіру кодында бұрыннан бар) — веб-қаріп жүктеліп жатқанда мәтін резервтік қаріпте көрінуі үшін, ал ең жылдам жүктеуді қажет ететін өндірістік сайттар үшін қаріп файлдарын өз серверіңізде орналастыруды қарастырыңыз.

Бұл қаріптерді коммерциялық мақсатта тегін қолдануға бола ма?

Иә. Google Fonts-тағы әрбір қаріп, соның ішінде мұнда көрсетілген барлық жұптар, SIL Open Font License немесе Apache License бойынша лицензияланған — екеуі де роялтисіз тегін коммерциялық қолдануға, өзгертуге және таратуға рұқсат береді.

Ұқсас құралдар

Open Graph мета тег генераторы

Бөлісудің тікелей алдын ала көрінісі бар Open Graph және Twitter Card мета тегтерін жасаңыз.