עיצוב גופן - שינוי משפחה, הטייה, קביעת משקל וגודל

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

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

להלן משפחות הגופנים:

1. גופני Serif - גופנים אלו כוללים קווים בפינות האותיות. דוגמה: Times New Roman.

2. גופני Sans-Serif - גופנים בעיצוב נקי, ללא קווים מיותרים, אשר נהוג לעשות בהם שימוש במאמרים לקריאה (בשל קריאותם הנעימה לעין). דוגמה: Arial.

3. גופני Monospace - גופנים בעיצוב עם רוחב אחיד, המשווה להם מראה ממוחשב. דוגמה: Courier New.

4. גופני Cursive - גופנים בעיצוב דמוי כתב-יד. דוגמה: Brush Script MT.

5. גופני Fantasy - גופנים בעיצוב מיוחד, אשר משמשים בד"כ להודעות מיתוג שונות (פחות לקריאה שוטפת). דוגמה: Papyrus.

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

דוגמה:

p {
	font-family: Heebo, Arial, sans-serif;
}

בדוגמה זה, הכתב בפיסקאות (תגית p) יהיה בגופן Heebo. אם גופן Heebo אינו זמין, הכתב יהיה בגופן Arial שהוא גופן מערכת. אם גם גופן זה אינו זמין מסיבה כלשהי, הכתב יהיה בגופן הבסיסי sans-serif.

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

דוגמה:

h1 {
	font-family: "Lucida Console", monospace;
}

הטיית גופן

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

ניתן להפוך את התצוגה של הגופן לנטוי באמצעות התכונה font-style. התכונה יכולה לקבל את הערכים הבאים:

• normal - גופן רגיל ולא מוטה (ברירת המחדל)
• italic - גופן מוטה
• oblique - גופן "נשען" (מוטה במעט)

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

דוגמה:

.brand {
	font-style:italic;
}

קביעת משקל גופן

משקל הגופן הוא למעשה העובי שלו. ניתן לקבוע את משקלו של הגופן באמצעות התכונה font-weight.

התכונה מקבלת ערך מספרי שנע בין 1 ל-1000. ככל שהמספר גבוה יותר, כך הגופן עבה יותר. לא תמיד כל מנעד המספרים נתמך (תלוי בסוג הגופן ובדפדפן), כאשר יש מצבים שערכים קרובים (נניח 460 ו-480) יקנו עובי דומה לגופן. הרבה פעמים המשקלים הנתמכים הם רק 4 אפשריים: 100 (דק מאוד), 400 (עובי רגיל), 700 (עבה), 900 (עבה במיוחד). במצבים מסויימים רק 2 אפשרויות פעילות: 400 (עובי רגיל) ו-700 (עבה). יש דפדפנים שתומכים רק בערכים שהם כפולות של מאה, כלומר, הערכים 100, 200, 300, וכן הלאה. הכל, כאמור, כתלות בסוג הגופן וסוג הדפדפן שאיתו עובדים.

דוגמה:

.name {
	font-weight:500;
}

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

נהוג להחליף את הערך 400 בערך normal ואת הערך 700 בערך bold.

דוגמה:

.p1 {
	font-weight:bold;
}

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

קביעת גודל גופן

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

דוגמה:

.big_font {
	font-size:3cm;
}

.small_font {
	font-size:12px;
}