CSS

טקסט וגופנים

משפחת גופנים (font-family)

גופנים כלליים (Generic)

p {
    font-family: serif;        /* עם סריפים (זנבות) */
    font-family: sans-serif;   /* בלי סריפים */
    font-family: monospace;    /* רוחב קבוע */
    font-family: cursive;      /* כתב יד */
    font-family: fantasy;      /* דקורטיבי */
}

Font Stack (רשימת גופנים)

body {
    /* הדפדפן ינסה לפי הסדר */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* לעברית */
    font-family: "Heebo", "Rubik", Arial, sans-serif;
}

💡 תמיד סיימו עם גופן כללי כגיבוי!

Google Fonts

<!-- בתוך ה-head -->
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap" rel="stylesheet">

body {
    font-family: 'Heebo', sans-serif;
}

גודל גופן (font-size)

p {
    font-size: 16px;     /* פיקסלים */
    font-size: 1em;      /* יחסי להורה */
    font-size: 1rem;     /* יחסי ל-root */
    font-size: 100%;     /* אחוזים */
    font-size: larger;   /* מילות מפתח */
}

יחידות מומלצות

html {
    font-size: 16px; /* בסיס */
}

h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.5rem; }  /* 24px */
p { font-size: 1rem; }     /* 16px */
small { font-size: 0.875rem; } /* 14px */

עובי גופן (font-weight)

p {
    font-weight: normal;   /* 400 */
    font-weight: bold;     /* 700 */
    font-weight: lighter;
    font-weight: bolder;

    /* ערכים מספריים */
    font-weight: 100; /* Thin */
    font-weight: 300; /* Light */
    font-weight: 400; /* Regular */
    font-weight: 500; /* Medium */
    font-weight: 600; /* Semi-Bold */
    font-weight: 700; /* Bold */
    font-weight: 900; /* Black */
}

סגנון גופן (font-style)

p {
    font-style: normal;
    font-style: italic;   /* נטוי */
    font-style: oblique;  /* משופע */
}

צבע טקסט (color)

p {
    color: black;
    color: #333333;
    color: rgb(51, 51, 51);
    color: hsl(0, 0%, 20%);
}

יישור טקסט (text-align)

p {
    text-align: left;      /* ברירת מחדל ב-LTR */
    text-align: right;     /* ברירת מחדל ב-RTL */
    text-align: center;    /* מרכז */
    text-align: justify;   /* מיושר לשני הצדדים */
}

💡 לעברית: השתמשו ב-text-align: start ו-text-align: end במקום left/right

גובה שורה (line-height)

p {
    line-height: normal;
    line-height: 1.5;      /* ללא יחידה - מומלץ! */
    line-height: 150%;
    line-height: 24px;
}

💡 המלצה: line-height: 1.5 עד 1.7 לקריאות טובה

רווח אותיות ומילים

p {
    /* רווח בין אותיות */
    letter-spacing: 1px;
    letter-spacing: 0.1em;
    letter-spacing: -0.5px; /* קרוב יותר */

    /* רווח בין מילים */
    word-spacing: 5px;
}

קישוט טקסט (text-decoration)

a {
    text-decoration: none;         /* ללא */
    text-decoration: underline;    /* קו תחתון */
    text-decoration: overline;     /* קו עליון */
    text-decoration: line-through; /* קו חוצה */
}

/* סגנון מתקדם */
a {
    text-decoration: underline wavy red;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

טרנספורמציית טקסט (text-transform)

p {
    text-transform: none;
    text-transform: uppercase;    /* אותיות גדולות */
    text-transform: lowercase;    /* אותיות קטנות */
    text-transform: capitalize;   /* אות ראשונה גדולה */
}

הזחת טקסט (text-indent)

p {
    text-indent: 40px;    /* הזחה של השורה הראשונה */
    text-indent: 2em;
}

צל טקסט (text-shadow)

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* מספר צללים */
    text-shadow: 
        1px 1px 0 white,
        2px 2px 0 gray;
}

גלישת טקסט

word-break

p {
    word-break: normal;
    word-break: break-all;  /* שובר מילים בכל מקום */
    word-break: keep-all;   /* לא שובר מילים */
}

overflow-wrap

p {
    overflow-wrap: normal;
    overflow-wrap: break-word; /* שובר מילים ארוכות */
}

white-space

p {
    white-space: normal;     /* ברירת מחדל */
    white-space: nowrap;     /* שורה אחת */
    white-space: pre;        /* שומר רווחים */
    white-space: pre-wrap;   /* שומר רווחים + גולש */
}

text-overflow

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... בסוף */
}

קיצור font

p {
    /* style weight size/line-height family */
    font: italic bold 16px/1.5 Arial, sans-serif;

    /* או */
    font: 700 1rem/1.6 "Heebo", sans-serif;
}

⚠️ חובה לכלול font-size ו-font-family!

דוגמה מעשית

/* טיפוגרפיה בסיסית */
body {
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1em;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    color: #666;
}

סיכום

הבא: מודל הקופסה ➡️