טקסט וטיפוגרפיה

The CSS Podcast – 036: טקסט וטיפוגרפיה

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

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

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

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

לאחר מכן נסקור מאפייני גופן חיוניים ב-CSS, כולל font-family,‏ font-style,‏ font-weight ו-font-size. העקרונות הבסיסיים האלה מאפשרים לבצע פעולות שונות בטקסט, גם מבחינת הסגנון וגם מבחינת הקריאוּת שלו.

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

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

הכלל @font-face

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

תחביר

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

מתארים

ascent-override
התאמה אישית של מדד העלייה, שמשפיע על השטח שמעל ערך הבסיס.
descent-override
משנה את מדד הירידה, ומשפיע על הרווח שמתחת לערכי הבסיס.
font-display
שליטה בהתנהגות התצוגה של הגופן בהתאם לסטטוס ההורדה.
font-family
שם הגופן לשימוש בנכסים שקשורים לגופן.
font-stretch
הגדרת התאמה אופקית מקובלת, שצוינה כערך יחיד או כטווח.
font-style
מגדיר את סגנון הגופן, תומך בטווחי זוויות עבור סגנונות אלכסוניים.
font-weight
קביעת המשקל או טווח המשקלים הזמינים של הגופן.
font-feature-settings
מאפשר גישה לתכונות גופן OpenType.
font-variation-settings
נותן שליטה מדויקת בהגדרות של גופנים משתנים.
line-gap-override
עוקפת את פער השורות שמוגדר כברירת מחדל בגופן.
size-adjust
הפעלת גורם שינוי קנה מידה במתאר והמדדים של הגופן.
src
מגדיר את מקור הגופן, בין אם הוא מקומי ובין אם הוא מרוחק. הדבר נדרש לכלל @font-face. שילוב של url() ו-local() ב-src הוא אסטרטגיה נפוצה שמשתמשת בגופן מקומי אם הוא זמין, ומשתמשת בקובץ גופן מרוחק כחלופה. הדפדפנים נותנים עדיפות למשאבים על סמך סדר ההצהרה, ולכן בדרך כלל local() צריך להופיע לפני url().
unicode-range
מגביל את התווים שבהם צריך להשתמש בגופן הזה.

תיאור

הפקודה @font-face משחררת את המעצבים מהמגבלות של גופנים "בטוחים באינטרנט" בכך שהיא מאפשרת להם להשתמש בטיפוגרפיה מותאמת אישית. היכולת של הפונקציה local() לחפש גופן במכשיר של המשתמש מספקת חוויה חלקה שלא תלויה בהכרח בחיבור לאינטרנט.

סוגי MIME של גופנים

אופן הלימוד סוג MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

ההבדל בין @font-face לבין font-family

ב-CSS, לעיתים קרובות מבלבלים בין @font-face לבין font-family, אבל לכל אחת מהן יש מטרה שונה.

כפי שציינו, @font-face הוא כלל שמגדיר את הגופנים בהתאמה אישית שבהם רוצים להשתמש באפליקציית האינטרנט. הוא מציין לדפדפן לאן להוריד את הגופן, איך להציג אותו במהלך הטעינה (באמצעות המאפיין font-display) ואילו קבוצות משנה של תווים להוריד (באמצעות המאפיין unicode-range).

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

לסיכום, הפונקציה @font-face מגדירה גופן ומקצה לו שם, והפונקציה font-family מחילה את הגופן המוצהר הזה על רכיבי HTML.

דוגמה לשימוש בשניהם:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

בדוגמה הזו, @font-face מגדיר את 'CustomFont' ומציין לדפדפן איפה הוא נמצא. לאחר מכן, הנכס font-family מחיל אותו על רכיב הגוף, עם Arial כחלופה אם האפשרות CustomFont לא זמינה.

שינוי סוג הגופן

תמיכה בדפדפן

  • Chrome:‏ 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari:‏ 1.

מקור

משתמשים ב-font-family כדי לשנות את סוג הגופן של הטקסט.

