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

הפודקאסט של CSS – 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/woff
פורמט גופן פתוח באינטרנט 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, עם ValueTrack כחלופה אם "CustomFont" לא זמין.

שינוי הגופן

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

תמיכה בדפדפן

  • 2
  • 12
  • 1
  • 1

מקור

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

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

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 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 מוסבר איך מזמינים את הנכסים האלה.

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 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 הוא קיצור של כל הנכסים שלמעלה.

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

התמודדות עם תוכן שגולש או נסתר

תמיכה בדפדפן

  • 1
  • 12
  • 7
  • 1.3

מקור

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

איך לקבוע את סדר המילים

תמיכה בדפדפן

  • 1
  • 12
  • 15
  • 3

מקור

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

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

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

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

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

תמיכה בדפדפן

  • 2
  • 12
  • 1
  • 1

מקור

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

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

תמיכה בדפדפן

  • 48
  • 12
  • 41
  • 10.1

מקור

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

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

תמיכה בדפדפן

  • 48
  • 79
  • 41
  • 14

מקור

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

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

תמיכה בדפדפן

  • 2
  • 12
  • 3.5
  • 1.1

מקור

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

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

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

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

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

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

פסאודו אלמנטים

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 62
  • 1.1

מקור

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

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

font-variant

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 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 כדי ליישר טקסט לשמאל, לימין או למרכז.

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

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

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

מקורות מידע