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

מהו הכלי הזה?

זיווג גופנים (font pairing) הוא בחירה של שני גופנים (ולעיתים שלושה) לשימוש משותף בעמוד — בדרך כלל אחד לכותרות ואחד לטקסט הגוף — כך שלעמוד תהיה היררכיה חזותית מבלי להיראות לא תואם או חד-גוני.

כל שילוב שמופיע למטה מציג דוגמה בתצוגה חיה: גופן הכותרת למעלה וגופן טקסט הגוף מתחתיו, תוך שימוש בקבצי Google Fonts האמיתיים, כך שמה שאתם רואים הוא בדיוק מה שתקבלו באתר שלכם.

כל שילוב מגיע עם תגית הטמעה מוכנה לשימוש של Google Fonts בסגנון `<link>` וקטע CSS תואם עם הגדרות `font-family` לכותרות ולטקסט הגוף — פשוט העתיקו את שניהם וסיימתם.

למה להשתמש בו?

  • 28 שילובים נבחרים ידנית, לא רשימה שנוצרה אוטומטית — כל אחד מהם נבחר כי שני הגופנים באמת משלימים זה את זה.
  • תצוגה מקדימה חיה: כל שילוב מוצג עם הגופנים האמיתיים שנטענים מ-Google Fonts, לא תמונה סטטית או ניחוש לפי שם הגופן.
  • סינון לפי סגנון — מודרני, אלגנטי, נועז, מינימלי, קלאסי — כדי לצמצם לתחושה שהפרויקט שלכם צריך.
  • העתקה בלחיצה אחת הן לתגית ההטמעה `<link>` והן לכללי ה-CSS של `font-family`.
  • חינמי, פועל בדפדפן שלכם, ללא צורך בחשבון או התחברות.

איך להשתמש

  1. אפשר ללחוץ על מסנן סגנון (מודרני, אלגנטי, נועז, מינימלי, קלאסי) כדי לצמצם את הרשימה, או להשאיר את "הכל" מסומן כדי לעיין בכל השילובים.
  2. עברו על כרטיסי התצוגה המקדימה החיה — השורה העליונה מציגה את גופן הכותרת, השורה שמתחתיה מציגה את גופן טקסט הגוף.
  3. פתחו שילוב שמוצא חן בעיניכם ולחצו כדי להרחיב את קטע קוד ההטמעה.
  4. העתיקו את תגית ה-`<link>` אל תוך ה-`<head>` של קובץ ה-HTML שלכם, והעתיקו את קטע ה-CSS אל גיליון הסגנונות שלכם כדי להחיל את הגופנים על הכותרות וטקסט הגוף.

דוגמה

קלט

בלוג אלגנטי

פלט

Playfair Display (כותרות) + Source Sans Pro (טקסט גוף)

סינון לפי "אלגנטי" מציף כותרות serif בעלות ניגודיות גבוהה בשילוב עם טקסט גוף נקי וקריא מאוד מסוג sans-serif — שילוב נפוץ לעיצובי בלוגים ותוכן עריכתי.

עקרונות לזיווג גופנים טוב

  • ניגודיות על פני דמיון: שני גופנים שנראים כמעט זהים (שני גופני sans-serif גיאומטריים דומים, למשל) נוטים להיראות כמו טעות ולא כבחירה מכוונת. שלבו serif עם sans-serif, או גופן תצוגה כבד עם גופן טקסט קליל יותר, כך שההבדל ייקרא כמכוון.
  • התאימו גובה x ופרופורציות: גופנים שבהם האותיות הקטנות יושבות בגבהים חזותיים דומים נוטים להרגיש כאילו הם שייכים לאותו עמוד, גם כאשר הסגנונות שלהם שונים — אי-התאמה בגובה ה-x היא אחת הסיבות הנפוצות ביותר לכך ששילוב מרגיש "לא נכון".
  • הגבילו את עצמכם לשתי משפחות גופנים (לעיתים שלוש): אחת לכותרות, אחת לטקסט גוף, ולכל היותר שלישית למבטאים כמו כפתורים או תוויות. יותר מכך והעמוד מתחיל להרגיש לא מתוכנן.
  • שקלו את האווירה, לא רק את הצורה: גופן sans מעוגל וידידותי בשילוב עם serif פורמלי משדר מסרים מעורבים גם אם הצורות של האותיות טכנית מתאימות זו לזו — בחרו גופנים שמסכימים גם על הטון וגם על המבנה.
  • בדקו בגדלים אמיתיים: שילוב שנראה מעולה בתצוגה מקדימה גדולה עלול לאבד ניגודיות בגודל טקסט גוף, או שגופן תצוגה עלול להפוך לבלתי קריא בגדלים קטנים — תמיד בדקו את שני הקצוות.

בחירת שילוב לפי מקרה שימוש

