מה גודל הפונט המומלץ לאתר?

אם אתם מחפשים תשובה מהירה, לטקסט רגיל באתר 16–18px הוא בדרך כלל מקום טוב להתחיל ממנו. בכותרות אין מספר אחד נכון, אבל H1 במחשב יכול להתחיל באזור 40–64px, כותרת H2 באזור 28–40px וטקסטים קטנים יותר באזור 14–16px.

אבל אלה רק נקודות התחלה.

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

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

אז מה גודל הפונט המומלץ לטקסט רגיל?

ברוב האתרים אנחנו מתחילים באזור של 16–18px לטקסט רץ.

‏16px הוא בסיס טוב לאתר עם טקסט יחסית צפוף, ממשק או עמוד שבו רוצים להציג הרבה מידע. 17–18px יכול לעבוד טוב יותר בבלוגים, אתרי תדמית ועמודים שבהם רוצים שהקריאה תרגיש יותר רגועה.

אין סיבה לפחד גם מטקסט גדול יותר. אם רוב העמוד מורכב מכמה משפטים קצרים ולא מפסקאות ארוכות, 18–20px יכול להיראות מצוין.

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

‏16px הוא לא חוק

הרבה מדריכים באינטרנט מציגים 16px כמעט כאילו מדובר בחוק של עיצוב אתרים. זה לא.

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

יותר חשוב לשאול אם הטקסט נוח לקריאה בתוך האתר הספציפי.

פונט עם אותיות רחבות וכבדות יכול להרגיש גדול מאוד ב-16px. פונט אחר באותו גודל יכול להרגיש קטן ועדין יותר. אפילו שינוי במשקל מ-400 ל-500 יכול לשנות את התחושה בלי לגעת בכלל בגודל.

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

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

איזה גודל כדאי לתת לכותרות?

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

נקודת התחלה שאנחנו יכולים לעבוד ממנה במחשב היא:

המספרים האלה לא אומרים שכותרת H1 חייבת להיות 64px. באתר מינימליסטי עם מעט מאוד טקסט היא יכולה להיות 80px או 100px. באתר עם הרבה מידע, 40–48px יכול להספיק לגמרי.

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

במובייל לא חייבים להקטין הכול

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

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

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

מה שכן בדרך כלל משתנה הן הכותרות הגדולות.

‏H1 של 72px שיכול להיראות מעולה במסך רחב עלול לשבור כמעט כל מילה לשורה חדשה בטלפון. במקרה כזה אפשר לרדת, למשל, לאזור 36–48px ולשמור על אותו אופי בלי להרוס את המבנה.

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

גודל הפונט הוא רק חצי מהסיפור

אפשר לבחור 18px ועדיין לקבל פסקה שלא נעים לקרוא.

אחד הדברים שמשפיעים הכי הרבה הוא גובה השורה.

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

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

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

אותו 16px לא נראה אותו דבר בכל פונט

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

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

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

‏Open Sans, למשל, יכול להיראות יחסית רגיל בהגדרות מסוימות, אבל אחרי שמשנים רוחב, משקל וגובה שורה הוא מקבל אופי שונה לגמרי.

המספר נשאר אותו מספר. מה שהעין רואה משתנה.

ומה לגבי כפתורים, תפריטים וטקסט קטן?

לא כל טקסט באתר צריך להיות 16–18px.

בתפריט ניווט, כפתורים, קטגוריות או מידע משני אפשר לפעמים להשתמש ב-14–16px. בטקסט מאוד משני כמו תאריך, קרדיט או metadata אפשר גם להגיע לאזור 12–14px.

אבל צריך להבין למה הטקסט קטן.

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

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

אל תשכחו שאנשים יכולים להגדיל את האתר

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

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

לכן כדאי לבדוק אתר גם ב-Zoom גבוה ולא רק בגודל שבו עיצבתם אותו.

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

איך אנחנו בודקים אם גודל הפונט באמת נכון?

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

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

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

אחרי זה מסתכלים על ההיררכיה. בלי לקרוא מילה, האם ברור מה הכותרת הראשית, מה כותרת משנה ומה הטקסט?

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

אז באיזה גודל כדאי להתחיל?

אם אתם רוצים נקודת התחלה פשוטה, אפשר להתחיל כך:

‏16–18px לטקסט רגיל.

‏14–16px לכפתורים, ניווט וטקסטים קצרים.

‏20–28px ל-H3.

‏28–40px ל-H2.

‏40–64px ל-H1 במחשב, ולרוב פחות במובייל.

משם תפסיקו להסתכל על המספר ותתחילו להסתכל על האתר.

הפונט שבחרתם, כמות הטקסט, רוחב העמוד והאופי של המותג חשובים יותר מהשאלה אם הכותרת היא 48px או 52px.

שאלות נפוצות על גודל פונט באתר

האם 16px הוא הגודל המינימלי לאתר?

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

מה גודל הפונט המומלץ במובייל?

לטקסט רגיל, גם במובייל 16–18px הוא מקום טוב להתחיל ממנו. לא חייבים להקטין את הטקסט רק בגלל שהמסך קטן. בדרך כלל הכותרות הגדולות הן אלה שדורשות התאמה משמעותית יותר.

מה הגודל המומלץ לכותרת H1?

באתר רגיל אפשר להתחיל באזור 40–64px במחשב. בעיצוב עם כותרת Hero גדולה אפשר להגיע גם ל-80px, 96px או יותר. במובייל לרוב נרצה להקטין אותה כדי שהמילים לא יישברו בצורה לא נעימה.

האם כדאי להשתמש ב-px או ב-rem?

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

מה יותר חשוב, הפונט או הגודל שלו?

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

אין מספר קסם

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

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

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

ב-atar studio אנחנו מעצבים ובונים אתרים שבהם הטיפוגרפיה היא חלק מהשפה של המותג ולא משהו שבוחרים בסוף מתוך רשימת גדלים.