ישנם כל כך הרבה רכיבים בעיצוב אתר הרוצח. אבל לעתים קרובות מדי אני רואה שאנשים מתעלמים מפרטים קטנים, כמו טיפוגרפיה.
אני יודע מה חלקכם אולי חושבים. כמה חשוב יכול להיות הגופן של אתר אינטרנט?
תאמינו או לא, דבר פשוט כמו בחירת הגופן הנכון יכול להשפיע על המרה . בנוסף, גופני אתרים משפיעים על המראה הכללי של האתר שלך.
עכשיו לא סביר שהיית באתר וחשבת, “וואו! אני מאוד אוהב את הפונט הזה! ”
זה פשוט לא מה שהמוח שלנו מאומן לחפש ואני לא מצפה שתמצאו גופן שהולך “וואו” את מבקרי האתר שלך. אבל אני יכול להבטיח שהיית באתרים עם גופנים שהיו גנריים, לא מושכים, קשים לקריאה או שהרגישו לא במקום. ברור שאתה לא רוצה שאנשים יתרשמו כך מהאתר שלך.
האם אתה זקוק לעזרה בעיצוב אתרים?
קבל עזרה בעיצוב האתר או הבלוג שלך עוד היום.
התחל לעבוד
מדוע גופן האתר שלך חשוב
הנה מה שיש לקחת בחשבון: גופנים שונים באתר יכולים לשנות את תפיסת הקורא בנושא מסוים.
ארול מוריס ערך סקר במאמר שפורסם ב- The New York Times בשנת 2012. הוא כלל קטע מתוך ספר שטען שאנחנו חיים באוזן של בטיחות חסרת תקדים, ומעקב אחר המעבר בשתי שאלות:
- האם הטענה נכונה? (כן או לא)
- עד כמה אתה בטוח בתשובה? (מעט, בינוני, מאוד)
מסתבר שמוריס לא היה אכפת מדעתו של אף אחד. הוא רק רצה לדעת אם הגופן יכול להשפיע על תשובותיהם. ארבעים אלף איש השתתפו ללא ידיעה בניסוי זה. בזמן שכולם קראו את אותו קטע; לא כולם ראו את זה באותה טיפוגרפיה.
בדוק את התוצאות הללו.
גרף זה מראה את כל המשיבים שהסכימו לשאלה הראשונה. מוריס לקח את רמות הביטחון שלהם בשאלה השנייה והקצה ערך משוקלל לכל תגובה.
בכך, ברור שהיה הבדל בין עד כמה אנשים בטוחים הסכימו עם הטענות שהועלו על בסיס הגופן בו הוצגו. עכשיו בואו נראה ונראה את התוצאות של המשיבים שלא הסכימו עם המעבר.
השווה בין שני הגרפים. האם אתה מבחין בדמיון כלשהו?
כפי שאתה יכול לראות, גופן בסקרוויל דורג הגבוה ביותר ביחס להסכמה משוקללת והנמוך ביותר עבור מחלוקת משוקללת. גופן קומיקס סאנס דורג הנמוך ביותר בהסכמה משוקללת, ומדורג גבוה במחלוקת משוקללת.
בהתבסס על נתונים אלה, מוריס הצליח להגיע למסקנה שגופנים יכולים להשפיע על הדרך בה אנשים תופסים מידע. בעיקרון, הגופן יכול למעשה להשפיע על אמינות האתר שלך .
בקיצור – כן, גופני האתר חשובים.
מיטב זיווגי הגופנים של גוגל לשנת 2020
אינך רוצה שאותו פונט יהיה בכל מקום באתר שלך; זה משעמם מדי. תערבב את זה! אך הקפד לבחור גופנים שמשתלבים טוב ביחד. יצרתי את המדריך הזה שיעזור לך לעשות בדיוק את זה.
יש המון פלטפורמות למציאת גופנים בחינם , אך גוגל פונטים הוא האהוב עלי ביותר. זיהיתי את התאמות המובילות של גופני גופנים לשנת 2020. אז בדוק את הרשימה שלי, ובחר שילוב שמתאים ביותר לאתר שלך.
Open Sans and Roboto
הכותרת של צילום מסך זה היא Open Sans חצי מודגש. הפיסקה למטה היא רובוטו רגילה. אני חושב שהכותרת הנועזת למחצה פשוט מפרסמת קצת יותר אגרוף מהמשקל הרגיל של Open Sans, אבל זה בסדר אם תלך גם עם האפשרות הזו.
הסיבה לכך שגופנים אלה פועלים כל כך טוב יחד היא מכיוון ששניהם פריכים וקריאים במיוחד.
יש לך כאן הרבה אפשרויות שונות שיש לקחת בחשבון לעיצוב האתר שלך. שילוב זה יכול לשמש להעברת הצעת הערך בדף הבית שלך. השתמשו בכותרת Open Sans כנקודת דגש, ואז הרחיבו את הנושא באמצעות רובוטו.
הגופנים האלה עובדים טוב יחד אם תחליף אותם גם כן. אתה יכול להשתמש ב- Roboto ככותרת העליונה, וב- Open Sans עבור הפסקה. במקרה זה, הייתי ממליץ ללכת עם מדינת רובוטו, ו Open Sans רגילה.
Playfair Display ו- Montserrat
שילוב הגופנים הזה עובד הכי טוב לטקסט קצר יותר באתר האינטרנט שלך. לא בהכרח הייתי משתמש בו בפוסט בבלוג או במשהו כזה.
עם זאת, התאמה זו מושלמת לתואר מוצר ולתיאור מוצר, במיוחד עבור חנויות מסחר אלקטרוני בתעשיית האופנה. הגופן הקל יותר, כמו האור של מונטסראט, מעניק לטקסט רמה מסוימת של אלגנטיות שמתאימה לפרסונה של מותג יוקרה.
באופן מעניין אם אתה מחליף את השניים ומשתמש במונטסראט ככותרת, הפרסונה משתנה למשהו שמרגיש עתידני או טכני. שילוב זה יכול לעבוד היטב עבור חלק מכם המקדמים משחק, או אפילו בעמוד נחיתה כדי להוריד את אפליקציית המשחקים הניידים שלכם.
כך או כך, שני הגופנים הללו עובדים היטב. זה תלוי בנושא ובמסר הכללי שאתה הולך אליו באתר שלך.
לורה ואלגריה
לורה מודגש היא חזקה וקריאה, וזו הסיבה שהיא מושלמת לדפי כותר. בעוד שהטיפוגרפיה היא עוצמתית, היא עדיין ידידותית ומזמינה.
אלגריה מחמאה את לורה באופן קבוע, במיוחד כשמשמשת לצילומי כיתוב.
בעוד שאלגריה בהחלט קריאתית, זה יכול להיות מאתגר לקרוא למתיחות ארוכות, וזו הסיבה שעדיף לטקסט קצר כמו כיתובים או תיאורים מהירים. לא הייתי ממליץ להתנסות בגרסאות אחרות של אלגריה. הוספת משקל או נטוי לפונט זה מאבדת את הקריאות.
עכשיו אם אתה מחליף את עמדותיהם, אלגריה מודגש עובד טוב עבור כותרת וטקסט כותרת. לורה רגילה קריא, כך שתוכלו לשקול להשתמש בה לטקסט ארוך יותר. אני חושב שהשילוב הזה יהיה מושלם למשהו כמו המלצה של לקוח או מקרה קצר.
Merriweather ו- Lato
אור Merriweather ו- Lato רגיל הוא שילוב נקי ומקצועי מאוד.
זו בחירה פופולרית מכיוון שהאפשרויות כה מגוונות. האור של Merriweather מודרני, בטוב טעם ומושך. כאשר זה מעקב אחר טקסט שנכתב בלטו, ההתאמה נראית אמינה.
אני ממליץ להשתמש בשילוב זה בדף הבית שלך. לאלו מכם שיש להם עיצוב שכולל גלילה למידע נוסף, שילוב טקסט זה יעבוד בצורה מושלמת. אני מציירת מבקר באתר שגלול במורד מסך הבית שלך, רואה תמונה בצד שמאל של הדף ושילוב הגופנים הזה בצד ימין. כאשר הם ממשיכים לגלול, התמונה הבאה תהיה מצד ימין, והטקסט יהיה בצד שמאל.
אם זה נשמע כמו העיצוב הנוכחי שלך, כדאי לשקול להשתמש בשילוב הזה כדי להוסיף מגע של מקצועיות לתוכן שלך.
Amatic SC ו- Josefin Slab
שילוב הגופנים של Amatic SC מודגש עם איטלקית של Josefin Slab הוא בהחלט לא לכולם. אני לא יכול לומר שהייתי ממליץ עליו לרוב האתרים, אבל זה שילוב אידיאלי לאתרים אומנותיים. אם אתה מוזיקאי, צייר או צלם, ניתן להשתמש בגופנים אלה במשורה בדפים שלך.
המפתח כאן הוא לוודא שלטקסט יש הרבה מקום לנשום. אני ממליץ להשתמש בו על רקע לבן או בהיר מאוד. אז בדוק את הפוסט שלי גם ב- תוכניות הצבעים המובילות ביותר של האתר בשנת 2020 .
אם אתה מוכר קרמיקה או פסלים, הגופן הזה יכול להיות מושך מאוד את הקהל שלך ולהתאים יפה לנושא הכללי של העסק שלך.
רק וודא שאתה לא הולך על הסיפון. השימוש יותר מדי מזה על המסך הוא לא מושך ומאתגר לקריאה. אז בחר משהו אחר עבור גושי טקסט ארוכים יותר, כמו הביוגרפיה שלך או על דפי עליי.
סינזל וראלוויי
סינזל הוא פונט נועז (אין שום משחק מילים). הכל אותיות גדולות, מה שהופך אותו יותר מתאים לטקסט קצר לעומת פוסטים ארוכים בבלוג או דברים מהסוג הזה.
זה באמת משלים עם פונט שהוא קצת יותר מסורתי, כמו Raleway. שני הגופנים הללו מושלמים לאתרים בענף המזון והמשקאות.
תוכל לשקול להשתמש בזה כדי לתבל את התפריט המקוון שלך. ציין את קטגוריות התפריט בשחור סינזל, כותרות הארוחות בסינזל מודגשות ותיאור הפריט שנכתב ב- Raleway רגיל.
אם אתה באמת רוצה להיות ייחודי, אתה יכול להחליף את השניים ולהשתמש ב- Raleway לכותרות ובסינזל לטקסט של הגוף. זה יכול לעבוד טוב עבור בתי קפה מקומיים המעודכנים את אתר האינטרנט שלהם עם מבצעים יומיים או מבשלות שבועיות.
PT Sans Narrow and PT Sans
PT Sans Narrow ו- PT Sans הוא שילוב קלאסי. בחירה רב-תכליתית זו תעבוד היטב כמעט בכל אתר אינטרנט בשנת 2020.
מכיוון ששני הגופנים כל כך קריאים, אתה יכול להשתמש בה לטקסט בטופס קצר, כמו גם לתוכן ארוך טווח כמו פוסטים בבלוג.
אני אוהב את הגופנים האלה מכיוון שהם קלים לקריאה, אך אינם גנריים ומשעממים מדי. Sans PT צר ו PT Sans מזמינים, לכן שקלו להשתמש בהם על מסכי בית ודפי נחיתה.
כיצד לבחור את הגופנים הטובים ביותר לאתר
עכשיו, אחרי שראית כמה מהשילובים הטובים ביותר של גופני גופנים משנת 2020, איך אתה יכול להחליט איזה מהם הכי מתאים לאתר שלך [ 19459004]?
הדבר הראשון שעליך לעשות הוא לקבוע לאיזה סוג תוכן הגופן ישמש. החלט אם הגופנים מיועדים לבלוג, לדף הבית, לדף הנחיתה, לתיאור המוצר או לתפריט הניווט.
תרצה גם לקחת בחשבון את סוג העסק שיש לך, כמו גם את הקהל שאליו אתה מכוון. האם הגופן צריך להיות מקצועי? או שיש לך קצת מקום להיות קצת ייחודי?
המפתח לזיווג שני גופנים זה לזה הוא הניגודיות. הגופנים צריכים להיות שונים מספיק כך שכל אחד מהם ניתן להבחנה, אך לא כל כך שונה עד שהקורא מוסח.
אולי תרצה להשתמש בכמה שילובי גופנים באתר שלך, אך אל תעבור על הסף. תשאיר את זה פשוט. לכל עמוד צריך להיות שני גופנים בלבד; שלוש לכל היותר. אם אתה רוצה להשתמש יותר, שקול להשתמש בווריאציות של הגופנים שכבר נמצאים בדף (אור, נטוי, בינוני, מודגש וכו ‘) במקום.
מסקנה
גופנים חשובים, אז הגיע הזמן להיפטר מהברירת המחדל. גופנים של גוגל הוא אחד המשאבים הטובים ביותר לגופני אתרים בחינם. הפלטפורמה כוללת כמה מהגופנים המובילים באתר.
- Open Sans and Roboto
- Playfair Display and Montserrat
- Lora and Alegreya
- Merriweather and Lato
- Amatic SC and 1945 Josefin Slab
- Cinzel and Raleway
- PT Sans Narrow and PT Sans
ניסיתי לספק קצת משהו לכולם. זכור, לא כל הגופנים האלה יפעלו עבור כל אתר אינטרנט. אז עברו על אלה ובדקו אילו גופנים המתאימים ביותר לעסק, לתעשייה, לקהל ולנושא שלכם.
האם אתה זקוק לעזרה בעיצוב אתרים?
קבל עזרה בעיצוב האתר או הבלוג שלך עוד היום.
התחל לעבוד