המאפיין font-family מקבל רשימת מחרוזות שמופרדות בפסיקים, שמתייחסות למשפחות של גופנים ספציפיות או גנריות. משפחות גופנים ספציפיות מוקפות במירכאות, כמו "Hקיצור", "EB Garamond" או "Times New Roman". משפחות גופנים כלליות הן מילות מפתח כמו serif,‏ sans-serif ו-monospace (הרשימה המלאה של האפשרויות זמינה ב-MDN). הדפדפן יציג את משפחת הגופנים הזמינה הראשונה מהרשימה שסופקה.

כשמשתמשים ב-font-family, צריך לציין לפחות משפחת גופנים כללית אחת, למקרה שלדפדפן של המשתמש לא יהיו הגופנים המועדפים עליך. באופן כללי, משפחת הגופנים הגנרית החלופית צריכה להיות דומה לגופנים המועדפים עליכם: אם אתם משתמשים ב-font-family: "Helvetica" (משפחת גופנים ללא serif), הגופן החלופי צריך להיות sans-serif כדי להתאים.

שימוש בגופנים נטויים ובגופנים מוטים

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

משתמשים ב-font-style כדי לקבוע אם הטקסט יהיה נטוי או לא. font-style מקבלת אחת ממילות המפתח הבאות: normal, italic ו-oblique.

הצגת טקסט מודגש

תמיכה בדפדפנים

  • Chrome:‏ 2.
  • Edge:‏ 12.
  • Firefox: 1.
  • Safari:‏ 1.

מקור

משתמשים ב-font-weight כדי להגדיר את העוצמה של הטקסט. המאפיין הזה מקבל ערכים של מילות מפתח (normal, bold), ערכים יחסיים של מילות מפתח (lighter, bolder) וערכים מספריים (100 עד 900).

מילות המפתח normal ו-bold זהות לערכים המספריים 400 ו-700, בהתאמה.

מילות המפתח lighter ו-bolder מחושבות ביחס לרכיב ההורה. במאמר המשמעות של משקלים יחסיים ב-MDN מופיע תרשים שימושי שמראה איך הערך הזה נקבע.

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

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox: 1.
  • Safari: 1.

מקור

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

בנוסף לערכים של אורך ואחוז, font-size מקבל כמה ערכים מוחלטים של מילות מפתח (xx-small, x-small, small, medium, large, x-large, xx-large) וכמה ערכים יחסיים של מילות מפתח (smaller, larger). הערכים היחסיים הם יחסיים ל-font-size של רכיב ההורה.

שינוי הריווח בין השורות

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

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

שינוי הריווח בין התווים

תמיכה בדפדפן

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

אפשר להשתמש ב-letter-spacing כדי לקבוע את גודל המרווחים האופקיים בין התווים בטקסט. המאפיין הזה מקבל ערכי אורך כמו em, px ו-rem.

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

שינוי הריווח בין מילים

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • קצה: 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

משתמשים ב-word-spacing כדי להגדיל או להקטין את אורך הרווחים בין המילים בטקסט. המאפיין הזה מקבל ערכים של אורך, כמו em,‏ px ו-rem. חשוב לזכור שהאורך שציינתם הוא למרחב נוסף בנוסף למרווח הרגיל. כלומר, word-spacing: 0 שווה ערך ל-word-spacing: normal.

font קיצור דרך

אפשר להשתמש במאפיין המקוצר font כדי להגדיר מאפיינים רבים שקשורים לגופנים בבת אחת. רשימת הנכסים האפשריים היא font-family, font-size, font-stretch, font-style, font-variant, font-weight ו-line-height.

במאמר font ב-MDN מוסבר בפירוט איך מגדירים את הסדר של המאפיינים האלה.

שינוי גודל האותיות בטקסט

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • קצה: 12.
  • Firefox:‏ 1.
  • Safari: 1.

מקור

משתמשים ב-text-transform כדי לשנות את האותיות הרישיות בטקסט בלי לשנות את ה-HTML הבסיסי. אפשר להזין במאפיין הזה את ערכי מילות המפתח הבאים: uppercase,‏ lowercase ו-capitalize.

הוספת קו תחתון, קו עליון וקווים חוצים לטקסט

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari:‏ 1.

