טיפוגרפיה רספונסיבית וגמישה עם תכונות CSS של Baseline

Miriam Suzanne

תאריך פרסום: 16 בדצמבר 2025

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

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

  • הגדרת העדפה שמוגדרת כברירת מחדל font-size בכל האתרים.
  • הגדלה או הקטנה של התצוגה באתרים ספציפיים.

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

ניהול משא ומתן על font-size בסיסי על סמך העדפות המשתמשים

השלב הראשון בהגדרת טיפוגרפיה באינטרנט הוא להגדיר גודל גופן ראשוני על סמך font-sizeההעדפה של המשתמש. הגודל הזה ישמש לרוב הטקסט בדף, ויהיה הבסיס לגדלים אחרים של גופנים, כמו כותרות. האפשרות הכי פשוטה היא לתת למשתמש שליטה מלאה באמצעות 1em, בלי לבצע שינויים. אם לא מגדירים ערך אחר ל-font-size, הערך 1em מתייחס להעדפת המשתמש. בצד השני של הספקטרום, הגדרה של font-size בפיקסלים או ביחידות מוחלטות אחרות (ואפילו ביחידות יחסיות לאזור התצוגה) תבטל לחלוטין את ההגדרה של המשתמש, ולכן מומלץ להימנע מכך.

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

אפשרות ראשונה: חישוב מקדם המרה על סמך הנחות

פתרון נפוץ הוא להגדיר font-size מותאם ביחידות של em או %, ביחס לfont-size ברירת המחדל של המשתמש. בדרך כלל, הגישה הזו מתחילה בהנחה שהדפדפנים מספקים 16px ברירת מחדל, ורוב המשתמשים ישאירו את ברירת המחדל הזו. אם אתם חושבים שגודל גופן של 20px יתאים יותר לאתר שלכם, אז בדרך כלל ערך של font-size עם 1.25em או 125% ייתן את התוצאה הרצויה:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

אפשר גם להשתמש בפונקציה calc() כדי להציג את החישוב, אבל עדיין צריך לדעת מהי המשוואה – גודל היעד חלקי הגודל הצפוי, כפול 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

למשתמשים עם העדפה גבוהה או נמוכה יותר תהיה יכולת מסוימת להשפיע על התוצאה, כי ברירת המחדל שלכם היא עכשיו יחסית להעדפה שלהם – פי 1.25 מההעדפה שלהם במקרה הזה. אבל יכול להיות מצב מוזר שבו גם אתם וגם המשתמש מבקשים את ברירות המחדל של 20px, והתוצאה היא 25px – ברירות המחדל המותאמות כפול 1.25 שוב – גודל שאף אחד לא ביקש.

אפשרות שנייה: שימוש ב-clamp()

גישה מורכבת יותר כוללת פונקציות השוואה של CSS, בלי מתמטיקה! במקום להניח ש-1em שווה ל-16px ולבצע המרות לא מהימנות מ-px ל-em, אפשר לחשוב על 1em כמשתנה שמפנה להעדפת המשתמש. לא משנה מה הערך של הפיקסל 1em, ערך של font-size ב-max(1em, 20px) תמיד יחזיר את הערך הגדול יותר מבין העדפת העיצוב (20px) והעדפת המשתמש (1em). כך המשתמש יכול לבחור גודל גופן גדול יותר, אבל לא קטן יותר.

אם תעברו לפונקציה clamp(), תוכלו לאפשר למשתמש לשנות את הגודל בשני הכיוונים, אם הגודל המועדף שלו רחוק מדי מהגודל שמוגדר כברירת מחדל. לדוגמה, אם מגדירים font-size של clamp(1em, 20px, 1.25em), ברירת המחדל תהיה 20px, כל עוד הערך הזה גדול יותר מברירת המחדל של המשתמש, אבל לא גדול יותר מ-125% מברירת המחדל שלו.

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

אם מגדירים את המאפיין הזה כמאפיין הבסיס font-size ברכיב html, אפשר להפנות אל 1rem בכל מקום באתר, כגודל הבסיס שנקבע.

הוספת רספונסיביות

כדי שהרכיב font-size יגיב לרוחב אזור התצוגה, אפשר להוסיף נקודות עצירה של שאילתת מדיה (או שאילתת קונטיינר). לדוגמה, אפשר לשנות את הערך המוגבל בהתאם לגודל המסך:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

