שיטות עבודה מומלצות לטיפוגרפיה באינטרנט עבור אתר מודרני

מדריך לטיפוגרפיה מקובלת באינטרנט המכסה את כל השיטות הטובות ביותר & כללי גודל הפונט סטיילינג כדי להבטיח קריאה בתוכן האתר שלך & שמחה לראות.


שיטות עבודה מומלצות לטיפוגרפיה

לציירים מברשות. לפסלים יש את החימר שלהם. למעצבי אתרים יש … גופנים? כמו שיש עכשיו לאוליבר ריצ’נשטיין כתוב בצורה מפורסמת: “95% מהמידע באינטרנט הוא שפה כתובה.” אחרי כל השיקול הזהיר שנתת לגרפיקה המותאמת אישית, לאייקונים, לתפריטים היפים ולממשקים הנקיים של האתר שלך – יהיה זה חטא לאחר מכן להבהיר את המרכיב החיוני בטיפוגרפיה באינטרנט..

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

הקמת היררכיה חזותית

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

דוגמא להיררכיה חזותית של טיפוגרפיה

בניית גוף חזק

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

  • גודל הגופן הנפוץ ביותר לטקסט גוף הוא 16px– או עדיף, 1em (עוד על כך בהמשך).
  • הימנע מיישור הטקסט של הטקסט שלך, מכיוון שהקצוות הלא אחידים בשני הצדדים יוצרים מראה לא מושך. במקום זאת, קבע את השמאל והשמאל שולים של מיכל הטקסט ל אוטומטי להשיג אפקט רצוי יותר.
  • מוצדק טקסט עובד נהדר לעיתונים, לא לדפי אינטרנט. אופי פריסות הנוזלים יכול ליצור פערים בלתי צפויים של ריווח בין מילים.
  • בחר ניגודיות נמוכה גופנים על גבי אותיות גבוהות. גופנים כמו דידו עובדים יפה לכותרות ג’מבו או להדפסה בפורמט גדול, אך הניגודיות הגבוהה שלה בין קווי משיכה עבים ודקים מקשים על קריאה קשה בגדלים קטנים באתרי אינטרנט..
  • להיות מודע אליו קריאות. בגופנים רבים של sans-serif, אותיות האות “אני” ואותיות קטנות “נראות” זהות לחלוטין, מה שעלול ליצור בלבול מיותר.
  • האופטימלי גובה קו של טקסט הפסקה הוא בין 1.25-1.5 × גודל הגופן. התאם בהתאם על פי הגופן שבחרת.

כותרות להצלחה

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

  • גודל הגופן הממוצע לטקסט של כותרת נמצא אי שם 36px– או עדיף, בסביבה 2.25em (אנחנו נגיע לזה).
  • תשומת לב צריכה תמיד לעבור לכותרת לפני הגוף. ודא שטקסט הכותרת שלך אינו מוגזם על ידי משקל גופן עבה מדי בגוף.
  • ודא שהכותרות שלך עונות על ציפיות הקוראים. טקסט גדול בהרבה עם מרווח רב בין פסקת הילד שלו מסמל שינוי בנושא, בעוד שכותרות קטנות הרבה יותר קרובות לפסקאות מרמזות על כך שהתוכן קשור.
  • במקרה שהכותרת שלך צריכה לעטוף לשורה הבאה, להיות מודע לכך שהכי אופטימלי גובה קו עבור כותרות הוא פחות יותר ממה שיש לטקסט גוף.

המרחב שבין

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

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

נופלים בתור

דמיין שאתה קורא טקסט בצג ברזולוציה גבוהה שלך בגודל 27 אינץ ‘הנמתח לאורך כל קצוות המסך. העיניים שלך היו עייפות אחרי סעיף אחד בלבד!

חשוב לשמור על כל שורה בטקסט הראשי שלך שמוגבלת למספר מסוים של תווים כך שהעיניים יישארו ממוקדות בנקודה מרכזית. הקונצנזוס הפופולרי הוא שמדד קסמים זה נועד שולחנות עבודה הוא אורכו 60–75 תווים. ל מסכים ניידים, במקום שאנחנו רוצים להימנע מעיניים פוזלות ומטקסט מרוכז מדי, המספר הזה יושב סביב 35–40 תווים בשורה.

מטה את הסולם

הרבה נכתב בנושא הגודל בין גודל הגופן לגוף וכותרת. מה בדיוק גודל ה- H2 המושלם הזה אם טקסט ה- Body שלך הוא, נגיד, 1em? קביעת הפרופורציות הכי נעימות בין טקסט גוף לכותרות H1 – H6 היא למרבה המזל משהו שרבים מהטפוגרפים כבר פענחו. בנוסף, פרופורציות מתמטיות אלה חייבות להסתגל גם על פי גודל המסך של המשתמש.

המעצב ג’ייסון פמנטל מספק תרשים שימושי עבור מה שהוא מאמין שהם גדלי הגופנים האופטימליים ביותר במכשירי מדיה שונים – ואני נוטה להסכים איתו. בעיקרו של דבר, למרות שגודל ה- H1 האידיאלי בשולחן העבודה עשוי להיות בגודל 3 × גודל הגוף, על גבי מסך נייד זה נראה מוגזם מדי – כך שהוא צריך להיות מוגדר בכדי להתאים לאזור הצפייה הקטן יותר..

