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

The CSS Podcast - 036: Text & Typography

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

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

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

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

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

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

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

הכלל @font-face

כלל ה-at של CSS‏, @font-face, הוא כלי חשוב בעיצוב אתרים. הוא מאפשר לכם לציין ולהשתמש בגופנים מותאמים אישית כדי להציג טקסט. היתרון של @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 מחיל את הגופן על רכיב ה-body, עם Arial כגופן חלופי אם CustomFont לא זמין.

שינוי הגופן

Browser Support

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

Source

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

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

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

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

Browser Support

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

Source

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

הדגשת הטקסט

Browser Support

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

Source

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

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

מילות המפתח lighter ו-bolder מחושבות ביחס לאלמנט ההורה. במאמר Meaning of Relative Weights (משמעות המשקלים היחסיים) ב-MDN יש תרשים שימושי שמראה איך הערך הזה נקבע.

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

font shorthand

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

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

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

Browser Support

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

Source

אפשר להשתמש ב-[`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) כדי לשנות את האותיות הרישיות בטקסט בלי לשנות את קוד ה-HTML הבסיסי. המאפיין הזה מקבל את ערכי מילות המפתח הבאים: uppercase,‏ lowercase ו-capitalize.

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

איך מתמודדים עם תוכן שגולש או מוסתר

Browser Support

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

Source

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

שליטה ברווחים הלבנים

Browser Support

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

Source

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

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

איך שולטים בגלישת מילים

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

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

שליטה בגלישת הטקסט

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

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

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

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

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

מילת המפתח stable פועלת באופן דומה ל-wrap, אבל היא מיועדת לשימוש עם טקסט contenteditable. אם מגדירים את text-wrap: stable, השורות שמעל התוכן שעורכים לא ישתנו במהלך התהליך.

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

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

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

הערכים anywhere ו-break-word מוסיפים נקודות עצירה בכל מקום בתוך המחרוזת כדי למנוע הצפה. ההבדל בין מילות המפתח הוא באופן שבו הן מגיבות לגודל min-content מובנה או מוגדר. מילת המפתח anywhere מאפשרת את כל ההזדמנויות האפשריות להוספת מקף רך. הערך של break-word לא יגרום לכך שהטקסט יהיה באורך המילה הארוכה ביותר.

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

Browser Support

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

Source

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

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

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

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

פרטים נוספים זמינים במאמר שלנו בנושא גופנים משתנים.

רכיבים פסאודו

::first-letter ו-::first-line פסאודו-אלמנטים

Browser Support

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

Source

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

::selection רכיב פסאודו

Browser Support

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

Source

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

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

font-variant

Browser Support

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

Source

המאפיין 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
אפשר לנסות שוב. Leading הוא המונח הנכון לרווח בין השורות בטיפוגרפיה, אבל הוא לא מאפיין CSS תקין.
baseline-distance
אפשר לנסות שוב.
line-height
תשובה נכונה!

משאבים