אם לא תציינו סגנונות לטקסט, הדפדפנים יחילו סגנונות ברירת מחדל משלהם. גיליונות סגנונות אלה נקראים גיליונות סגנונות של סוכן משתמש, והם עשויים להשתנות בהתאם לדפדפן. בנוסף, המשתמשים יכולים להגדיר העדפות משלהם להצגת הטקסט.
אם לא תציינו אורך שורה, הדפדפנים יגלשו את שורות הטקסט בשולי המסך. לכן הטקסט באינטרנט הוא רספונסיבי כברירת מחדל - הוא עובר בהתאם לאזור התצוגה של המשתמש.
עם זאת, העובדה שטקסט מתאים למסך לא אומרת שקל לקרוא אותו. בטיפוגרפיה טובה חשוב להציג את הטקסט בדרך הנכונה. טיפוגרפיה מורכבת יותר מבחירה בגופנים מתאימים לשימוש. יש להביא בחשבון את העדפות המשתמש, את גודל הטקסט, את אורך השורה ואת המרחק בין שורות הטקסט.
גודל הטקסט
קשה לדעת מה גודל הטקסט באינטרנט.
אם מישהו משתמש במסך קטן, יכול להיות שהמסך שלו יהיה די קרוב לעיניים — במרחק של כף יד.
אבל ככל שהמסכים גדלים וגדלים, קשה יותר לבצע את החיבור הזה. מסך בגודל של מחשב נייד יהיה קרוב ככל האפשר לצופה, אבל צג של מחשב נייד הוא בערך באותו גודל של מסך טלוויזיה. האנשים יושבים במרחק זרוע ארוכה מהמסך של המחשב, אבל הם יושבים הרבה יותר רחוק מהטלוויזיה.
יחד עם זאת, גם אם אתם לא יכולים לדעת בוודאות מה המרחק של המשתמש מהמסך, תוכלו לנסות להשתמש בגדלים של טקסט שייחשבו למתאימים. אפשר להשתמש בטקסט קטן יותר במסכים קטנים ובטקסט גדול יותר במסכים גדולים יותר.
אפשר להשתמש בשאילתות מדיה כדי לשנות את המאפיין font-size
כאשר גודל המסך נעשה רחב יותר.
@media (min-width: 30em) {
html {
font-size: 125%;
}
}
@media (min-width: 40em) {
html {
font-size: 150%;
}
}
@media (min-width: 50em) {
html {
font-size: 175%;
}
}
@media (min-width: 60em) {
html {
font-size: 200%;
}
}
התאמת הטקסט
המעבר בין גודל טקסט קבוע בנקודות עצירה ספציפיות הוא די מאתגר. גישה רספונסיבית יותר היא לתת לרוחב המכשיר של המשתמש להשפיע על גודל הטקסט.
היחידה vw
ב-CSS מייצגת רוחב של אזור תצוגה. חיבור גדלים של גופנים לרוחב אזור התצוגה יגרום לכך שהטקסט יגדל ויוקטן ביחס לרוחב הדפדפן. לכן קשה לחזות מה יהיה גודל הטקסט בכל רוחב ספציפי, אבל אתם יודעים שגודל הטקסט יתאים לרוחב הדפדפן של המשתמש.
חשוב לא להשתמש רק בקובץ vw
בהצהרה על גודל גופן.
html { font-size: 2.5vw; }
אם תעשו זאת, המשתמש לא יוכל לשנות את גודל הטקסט. ניתן יהיה לשנות את גודל הטקסט אם משלבים ביחידה יחסית – כמו em
, rem
או ch
. הפונקציה calc()
של CSS מושלמת לשם כך.
html { font-size: calc(0.75rem + 1.5vw); }
אפשר לדפדפן לבצע את החישובים. לכן קשה לחזות בדיוק מה יהיה גודל הטקסט בכל רוחב ספציפי, אבל אתם יודעים שגודל הטקסט יהיה בטווח הנכון. הדפדפן של המשתמש מחשב את החישובים המדויקים של גודל הטקסט.
אבל עכשיו יכול להיות שהטקסט יהיה קטן מדי במסכים צרים וגדול מדי במסכים רחבים.
הצמדת טקסט
סביר להניח שלא תרצו שהטקסט שלכם יצטמצם ויגדל למקומות קיצוניים. אתם יכולים לקבוע איפה ההתאמה תתחיל ותסתיים בעזרת פונקציית ה-CSS clamp()
. הפעולה הזו "תקבע" את ההתאמה לטווח מסוים.
הפונקציה clamp()
דומה לפונקציה calc()
אבל היא מקבלת שלושה ערכים. הערך האמצעי זהה לערך שמעבירים אל calc()
. ערך הפתיחה מציין את הגודל המינימלי. במקרה הזה, הערך לא יכול לחרוג מגודל הגופן המועדף על המשתמש. הערך הסוגר מציין את הגודל המקסימלי.
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
עכשיו גודל הטקסט מתכווץ וגדל באופן יחסי למסך של המשתמש, אבל הטקסט לעולם לא יקטן מ-1rem
או מ-2rem
.
אורך השורה
האינטרנט אינו מודפס, אבל אנחנו יכולים ללמוד לקחים מעולם הדפוס וליישם אותם באינטרנט.
בספרו הקלאסי The Elements of Typographic Style, רוברט ברינגהרסט היה אמור לומר על אורך השורה (או על המידה):
כל אורך בין 45 ל-75 תווים נחשב לאורך תקין כאורך תקין של שורה עבור עמוד שיש בו עמודה יחידה, בתוך תצוגת טקסט עם תגי עיצוב וגודל טקסט. השורה בת 66 התווים (הסופרת גם אותיות וגם רווחים) נחשבת לאידיאלית. לעבודה עם כמה עמודות, ממוצע טוב יותר הוא בין 40 ל-50 תווים.
לא ניתן להגדיר אורך שורה ישירות ב-CSS. אין נכס line-length
. אבל אפשר למנוע מטקסט להיות רחב מדי על ידי הגבלת רוחב המאגר. הנכס max-inline-size
מושלם לכך.
אין להגדיר את אורכי השורות באמצעות יחידה קבועה, כמו px
. המשתמשים יכולים להגדיל או להקטין את גודל הגופן שלהם ואורכי השורות אמורים להשתנות בהתאם. צריך להשתמש ביחידה יחסית, כמו rem
או ch
.
article { max-inline-size: 700px; }
article { max-inline-size: 66ch; }
שימוש ב-ch
יחידות לרוחב יגרום לגלישת שורות חדשות בתו ה-66 בגודל הגופן הזה.
גובה השורה
אף על פי שאין נכס line-length
ב-CSS, יש נכס line-height
.
שורות טקסט קצרות יכולות לכלול ערכי line-height
גדולים יותר. אבל אם משתמשים בערכים גדולים של line-height
לשורות טקסט ארוכות, קשה בעיני הקורא לעבור מהקצה של השורה הבאה לתחילת השורה הבאה.
article {
max-inline-size: 66ch;
line-height: 1.65;
}
blockquote {
max-inline-size: 45ch;
line-height: 2;
}
צריך להשתמש בערכים ללא יחידות בהצהרות line-height
. כך אפשר להבטיח שגובה השורה יהיה יחסי לערך font-size
.
line-height: 24px;
line-height: 1.5;
שילובים והיקף חשיפה
זכרו לתעדף את ההיררכיה במהלך הבנייה של ממשקי המשתמש, כדי לשפר את הבהירות ואת הזרימה של הדפים. דרך מצוינת לעשות זאת היא באמצעות סולם הטיפוגרפיה המובנה במערכת העיצוב שלכם.
גופני אינטרנט
גופן הוא כמו קול של המילים שלך. במשך התקופה הארוכה ביותר באינטרנט, היו מעט מאוד אפשרויות גופנים. גופני מערכת היו האפשרויות היחידות. אבל עכשיו אפשר לבחור בגופן אינטרנט שמתאים לסגנון של התוכן.
בעזרת @font-face
אפשר להנחות את הדפדפנים למצוא את קובצי ה-Web font שלך. משתמשים ב-woff2 כפורמט הגופן באינטרנט. הוא נתמך היטב ויש לו את הביצועים הטובים ביותר.
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
עם זאת, כל קובץ של גופן אינטרנט שתוסיפו יכול לפגוע בחוויית המשתמש, כי הוא מאריך את זמן הטעינה של הדף. חשוב לזכור שהעיצוב לא משפיע רק על המראה של הפיקסלים הסופיים. מהירות הטעינה של הפיקסלים האלה היא חלק קריטי בחוויית המשתמש. חוויית משתמש מהירה היא חוויית משתמש טובה.
הגופן בטעינה
אפשר לבקש שדפדפנים יתחילו להוריד קובץ גופן בהקדם האפשרי. צריך להוסיף רכיב link
ל-head
של המסמך שמפנה לקובץ הגופן באינטרנט. מאפיין rel
עם הערך preload
מורה לדפדפן לתעדף את הקובץ. מאפיין as
עם הערך font
מציין לדפדפן איזה סוג קובץ מדובר, ובעזרת המאפיין type
אפשר לספק מידע עוד יותר ספציפי.
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
עליך לכלול את המאפיין crossorigin
גם אם אתם מארחים את קובצי הגופנים בעצמכם.
מאפיין ה-CSS font-display
מאפשר לדפדפן לנהל את המעבר מגופן מערכת לגופן אינטרנט. עד שגופן האינטרנט ייטען, אפשר לבחור שלא להציג טקסט בכלל. תוכל לבחור להציג את גופן המערכת באופן מיידי, ולאחר מכן לעבור לגופן האינטרנט לאחר טעינתו. לשתי השיטות יש חסרונות. אם מחכים עד להורדת גופן האינטרנט לפני שמציגים טקסט כלשהו, המשתמשים עלולים למצוא את עצמם בוהים בדף ריק למשך זמן רב באופן מתסכל. אם תציגו קודם את הטקסט בגופן מערכת ולאחר מכן תעבור לגופן האינטרנט, ייתכן שהמשתמשים יחוו תזוזה צורמת של תוכן בדף.
פשרה טובה היא להמתין זמן מה לפני הצגת טקסט כלשהו. אם גופן האינטרנט ייטען לפני שהזמן יסתיים, הטקסט יוצג באמצעות גופן האינטרנט ללא תנודות בתוכן. אם גופן האינטרנט עדיין לא נטען לאחר סיום הזמן, הטקסט יוצג באמצעות גופן המערכת כך שלפחות המשתמש יוכל לקרוא את התוכן.
יש להשתמש בערך font-display
של swap
אם עדיין רוצים שגופן האינטרנט יחליף את גופן המערכת בכל פעם שגופן האינטרנט נטען.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
יש להשתמש בערך font-display
של fallback
אם רוצים להמשיך עם גופן המערכת לאחר עיבוד הטקסט.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
גופנים משתנים
אם משתמשים בהרבה משקולות או סגנונות שונים באותו גופן, ייתכן שבסופו של דבר תשתמשו בקובצי גופנים נפרדים - קובץ גופן נפרד לכל משקל או סגנון.
גופנים משתנים פותרים את הבעיה הזו באמצעות קובץ אחד. במקום להשתמש בקבצים נפרדים לרגילים, למודגשים, למודגשים במיוחד וכן הלאה, קובץ בגופן משתנה הוא רספונסיבי. הוא מכיל את כל המידע הדרוש כדי להציג אותו במגוון רחב של משקולות או סגנונות.
פירוש הדבר הוא שקובץ גופן עם משתנים אחד גדול יותר מקובץ גופן רגיל אחד, אבל סביר להניח שקובץ גופן עם משתנים אחד יהיה קטן יותר ממספר קבצים של גופנים רגילים. אם משתמשים בהרבה משקלים, גופן משתנה יכול לשפר את הביצועים בצורה משמעותית.
טיפוגרפיה טובה באינטרנט אינה קשורה רק לסוג הבחירות שאתם מקבלים כמעצבים. טיפוגרפיה רספונסיבית מאפשרת גם לכבד את המכשיר ואת חיבור הרשת של המשתמש. התוצאה הסופית היא עיצוב שנראה נכון ללא קשר לאופן שבו מציגים אותו.
אחרי שהבנתם את הטקסט הרספונסיבי, הגיע הזמן להתעמק בתמונות רספונסיביות.
בדיקת ההבנה
בדיקת הידע שלכם בטיפוגרפיה
צריך להוסיף סגנונות כדי שהטקסט יגלש בתוך אזור התצוגה.
clamp()
שימושי לטיפוגרפיה גמישה כי
calc()
clamp()
לטיפוגרפיה.clamp()
לטיפוגרפיה.איזה סוג של ערכי line-height
הומלץ במדריך הזה?
24px
line-height
.2rem
1.5
2vw
line-height
, עלולות להיות בעייתיות.מה עושה font-display
?
block
או לinline-block
.