טיפוגרפיה

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

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

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

גודל הטקסט

קשה לדעת מהו גודל הטקסט המתאים באינטרנט.

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

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

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

אפשר להשתמש בשאילתות מדיה כדי לשנות את הנכס font-size ככל שגודל המסך נעשה רחב יותר.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

שינוי גודל הטקסט

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

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

חשוב לא להשתמש ב-vw לבדו בהצהרה על גודל הגופן.

html {
  font-size: 2.5vw;
}

אם תעשו זאת, המשתמש לא יוכל לשנות את גודל הטקסט. אפשר יהיה לשנות את גודל הטקסט אם משלבים ביחידה יחסית, כמו em, rem או ch. הפונקציה calc() ב-CSS מתאימה במיוחד למטרה הזו.

html {
  font-size: calc(0.75rem + 1.5vw);
}

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

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

צמצום הטקסט

סביר להניח שלא תרצו שהטקסט יתכווץ או יתרחב בצורה קיצונית. אפשר לקבוע איפה תתחיל ותסתיים ההתאמה באמצעות פונקציית ה-CSS clamp(). פעולה זו "מצמצמת" את קנה המידה לטווח מסוים.

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

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

עכשיו הטקסט מתכווץ וגדל ביחס למסך של המשתמש, אבל הטקסט אף פעם לא יהיה קטן מ-1rem או יותר מ-2rem.

אורך השורה

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

בספר הקלאסי שלו The Elements of Typographic Style, רוברטו ברינגורסט (Robert Bringhurst) אמר את הדברים הבאים על אורך השורה (או המידה):

אורך שורה של 45 עד 75 תווים נחשב בדרך כלל לאורך שורה מספק בדף עם עמודה אחת, עם גופן טקסט עם serif בגודל טקסט. שורה באורך 66 תווים (כולל אותיות ורווחים) נחשבת אידיאלית. כשעובדים עם כמה עמודות, הממוצע המומלץ הוא 40 עד 50 תווים.

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

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

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

שימוש ביחידות ch לרוחב יגרום לקווים חדשים להסתובב בתווית ה-66 בגודל הגופן הזה.

גובה השורה

אין מאפיין line-length ב-CSS, אבל יש מאפיין line-height.

לשורות טקסט קצרות יותר יכולים להיות ערכים גדולים יותר של line-height. עם זאת, אם משתמשים בערכים גדולים של line-height בשורות ארוכות של טקסט, קשה לעין של הקורא לעבור מסוף שורה אחת לתחילת השורה הבאה.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

יש להשתמש בערכים ללא יחידה בהצהרות line-height. כך מוודאים שגובה השורה יהיה יחסי ל-font-size.

line-height: 24px;

line-height: 1.5;

שילובים והתאמה לעומס

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

גופנים לאינטרנט

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

משתמשים ב-@font-face כדי להורות לדפדפנים איפה נמצאים קובצי הגופנים לאינטרנט. להשתמש ב-woff2 כפורמט של גופן אינטרנט. יש לה תמיכה רחבה והיא מניבה את השיפורים הטובים ביותר בביצועים.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

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

טעינת גופן

אתם יכולים לבקש מהדפדפנים להתחיל להוריד קובץ גופן בהקדם האפשרי. מוסיפים אלמנט link אל head של המסמך, שמפנה לקובץ הגופן לאינטרנט. מאפיין rel עם ערך preload מורה לדפדפן לתת עדיפות לקובץ הזה. מאפיין as עם הערך font מאפשר לדפדפן לדעת איזה סוג קובץ זה. המאפיין type מאפשר לכם להיות ספציפיים עוד יותר.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

צריך לכלול את המאפיין crossorigin גם אם אתם מארחים את קובצי הגופן בעצמכם.

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

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

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

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

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

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

גופנים משתנים

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

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

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

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

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

בדיקת ההבנה

בדיקת הידע שלכם בנושא טיפוגרפיה