מקור

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

המאפיין text-decoration הוא קיצור דרך למאפיינים הספציפיים יותר שמפורטים בהמשך.

המאפיין text-decoration-line מקבל את מילות המפתח underline,‏ overline ו-line-through. אפשר גם לציין כמה מילות מפתח לכמה שורות.

המאפיין text-decoration-color קובע את הצבע של כל הקישוטים מ-text-decoration-line.

הנכס text-decoration-style מקבל את מילות המפתח solid, double, dotted, dashed ו-wavy.

הנכס text-decoration-thickness מקבל כל ערכי האורך ומגדיר את רוחב הקו של כל הקישוטים מ-text-decoration-line.

המאפיין text-decoration הוא קיצור דרך לכל המאפיינים שלמעלה.

הוספת כניסת פסקה לטקסט

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox: 1.
  • Safari:‏ 1.

מקור

משתמשים ב-text-indent כדי להוסיף כניסת פיסקה לקטעי טקסט. הנכס הזה יכול לקבל אורך (לדוגמה, 10px,‏ 2em) או אחוז מהרוחב של הבלוק המכיל.

טיפול בתוכן שחורג מהמסגרת או בתוכן מוסתר

תמיכה בדפדפן

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 7.
  • Safari: 1.3.

מקור

משתמשים ב-text-overflow כדי לציין איך התוכן המוסתר יוצג. יש שתי אפשרויות: clip (ברירת המחדל), לחיתוך הטקסט בנקודת הגלישה ו-ellipsis, שמציגה שלוש נקודות (...) בנקודת הגלישה.

שליטה ברווח לבן

תמיכה בדפדפן

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

המאפיין white-space משמש כדי לציין איך לטפל ברווחים לבנים ברכיב. לפרטים נוספים כדאי לעיין במאמר white-space בנושא MDN.

אפשר להשתמש ב-white-space: pre כדי להציג אמנות ASCII או בלוקים של קוד עם הפסקות מרווחים.

שליטה באופן שבו מילים מחולקות

תמיכה בדפדפנים

  • Chrome: 1.
  • Edge:‏ 12.
  • Firefox:‏ 15.
  • Safari: 3.

מקור

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

שינוי יישור הטקסט

תמיכה בדפדפן

  • Chrome: 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari: 1.

מקור

משתמשים ב-text-align כדי לציין את היישור האופק של הטקסט ברכיב של בלוק או תא בטבלה. המאפיין הזה מקבל את ערכי מילות המפתח left,‏ right,‏ start,‏ end,‏ center,‏ justify ו-match-parent.

הערכים left ו-right מיישרים את הטקסט לצד השמאלי ולצד הימני של הבלוק, בהתאמה.

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

משתמשים ב-center כדי ליישר את הטקסט למרכז הבלוק.

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

שינוי כיוון הטקסט

תמיכה בדפדפן

  • Chrome:‏ 2.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari:‏ 1.

מקור

משתמשים ב-direction כדי להגדיר את כיוון הטקסט: ltr (מימין לשמאל, ברירת המחדל) או rtl (משמאל לימין). שפות מסוימות כמו ערבית, עברית או פרסית נכתבות מימין לשמאל, ולכן צריך להשתמש בdirection: rtl. באנגלית ובכל שפות אחרות שנכתבות משמאל לימין, משתמשים ב-direction: ltr.

שינוי זרימת הטקסט

תמיכה בדפדפנים

  • Chrome:‏ 48.
  • קצה: 12.
  • Firefox: 41.
  • Safari: 10.1.

מקור

משתמשים ב-writing-mode כדי לשנות את אופן הזרימה והסידור של הטקסט. ברירת המחדל היא horizontal-tb, אבל אפשר גם להגדיר את writing-mode כ-vertical-lr או כ-vertical-rl לטקסט שרוצים שיופיע במאוזן.

שינוי כיוון הטקסט

תמיכה בדפדפנים

  • Chrome:‏ 48.
  • Edge:‏ 79.
  • Firefox: 41.
  • Safari: 14.

מקור