אפשרות נוספת היא להוסיף יחידות של אזור תצוגה או מאגר ליחידת הבסיס הסטטית:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

היחידות vw (רוחב אזור התצוגה) או vi (גודל אזור התצוגה בשורה) מייצגות 1% מאזור התצוגה הכולל – החלק בדפדפן שבו האתר מוצג. באופן דומה, היחידות cqw ו-cqi מייצגות 1% מקונטיינר בגודל מוטבע בדף. פרטים נוספים זמינים בהדגמה של יחידות ותנאים של קונטיינרים.

הגישה הזו נקראת לעיתים קרובות טיפוגרפיה דינמית, כי השינוי ב-font-size קבוע בטווח של רוחבי אזור התצוגה, ולא קופץ מערך אחד לערך אחר בנקודות עצירה של מדיה או של מאגר. עם זאת, אל תתבלבלו מהמעבר החלק – ההבדל הזה בדרך כלל נראה רק בבדיקות, אם משנים את גודל החלון בצורה חלקה. ההשפעה הזו נדירה (אם בכלל) בקרב המשתמשים. יכול להיות שהמשתמשים ישנו באופן קבוע את גודל הדפדפן או את רמת הזום, אבל כדי להבחין בהבדל בין נקודת עצירה לבין יחידת שדה תצוגה, הם יצטרכו לבצע את ההתאמות האלה בצורה איטית וחלקה. הוא משפיע רק על המעבר, ולא על התוצאה אחרי שינוי הגודל.

היתרון העיקרי של שינוי גודל הגופן באופן דינמי הוא שאין צורך לחשב או לציין נקודות עצירה באופן ידני, והתוצאה היא אינטרפולציה בכל גודל נתון. מגדירים רק את נקודת ההתחלה (16px) ואת קצב השינוי (0.25vw יספק עלייה של 0.25px ב-font-size לכל עלייה של 100px באזור התצוגה), ואולי גם ערכי מינימום ומקסימום. כשהרוחב של אזור התצוגה הוא 1000px, הרוחב של font-size יהיה 16px + 2.5px או 18.5px – אבל החישוב הזה מתבצע כולו בדפדפן. זו הגישה שבה השתמשנו בהדגמה, באמצעות יחידות cqi כדי להציג רספונסיביות מבוססת-קונטיינר. כשמשתמשים ביחידות cqi ברכיב הבסיס (html), שבו לא מוגדר קונטיינר, הן עדיין מתייחסות לגודל אזור התצוגה.

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

אזהרה: שינויים באזור התצוגה לא תמיד אומרים את אותו הדבר!

שאילתות מדיה ויחידות vi מוחלות בדרכים שונות, אבל שתי הגישות מבוססות על אותה מדידה של אזור התצוגה. אם רוחב אזור התצוגה הוא 600px, אז 100vw יהיה שווה ל-600px, והסגנונות בתוך שאילתת המדיה (width > 500px) יחולו.

אבל מה זה אומר שאזור התצוגה הוא 600px רחב? בפועל, פיקסל הוא לא גודל קבוע עם משמעות אחת בכל המצבים. אמנם הגיוני שחלון תצוגה עם פחות פיקסלים לרוחב יהיה במסך קטן יותר (כמו טלפון) או בחלון דפדפן צר, אבל זו לא הנחה שאפשר להסתמך עליה. למעשה, הגדלת התצוגה והקטנת חלון הדפדפן ישפיעו באותו אופן על רוחב אזור התצוגה שנמדד. פעולה אחת (שינוי גודל התצוגה) משנה את הגודל של פיקסל, והפעולה השנייה (שינוי הגודל) משנה את הגודל של הדפדפן עצמו – אבל שתי הפעולות משנות את מספר הפיקסלים לרוחב הדפדפן. מה שמקבלים ממדידת אזור התצוגה הוא היחס בין גודל הפיקסלים הנוכחי לבין חלון הדפדפן הנוכחי.

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

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

שינוי הערך של היחידה שקשורה לאזור התצוגה ל-1vw או ל-100vw ישנה את הקשר המדויק בין גודל הגופן לאזור התצוגה. גופן 1vw יגדל ב-1px לכל 100px של גודל אזור התצוגה, בעוד שגופן 100vw יהיה בדיוק באותו גודל כמו אזור התצוגה. אתם יכולים לשנות את הערך הזה כדי שהגופן יגדל לאט יותר או מהר יותר ביחס לדפדפן. אבל כל ערך יחסי של אזור התצוגה יישאר קבוע כשהמשתמש יגדיל או יקטין את התצוגה – הוא לא יגיב בכלל לפקדים של המשתמש.

