טיפוגרפיה

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

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

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

גודל הטקסט

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

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

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

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

אפשר להשתמש בשאילתות מדיה כדי לשנות את המאפיין 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. פונקציית ה-CSS calc() היא מושלמת למטרה הזו.

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

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

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

הצמדת טקסט

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

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

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 כדי להנחות את הדפדפנים איפה למצוא את קובצי הגופנים באינטרנט. מומלץ להשתמש ב-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;
}

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

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

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

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

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

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

בדיקת ההבנה

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