משתמשים ב-text-orientation כדי לציין את הכיוון של התווים בטקסט. הערכים החוקיים לנכס הזה הם mixed ו-upright. המאפיין הזה רלוונטי רק כשהערך של writing-mode מוגדר לערך שאינו horizontal-tb.

הוספת צללית לטקסט

תמיכה בדפדפנים

  • Chrome: 2.
  • Edge:‏ 12.
  • Firefox:‏ 3.5.
  • Safari: 1.1.

מקור

בעזרת text-shadow אפשר להוסיף הצללית לטקסט. המאפיין הזה מצפה לשלושה אורכי פס (x-offset,‏ y-offset ו-blur-radius) ולצבע.

מידע נוסף זמין בקטע text-shadow במודול שלנו בנושא צללים.

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

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

Roboto Flex בשילובים אקראיים של רוחב ומשקל

לפרטים נוספים, ניתן לעיין במאמר שלנו על Variables Fonts.

רכיבי פסאודו

רכיבי ::first-letter ו-::first-line פסאודו

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox:‏ 1.
  • Safari: 1.

מקור

הרכיבים ::first-letter ו-::first-line מטרגטים את האות הראשונה ואת השורה הראשונה של רכיב טקסט, בהתאמה.

רכיב ::selection לכאורה

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • Edge:‏ 12.
  • Firefox: 62.
  • Safari: 1.1.

מקור

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

כשמשתמשים בפסאודו-רכיב הזה, אפשר להשתמש רק במאפייני CSS מסוימים: color,‏ background-color,‏ text-decoration,‏ text-shadow,‏ stroke-color,‏ fill-color,‏ stroke-width.

font-variant

תמיכה בדפדפנים

  • Chrome:‏ 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari:‏ 1.

מקור

המאפיין font-variant הוא קיצור של כמה מאפייני CSS שמאפשרים לבחור וריאנטים של גופנים כמו small-caps ו-slashed-zero. מאפייני ה-CSS שהקיצור הזה כולל הם font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures ו-font-variant-numeric. בקישורים שבכל נכס תוכלו למצוא פרטים נוספים על השימוש בו.

בדיקת ההבנה

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

אילו מילות מפתח מהרשימה הבאה אפשר להשתמש בהן כחלופה גנרית ל-font-family?

serif
תשובה נכונה!
monospace
תשובה נכונה!
italic
אפשר לנסות שוב. italic היא מילת מפתח חוקית עבור font-style, ולא עבור font-family.
sci-fi
אפשר לנסות שוב. עם זאת, fantasy הוא חלופה כללית תקינה ל-font-family.
sans-serif
תשובה נכונה!
helvetica
אפשר לנסות שוב. "Helvetica" היא לא מילת מפתח גנרית, אלא מילת מפתח שמתייחסת למשפחת גופנים ספציפית.

איזו הצהרה משמשת להמרת האות הראשונה של כל מילה לאותיות רישיות? למשל: This is a sentence. ⬅ This Is A Sentence.

text-capitalize: true;
אפשר לנסות שוב.
text-case: capitalize;
אפשר לנסות שוב.
text-transform: capitalize;
תשובה נכונה!
font-style: capitals;
אפשר לנסות שוב.
font-variant: capitalize;
אפשר לנסות שוב.

נכון או לא נכון: משתמשים ב-text-orientation כדי ליישר טקסט שמאלה, ימינה או למרכז.

True
אפשר לנסות שוב. הפונקציה text-orientation משנה את הסיבוב של האותיות בשורה.
לא נכון
תשובה נכונה! text-orientation משנה את סיבוב האותיות בשורה. משתמשים ב-text-align כדי ליישר טקסט שמאלה, ימינה או למרכז (ועוד!).

באיזה מאפיין CSS אפשר להשתמש כדי לשנות את המרווח בין שורות הטקסט?

line-spacing
אפשר לנסות שוב.
leading
אפשר לנסות שוב. ליד הוא המונח הנכון לרווח בין השורות בטיפוגרפיה, אבל הוא לא נכס CSS חוקי.
baseline-distance
אפשר לנסות שוב.
line-height
תשובה נכונה!

משאבים