עמודי נחיתה ואתרי שיווק בדרך כלל נהנים ממסנני "נועז" או "מודרני" — גופן כותרת חזק ובעל ניגודיות גבוהה מושך תשומת לב מעל לקפל, בשילוב עם גופן גוף נקי וניטרלי ששומר על קלות סריקה של טקסט ארוך.

בלוגים ותוכן עריכתי בדרך כלל נקראים הכי טוב עם שילובי "אלגנטי" או "קלאסי" — כותרת serif מעודנת משדרת קול שקול ומוקפד, בעוד שטקסט גוף נוח מסוג serif או sans-serif שומר על קריאות לאורך מאמרים ארוכים וישיבות קריאה ממושכות.

אתרי מסחר אלקטרוני ואתרי מוצרים נוטים להעדיף שילובי "מינימלי" — גופנים מאופקים וניטרליים שומרים את המיקוד על צילומי המוצר והתמחור ולא על הטיפוגרפיה עצמה, דבר שחשוב כאשר עשרות כרטיסי מוצר מופיעים באותו עמוד.

תיקי עבודות ואתרים יצירתיים נהנים מהמרחב הגדול ביותר לניסוי — שילובי "נועז" או "אלגנטי" בעלי אופי בולט יותר יכולים לעבוד היטב כיוון שהקהל שם חלקית כדי להעריך טעם חזותי.

הערות על ביצועים ורישוי

תגית ההטמעה `<link>` טוענת גופנים מה-CDN של גוגל, שהוא מהיר ומאוחסן במטמון (cached) באתרים רבים שהמבקרים שלכם כנראה כבר ביקרו בהם — אך היא כן מוסיפה בקשה חיצונית. עבור אתרים שבהם כל אלפית שנייה חשובה, הורדת קבצי הגופן ואירוחם באופן עצמי (עם הגדרת `font-display: swap` ידנית) מסירה את התלות החיצונית הזו במחיר של מאמץ הגדרה נוסף.

כל הגופנים ב-Google Fonts הם קוד פתוח וחופשיים לשימוש מסחרי ללא צורך במתן קרדיט, אם כי מתן קרדיט למעצב הגופן הוא מחווה נחמדה כאשר קל לעשות זאת.

שאלות נפוצות

מה גורם לשני גופנים "להתאים היטב" זה לזה?

שילובים טובים מאזנים בין ניגודיות והרמוניה. ניגודיות — שילוב של serif עם sans-serif, או גופן תצוגה בולט עם גופן גוף פשוט — יוצרת היררכיה חזותית כך שכותרות וטקסט גוף מרגישים נבדלים. הרמוניה — גובה x דומה, עובי קווים דומה ותחושה משותפת של פורמליות או קלילות — שומרת על כך ששני הגופנים לא יתנגשו. השילובים כאן נבחרו תוך התחשבות בשני העקרונות.

האם כותרות וטקסט גוף צריכים תמיד להשתמש בגופנים שונים?

לא, שימוש במשפחת גופנים אחת עבור שניהם (כמו השילוב "Rubik + Rubik" בכלי הזה) עובד היטב גם כן, כל עוד לגופן יש מספיק מגוון משקלים כדי להבחין בין כותרות לטקסט גוף. זו בחירה מינימלית ולגיטימית — לא טעות.

איך בפועל מיישמים שילוב באתר שלי?

העתיקו את תגית ההטמעה `<link>` אל ה-`<head>` של העמוד שלכם כדי לטעון את הגופנים מה-CDN של גוגל, ואז העתיקו את קטע ה-CSS אל גיליון הסגנונות שלכם — הוא קובע את ה-`font-family` עבור כותרות (h1, h2, h3) ועבור טקסט גוף (body, p). התאימו את בוררי ה-CSS אם המבנה שלכם שונה.

האם טעינת Google Fonts תאט את האתר שלי?

כל קובץ גופן נוסף מוסיף בקשת רשת וסיכון מסוים לחסימת עיבוד. הקפידו להשתמש במשקל כותרת אחד ובמשקל או שניים לטקסט גוף, השתמשו ב-`display=swap` (כלול כבר בקוד ההטמעה) כדי שהטקסט יוצג בגופן חלופי בזמן טעינת גופן הרשת, ושקלו אירוח עצמי של קבצי הגופן עבור אתרי ייצור שזקוקים לזמן הטעינה המהיר ביותר האפשרי.

האם הגופנים הללו חופשיים לשימוש מסחרי?

כן. כל גופן ב-Google Fonts, כולל כל השילובים המוצגים כאן, מורשה תחת רישיון SIL Open Font License או רישיון Apache — שניהם מתירים שימוש מסחרי חופשי, שינוי והפצה מחדש ללא תמלוגים.

כלים קשורים

מחולל תגי מטא Open Graph

צרו תגי מטא של Open Graph ו-Twitter Card עם תצוגה מקדימה חיה של השיתוף.