באופן דומה, אף אחד מהחשבונות 1vw או 100vw לא מוגדר כברירת המחדל של המשתמש font-size.

שימוש ביחידות שקשורות לאזור התצוגה או למאגר התגים בלבד עבור font-size תמיד פוגע בחוויית המשתמש. כש-font-size מגיב באופן מלא לקונטיינר שלו, הוא לא יכול להגיב גם לברירות מחדל או להתאמות של המשתמש. גם אם הכוונות טובות והאמצעים להגנה על המשתמשים הם הטובים ביותר, כדאי להימנע מביטול השליטה הסופית של המשתמשים.font-size זה לא רק פוגע בחוויית המשתמש, אלא גם עלול להפר את הנחיות הנגישות, שלעתים קרובות נדרשות על פי חוק. באופן ספציפי, בסעיף 1.4.4 של הנחיות הנגישות לתוכן באינטרנט נדרש ש "ניתן לשנות את גודל הטקסט ללא טכנולוגיה מסייעת עד ל-200 אחוזים".

איך מוודאים שהערכים של font-size משתנים בהתאם לזום

כדי להבטיח ש-font-size יגיב לשינוי גודל התצוגה, צריך להחיל את הערך שקשור לאזור התצוגה כהתאמה לערך אחר. אפשר לעשות את זה ב-CSS באמצעות הפונקציה calc() או כל פונקציה מתמטית אחרת שמקבלת חישובים – כמו min(),‏ max() ו-clamp(). font-size של calc(16px + 1vw) מבוסס על גודל אזור התצוגה וגם על הגודל הנוכחי (ביחס לזום) של פיקסל. היחידה vw לא תושפע מהזום, אבל ערך הבסיס כן.

התוצאה היא font-size שמשתנה בהתאם לגודל אזור התצוגה ולהגדרות הזום של המשתמש. אם המשתמש יבצע זום לרמה 200%, ערך הבסיס יוצג בגודל כפול (32px), ואילו הערך הרספונסיבי יישאר ללא שינוי. 1000px אזור תצוגה ייתן לכם בהתחלה font-size של 16px + 10px = 26px, אבל בהגדלה של 200%, גודל הגופן יגדל רק ל-42px, קצת יותר מ-160%. יכול להיות שזו לא נראית בעיה חמורה, אבל ככל שערך font-size מבוסס יותר על אזור התצוגה, כך הזום פחות יעיל.

במסכים קטנים, הערך של font-size יתבסס בעיקר על ערך הפיקסל הבסיסי, והתגובה שלו לשינוי גודל תהיה טובה. אבל במסכים גדולים יותר, גודל אזור התצוגה הופך לחלק גדול יותר מגודל הגופן שעבר רינדור, ולכן הזום פחות יעיל. הבעיה הזו הופכת למסוכנת במיוחד כשמגיעים לנקודה שבה הגדלה של 500% (ההגדלה המקסימלית ברוב הדפדפנים) כבר לא מספקת את העלייה של 200% בגודל הגופן שנדרשת לפי WCAG 1.4.4 – אבל גם לפני הנקודה הזו, יכול להיות מתסכל לגלות שההגדלה כבר לא יעילה.

תרשים שמציג את גודל הגופן ואת יעילות הזום לעומת רוחב אזור התצוגה. גודל הגופן, שמחושב כ-calc(17px + 2.5vw), גדל באופן לינארי עם רוחב אזור התצוגה. הקו של זום ב-500%, שמייצג את הזום המקסימלי האפשרי, מראה שהזום הופך לפחות יעיל ככל שרוחב אזור התצוגה גדל, ולא מספק הגדלה של גודל הגופן ב-200% מעבר לרוחב אזור תצוגה של 2,040 פיקסלים.
הציר האופקי מייצג את גודל אזור התצוגה, מרוחב של 0 עד 2600px. הציר האנכי של font-size מוצג גם הוא בפיקסלים, ומציג את התוצאה של calc(17px + 2.5vw). קו הזום 500% משתמש באותו ציר אופקי של רוחב אזור התצוגה, אבל הציר האנכי מוגדר כאחוז.

