טיפוגרפיה

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

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

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

גודל הטקסט

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

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

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

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

אפשר להשתמש בשאילתות מדיה כדי לשנות את המאפיין 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(). ערך הפתיחה מציין את הגודל המינימלי. במקרה הזה, הערך לא יכול לחרוג מגודל הגופן המועדף על המשתמש. הערך הסוגר מציין את הגודל המקסימלי.

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

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

אורך השורה

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

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

כל אורך בין 45 ל-75 תווים נחשב לאורך תקין כאורך תקין של שורה עבור עמוד שיש בו עמודה יחידה, בתוך תצוגת טקסט עם תגי עיצוב וגודל טקסט. השורה בת 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 אפשר להנחות את הדפדפנים למצוא את קובצי ה-Web font שלך. משתמשים ב-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 מאפשר לדפדפן לנהל את המעבר מגופן מערכת לגופן אינטרנט. עד שגופן האינטרנט ייטען, אפשר לבחור שלא להציג טקסט בכלל. תוכל לבחור להציג את גופן המערכת באופן מיידי, ולאחר מכן לעבור לגופן האינטרנט לאחר טעינתו. לשתי השיטות יש חסרונות. אם מחכים עד להורדת גופן האינטרנט לפני שמציגים טקסט כלשהו, המשתמשים עלולים למצוא את עצמם בוהים בדף ריק למשך זמן רב באופן מתסכל. אם תציגו קודם את הטקסט בגופן מערכת ולאחר מכן תעבור לגופן האינטרנט, ייתכן שהמשתמשים יחוו תזוזה צורמת של תוכן בדף.

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

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

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

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

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

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

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

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

האות A מוצגת במשקלים שונים.

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

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

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

בדיקת ההבנה

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

צריך להוסיף סגנונות כדי שהטקסט יגלש בתוך אזור התצוגה.

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

clamp() שימושי לטיפוגרפיה גמישה כי

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

איזה סוג של ערכי line-height הומלץ במדריך הזה?

24px
בפוסט מצוין במפורש שאין להשתמש בערכי פיקסלים עבור line-height.
2rem
rems הם ערכים יחסיים, אבל הם עדיין יכולים ליצור גובה-רוחב קטן או גדול מדי.
1.5
מומלץ להשתמש בערכים יחסיים ללא יחידה.
2vw
יחידות נקודת מבט, כמו line-height, עלולות להיות בעייתיות.

מה עושה font-display?

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