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>` ჩასმის ტეგი და შესაბამისი CSS ფრაგმენტი `font-family` დეკლარაციებით სათაურებისა და ძირითადი ტექსტისთვის — დააკოპირეთ ორივე და მზად ხართ.

რატომ გამოვიყენო ის?

  • 28 გულდასმით შერჩეული წყვილი, არა ავტომატურად გენერირებული სია — თითოეული შერჩეულია იმიტომ, რომ ორი შრიფტი ნამდვილად ერწყმის ერთმანეთს.
  • ცოცხალი გადახედვა: ყოველი წყვილი აისახება რეალური, Google Fonts-იდან ჩატვირთული შრიფტებით, არა სტატიკური სურათით ან შრიფტის სახელის ვარაუდით.
  • გაფილტრეთ განწყობის მიხედვით — თანამედროვე, ელეგანტური, თამამი, მინიმალისტური, კლასიკური — რათა შეარჩიოთ თქვენი პროექტისთვის საჭირო შეგრძნება.
  • ერთი დაწკაპუნებით კოპირება როგორც `<link>` ჩასმის ტეგისთვის, ისე CSS `font-family` წესებისთვის.
  • უფასოა, მუშაობს პირდაპირ ბრაუზერში, არ საჭიროებს ანგარიშს ან ავტორიზაციას.

როგორ გამოვიყენო

  1. სურვილისამებრ დააჭირეთ განწყობის ფილტრს (თანამედროვე, ელეგანტური, თამამი, მინიმალისტური, კლასიკური), რომ სია დააზუსტოთ, ან დატოვეთ არჩეული "ყველა", რომ ყველა ვარიანტი დაათვალიეროთ.
  2. დაათვალიერეთ ცოცხალი გადახედვის ბარათები — ზედა ხაზი გვიჩვენებს სათაურის შრიფტს, ქვედა ხაზი კი — ძირითადი ტექსტის შრიფტს.
  3. გახსენით მოსწონებული წყვილი და დააჭირეთ ჩასმის კოდის განყოფილების გასაშლელად.
  4. დააკოპირეთ `<link>` ტეგი თქვენი HTML-ის `<head>` ნაწილში, ხოლო CSS ფრაგმენტი — თქვენს სტილების ფაილში, რათა შრიფტები სათაურებსა და ძირითად ტექსტს გამოეყენოს.

მაგალითი

შეყვანა

ელეგანტური ბლოგი

შედეგი

Playfair Display (სათაურები) + Source Sans Pro (ძირითადი ტექსტი)

"ელეგანტურის" მიხედვით გაფილტვრისას წარმოჩინდება მაღალკონტრასტიანი serif სათაურები, დაწყვილებული სუფთა და ადვილად წასაკითხი sans-serif ტექსტთან — ეს გავრცელებული კომბინაციაა სარედაქციო და ბლოგის სტილის განლაგებისთვის.

შრიფტების კარგი წყვილობის პრინციპები

  • კონტრასტი მსგავსობაზე მაღლა: ორი თითქმის იდენტური შრიფტი (მაგალითად, ორი მსგავსი გეომეტრიული sans-serif) ხშირად შეცდომად აღიქმება, ვიდრე გააზრებულ არჩევანად. დააწყვილეთ serif sans-serif-თან, ან მძიმე დისპლეი შრიფტი უფრო მსუბუქ ტექსტის შრიფტთან, რომ განსხვავება განზრახულად აღიქმებოდეს.
  • შეესაბამეთ x-სიმაღლესა და პროპორციებს: შრიფტები, რომელთა პატარა ასოები მსგავს ვიზუალურ სიმაღლეზეა განთავსებული, ერთმანეთს ერგებიან ერთ გვერდზეც კი, სტილის განსხვავების მიუხედავად — შეუსაბამო x-სიმაღლეები ერთ-ერთი ყველაზე გავრცელებული მიზეზია, რის გამოც წყვილი "არასწორად" ჩანს.
  • შემოიფარგლეთ ორი შრიფტოვანი ოჯახით (იშვიათად სამით): ერთი სათაურებისთვის, ერთი ძირითადი ტექსტისთვის და, მაქსიმუმ, მესამე აქცენტებისთვის, როგორიცაა ღილაკები ან იარლიყები. ამაზე მეტი და გვერდი დაუგეგმავად დაიწყებს გამოჩენას.
  • გაითვალისწინეთ განწყობა, არა მხოლოდ ფორმა: მრგვალი, მეგობრული sans შრიფტი, დაწყვილებული ფორმალურ serif-თან, შერეულ სიგნალს გზავნის, თუნდაც ასოთა ფორმები ტექნიკურად ერგებოდეს ერთმანეთს — შეარჩიეთ შრიფტები, რომლებიც ტონითაც შეესაბამება ერთმანეთს, არა მხოლოდ სტრუქტურით.
  • შეამოწმეთ რეალურ ზომებში: წყვილმა, რომელიც დიდ გადახედვაში შესანიშნავად გამოიყურება, შესაძლოა კონტრასტი დაკარგოს ტექსტის ჩვეულებრივ ზომაზე, ან დისპლეი შრიფტი წაუკითხავი გახდეს პატარა ზომებში — ყოველთვის შეამოწმეთ ორივე უკიდურესობა.

წყვილის შერჩევა გამოყენების სფეროს მიხედვით

სალენდინგო და მარკეტინგული საიტებისთვის ჩვეულებრივ ხელსაყრელია "თამამი" ან "თანამედროვე" ფილტრები — ძლიერი, მაღალკონტრასტიანი სათაურის შრიფტი იპყრობს ყურადღებას გვერდის ზედა ნაწილში, დაწყვილებული სუფთა, ნეიტრალურ ძირითადი ტექსტის შრიფტთან, რომელიც გრძელ ტექსტს ადვილად წასაკითხს ხდის.

ბლოგები და სარედაქციო კონტენტი ხშირად საუკეთესოდ იკითხება "ელეგანტური" ან "კლასიკური" წყვილებით — დახვეწილი serif სათაური მიუთითებს გააზრებულ, დამუშავებულ ხმაზე, ხოლო კომფორტული serif ან sans-serif ძირითადი ტექსტი გრძელ სტატიებს ინარჩუნებს წასაკითხად ხანგრძლივი კითხვის დროსაც.

ელექტრონული კომერციისა და პროდუქტის საიტები ხშირად "მინიმალისტურ" წყვილებს ირჩევენ — თავშეკავებული, ნეიტრალური შრიფტები ფოკუსს პროდუქტის ფოტოებსა და ფასებზე ტოვებს ტიპოგრაფიის ნაცვლად, რაც მნიშვნელოვანია, როცა ერთ გვერდზე ათობით პროდუქტის ბარათია.

პორტფოლიოებსა და შემოქმედებით საიტებს ექსპერიმენტისთვის ყველაზე მეტი სივრცე აქვთ — "თამამი" ან "ელეგანტური" წყვილები მეტი ხასიათით კარგად მუშაობს, რადგან აუდიტორია ნაწილობრივ ვიზუალური გემოვნების შესაფასებლადაც მოდის.

შენიშვნები წარმადობისა და ლიცენზირების შესახებ

ჩასმის `<link>` ტეგი შრიფტებს Google-ის CDN-იდან ტვირთავს, რაც სწრაფია და კეშირებულია ბევრ საიტზე, სადაც თქვენს ვიზიტორებს, სავარაუდოდ, უკვე ჰქონდათ წვდომა — თუმცა ეს დამატებით გარე მოთხოვნას წარმოადგენს. საიტებისთვის, სადაც ყოველი მილიწამი მნიშვნელოვანია, შრიფტის ფაილების ჩამოტვირთვა და საკუთარ სერვერზე განთავსება (`font-display: swap`-ის ხელით დაყენებით) აღმოფხვრის ამ გარე დამოკიდებულებას, თუმცა მოითხოვს გარკვეულ დამატებით მუშაობას.

Google Fonts-ის ყველა შრიფტი ღია წყაროა და უფასოა კომერციული გამოყენებისთვის, ავტორის მითითების გარეშეც კი, თუმცა შრიფტის დიზაინერის კრედიტირება მარტივ და კეთილგანწყობილ ჟესტს წარმოადგენს, სადაც ეს ადვილად შესაძლებელია.

ხშირად დასმული კითხვები

რა განაპირობებს, რომ ორი შრიფტი "კარგად ეხამება" ერთმანეთს?

კარგი წყვილი აბალანსებს კონტრასტსა და ჰარმონიას. კონტრასტი — serif-ის დაწყვილება sans-serif-თან, ან თამამი დისპლეი შრიფტის დაწყვილება მარტივ ტექსტის შრიფტთან — ქმნის ვიზუალურ იერარქიას, რის გამოც სათაურები და ძირითადი ტექსტი ცალკე გამოირჩევა. ჰარმონია — მსგავსი x-სიმაღლე, შედარებადი შტრიხის სისქე და საერთო ფორმალურობის ან უშუალობის შეგრძნება — ინარჩუნებს ორ შრიფტს შორის თანხმობას. აქ წარმოდგენილი წყვილები ორივე ფაქტორის გათვალისწინებით შეირჩა.

სათაურები და ძირითადი ტექსტი ყოველთვის სხვადასხვა შრიფტით უნდა იყოს?

არა, ერთი შრიფტოვანი ოჯახის გამოყენება ორივესთვის (როგორც ამ ხელსაწყოს "Rubik + Rubik" წყვილშია) ასევე კარგად მუშაობს, თუ შრიფტს საკმარისი სისქის ვარიაციები აქვს იმისთვის, რომ სათაური ძირითადი ტექსტისგან განასხვავოს. ეს ვალიდური, მინიმალისტური არჩევანია — არა შეცდომა.

როგორ გამოვიყენო წყვილი ჩემს საიტზე?

დააკოპირეთ `<link>` ჩასმის ტეგი თქვენი გვერდის `<head>` ნაწილში, რათა შრიფტები Google-ის CDN-იდან ჩაიტვირთოს, შემდეგ დააკოპირეთ CSS ფრაგმენტი თქვენს სტილების ფაილში — ის აყენებს `font-family`-ს სათაურებისთვის (h1, h2, h3) და ძირითადი ტექსტისთვის (body, p). საჭიროებისამებრ შეცვალეთ CSS სელექტორები, თუ თქვენი მარკაპი განსხვავდება.

შეანელებს თუ არა Google Fonts-ის ჩატვირთვა ჩემი საიტის სისწრაფეს?

ყოველი დამატებითი შრიფტის ფაილი ამატებს ქსელურ მოთხოვნას და გარკვეულ რისკს რენდერის დაბლოკვის მხრივ. შემოიფარგლეთ ერთი სისქის სათაურის შრიფტით და ერთი-ორი სისქის ძირითადი ტექსტის შრიფტით, გამოიყენეთ `display=swap` (უკვე ჩართულია ჩასმის კოდში), რათა ტექსტი ჩანაცვლების შრიფტით გამოჩნდეს, სანამ ვებშრიფტი იტვირთება, ხოლო წარმოებაში მყოფი საიტებისთვის, სადაც სისწრაფე კრიტიკულია, განიხილეთ შრიფტის ფაილების საკუთარ სერვერზე განთავსება.

ეს შრიფტები კომერციული გამოყენებისთვის უფასოა?

დიახ. Google Fonts-ის ყველა შრიფტი, მათ შორის აქ ნაჩვენები ყველა წყვილი, ლიცენზირებულია SIL Open Font License-ის ან Apache License-ის ფარგლებში — ორივე უფასოდ იძლევა კომერციულ გამოყენებას, მოდიფიკაციასა და გავრცელებას, ავტორის ჰონორარის გარეშე.

დაკავშირებული ხელსაწყოები

Open Graph მეტა თეგების გენერატორი

შექმენით Open Graph და Twitter Card მეტა თეგები გაზიარების ცოცხალი გადახედვით.