בקצה הימני של התרשים (0 רוחב אזור התצוגה), 500% הזום אפקטיבי לחלוטין. עם זאת, היעילות הזו יורדת במהירות ככל שגודל הדפדפן גדל, ויחידות של אזור תצוגה (שאי אפשר לשנות את גודלן) הופכות לגורם משמעותי יותר ב-font-size. כשהרוחב של הדפדפן הוא 2040px, הזום המקסימלי של 500% מאפשר להגדיל את גודל הגופן רק ב-200%. מעבר לנקודה הזו, אי אפשר יותר להשתמש ב200% הגדלה של גופן.

אם מעבירים את החישוב הזה לפונקציה clamp(), עם ערכי מינימום ומקסימום, אפשר להגדיר גבולות שיבטיחו שהטקסט יהיה ניתן להגדלה. לפי Maxwell Barvian:

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

מאחר שהשאילתות @media ו-@container מבוססות על אותם מדדים כמו היחידות vw ו-cqw, אותה לוגיקה חלה כשמשתמשים בנקודת עצירה כדי לשנות את גודל הגופן. אם ההגדלה גדולה מדי, הזום לא יעיל. אפשר לראות איך הערכים האלה משפיעים אחד על השני בתרשים הבא:

איך מוודאים שהערכים של font-size מגיבים לברירות המחדל של המשתמש

אבל calc(16px + 1vw) עדיין לא מגיב להגדרות ברירת המחדל של הגופן של המשתמש. כדי לעשות את זה, אפשר להגדיר בסיס – או ערכי מינימום ומקסימום – באמצעות יחידות em או rem במקום px. כשמשלבים את כל המידע, מקבלים תוצאה מוכרת שתואמת להדגמה המקושרת:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

חשוב לדעת:

  • היחידות המינימליות והמקסימליות הן em, והן מבוססות על העדפות המשתמש (ומגיבות לשינוי גודל התצוגה).
  • הערך הנוסף vw נשמר ברמה מינימלית, כדי שהזום לא יושפע יותר מדי.
  • הגודל המקסימלי (1.125em) קטן בהרבה מפי 2.5 מהגודל המינימלי (1em), ולכן תמיד אפשר להגדיר ערך אפקטיבי של font-size שהוא 200%.

סולמות טיפוגרפיים עם pow()

ברוב העיצובים משתמשים ביותר מגודל גופן אחד. סולם טיפוגרפי מתאר את הקשר בין כמה גדלים של גופנים. אפשר להגדיר גודל בסיסי וסדרה של מכפילים כדי לחשב את הגדלים האחרים. ב-CSS יש סולם טיפוגרפי מובנה ביחס למילת המפתח medium, שמתייחסת להעדפת גודל הגופן של המשתמש, או לערך ברירת המחדל 16px. הסולם המלא של מילות המפתח הוא:

  • xx-small: 3/5 (0.6)
  • ‫x-small: 3/4 (0.75)
  • small: 8/9 (0.89)
  • ‫medium: 1 (הגודל הבסיסי שכל שאר הגדלים מוכפלים בו)
  • ‫large: 6/5 (1.2)
  • ‫x-large: 3/2 (1.5)
  • xx-large: 2/1 (2)
  • xxx-large: 3/1 (3)

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

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

אבל לא צריך כלים חיצוניים כדי ליצור סולם משלכם ב-CSS – הפונקציה החדשה pow() יכולה ליצור את הסולם בשבילכם – עם 1rem כגודל הבסיס שלכם!

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

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

פונקציות ו-mixins של CSS מאפשרים לצמצם את הלוגיקה הזו עוד יותר, בעוד שכלים מובנים אחרים כמו progress() מקלים על יצירת סולמות שמשתנים בצורה חלקה מערך אחד לערך אחר. אבל התכונות האלה לא נכללות בהדגמה הזו.

תגובה לגודל של מאגרי תגים בדף

כדי לבצע את כל החישובים האלה באמצעות שאילתות של רכיבי container, אפשר להשתמש ביחידה cqi במקום vw או vi. עם זאת, כדאי גם להשאיר את font-size של המשתמש במקומו ברכיב html, כדי שכל רכיב container להגדרת סוג הגופן יוכל להפנות בחזרה להעדפת המשתמש הזו בתור 1rem. בהדגמה, תראו שסולם הסוגים כולו מוחל על body ולא על רכיב הבסיס html עבור סוג גלובלי, ואז מתאפס על סמך גודל הקונטיינר לכל רכיב עם המאפיין type-set.

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

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