טיפוגרפיה

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

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

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

גודל הטקסט

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

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

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

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

אפשר להשתמש בשאילתות מדיה כדי לשנות את המאפיין 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);
}

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

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

הצמדת טקסט

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

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

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

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

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

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

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

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

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

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

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

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

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

בדיקה של רמת ההבנה שלך

בחינת הידע בטיפוגרפיה