תרשים של גדלי גופנים מיטביים במכשירי מדיה שונים

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

שומר על טקסט בתגובה

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

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

א.מ על פיקסלים

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

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

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

באמצעות Ems

הדבר הראשון שצריך לעשות הוא להגדיר את התייחסות הבסיס לגודל הגופן של האתר שלך. אצלך גיליון סגנון, הזן את זה:

גוף {
גודל גופן: 100%;
}

זה קובע גודל פונט יחסי לתוכן האתר שלך 1em, שרוב הדפדפנים מפרשים כ- 16px. עכשיו כל גדלי הכותרת שלך – 2.25 em, 1.5em וכן הלאה – הם כפלים ישירים של 1em קו הבסיס.

הערה חשובה: א.מ. מדורגים—משמעות הגודל שלהם היא יחסית לערך שנקבע להורה. למשל: אם תגדיר את גודל הגופן של גופך ל- 1.25 em ואז גודל הגופן של מיכל ילדים ל 1.25em, שני הגופנים לא יהיו באותו גודל! במקום זאת, הטקסט של מיכל הילדים יהיה 1.25 × גודל ההורה 1.25em המקורי.

טיפים נוספים לטיפוגרפיה נהדרת של רשת

להלן מספר טיפים נוספים לטיפוגרפיה מעולה:

אל תגזימו

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

הטמע רק את מה שאתה צריך

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

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

אם אינך יכול לקרוא אותו, אל תשתמש בזה

זו ביגי. ואילו הפרחים גופן בכתב יד יכול להיות מפתה להשתמש, אם יש אפילו בלבול קל ביותר בין אם זה “g” או “y”, אל תשתמש בזה! אין דבר מתסכל יותר עבור הקורא מאשר להיאבק בפענוח גופן בלתי קריא.

העדיף טקסט אמיתי על פני ‘Lorem Ipsum’

כל מעצב מסתמך לורם איפסום טקסט דמה למילוי אזורי תוכן ריקים בעת תכנון פריסת הפרויקט. עם זאת, אתה עשוי להיות מופתע עד כמה השפעה השימוש בתוכן בפועל על המראה והתחושה של הטיפוגרפיה שלך יכולה להיות. ‘Lorem ipsum’ הוא חסר רגשות וחלול מבחינה אינטלקטואלית; זה לא מספק שום מושג אמיתי כיצד מילותיך ואישיותך יבואו לידי ביטוי באמצעות הגופן. לכן, חבר את התוכן בפועל לאתר שלך בהקדם האפשרי לפני שתשלים את עיצוב האתר שלך.

ניגודיות לרקעים

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

דוגמא לטיפוסוגרפיה גרועה של טקסט על רקע טקסטדוגמה לתרגול טיפוגרפיה גרוע תוך שימוש ברקע “טקסט על טקסט”.

זיווג גופנים – כמו מושך כמו

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

זיווג גופנים – שמור את זה במשפחה

הפיתרון הפשוט ביותר הוא לרוב הטוב ביותר. לפעמים הזיווגים הטובים ביותר מגיעים משימוש בווריאציות (serif, משקל חלופי, לוח) בתוך אותה Font-Family.

היפר-קישורים

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

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

כמה CSS לדעת

זה משפיע על המרחק בין אותיות. שימושי להדגשת הכותרות.

ריווח אותיות: x.xxem;

זה משפיע על המרחק בין מילים:

ריווח מילים: x.xxem;

זה נותן אלטרנטיבה לכל כובעי הדגש. שימושי גם לקיצורים.

גרסת גופן: כובעים קטנים;

זה ייעד את כל הטקסט שלך.

שינוי טקסט: אותיות גדולות;

זה ייוון את המכתב הראשון של הטקסט.

שינוי טקסט: היוון;

זה יכניס דרך חוצה טקסט.

קישוט טקסט: קו מעבר;

זה משפר את תצוגת הגופנים בדפדפנים מודרניים:

עיבוד טקסט: אופטימיזציה של ההתחברות

הבנת סוגי קבצי הגופן

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

סוג נכון

TTF הוא הפורמט הנפוץ ביותר עבור Mac ו- Windows, והוא נתמך בכל הדפדפנים העיקריים.

OpenType

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

סוג פתוח משובץ

EOT נתמך רק על ידי Internet Explorer – אלא אם כן אתה מודאג ממשתמשים בגירסאות ישנות של IE, סביר להניח שהכי טוב להשאיר את זה בחוץ..

תבנית גופן פתוחה באינטרנט

WOFF – ויורשו WOFF2 – הם המלכים החדשים בעיר. התמיכה שלהם בדפדפנים עיקריים ויכולת הדחיסה הופכת אותם לסוג הקבצים המודרני שבחרתם.

צריך להמיר סוג קובץ?

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

סיכום

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me