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

הפודקאסט The CSS – 036: Text & Typography

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

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

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

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

שינוי הגופן

תמיכה בדפדפן

  • 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.

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

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

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

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1

מקור

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

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

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

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

מקורות מידע