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

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

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

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

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

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

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

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

הכלל @font-face

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

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

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

אפשר להשתמש במילות המפתח solid,‏ double,‏ dotted,‏ dashed ו-wavy במאפיין text-decoration-style.

הנכס 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 משמש לציון אופן הטיפול במרווחים לבנים ברכיב. פרטים נוספים זמינים במאמר white-space ב-MDN.

אפשר להשתמש ב-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: 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?

italic
sans-serif
serif
monospace
helvetica
sci-fi

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

font-style: capitals;
text-capitalize: true;
text-transform: capitalize;
text-case: capitalize;
font-variant: capitalize;

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

לא נכון
True

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

baseline-distance
leading
line-spacing
line-height

משאבים