What are Fonts in CSS

Html to Hero -
0

What are Fonts in CSS

Fonts in CSS control how text appears on a webpage. The right font can improve readability, convey mood, and enhance branding. CSS allows you to specify font families, sizes, styles, and fallback options, ensuring that text remains consistent across different browsers and devices.

1. What are Fonts in CSS?
Fonts define the typeface used for text content. CSS provides several properties to customize how text looks by specifying different font families, weights, and sizes.

2. Font Properties in CSS
PropertyDescriptionExample
font-familyDefines the typeface (Arial, Times New Roman, etc.).font-family: Arial, sans-serif;
font-sizeControls the size of the text.font-size: 16px;
font-styleSets the style (normal, italic, oblique).font-style: italic;
font-weightAdjusts the thickness (bold, lighter, etc.).font-weight: 700;
line-heightModifies the height between lines of text.line-height: 1.5;
letter-spacingIncreases or decreases space between letters.letter-spacing: 2px;
text-transformChanges the case (uppercase, lowercase, capitalize).text-transform: uppercase;
text-alignAligns text (left, center, right, justify).text-align: center;
font-variantDisplays text in small caps or normal.font-variant: small-caps;

3. Font-Family (Primary and Fallback Fonts)
The font-family property defines one or more fonts to apply to an element..
Syntax:
selector {
        font-family: "Arial", "Helvetica", sans-serif;
    }
  • Primary Font: "Arial" – Used first if available.
  • Fallback Font: "Helvetica" – Used if Arial isn't available.
  • Generic Family: sans-serif – A system default sans-serif font if neither specified font is available.
4. Web-Safe Fonts
Web-safe fonts are available on most devices and operating systems.

Examples of Web-Safe Fonts:

  • Sans-serif: Arial, Verdana, Helvetica.
  • Serif: Times New Roman, Georgia.
  • Monospace: Courier New, Consolas.
  • Cursive/Script: Brush Script MT.
Example:
p {
        font-family: "Georgia", "Times New Roman", serif;
    }

5. Font Fallbacks
Font fallbacks ensure that text displays even if the preferred font isn't available. Always add a generic family (sans-serif, serif, monospace) at the end.
Example:
body {
        font-family: "Roboto", "Arial", sans-serif; 
    }
  • If "Roboto" isn't available, "Arial" is used.
  • If neither is available, a generic sans-serif font is chosen by the browser.
6. Font Size
The font-size property determines the text size.

Units for Font Size:

  • Absolute: px (pixels), pt (points).
  • Relative: em (relative to parent), rem (relative to root), %.
  • Responsive: vw (viewport width), vh (viewport height).
Example:
h1 {
     font-size: 3rem; /* 3 times the root size */
  }
p {
   font-size: 16px;
 }

7. Font Style (Italic, Oblique, Normal)
The font-style property specifies whether text is italicized.
Example:
em {
        font-style: italic;
    }

8. Google Fonts (Importing and Using)
Google Fonts offer a wide range of free fonts that can be easily embedded.
1. Import Google Font (HTML):
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

2. Apply Font (CSS):
body {
        font-family: "Poppins", sans-serif;
    }

9. Font Pairing (Combining Fonts for Aesthetics)
Font pairing involves selecting two or more complementary fonts for headings and body text.
Example (Heading + Body):
h1 {
      font-family: "Merriweather", serif;
  }
p {
     font-family: "Open Sans", sans-serif;
  }

10. Font Shorthand Property
The font shorthand property sets multiple font values in one line.
Syntax:
selector {
        font: [style] [variant] [weight] [size]/[line-height] [family];
    }
Example:
p {
   font: italic small-caps bold 16px/1.5 "Georgia", serif;
 }
  • italic – Style.
  • small-caps – Variant.
  • bold – Weight.
  • 16px – Size.
  • 1.5 – Line height.
  • "Georgia", serif – Font family.
11. Responsive Fonts (Media Queries)
Make fonts responsive to screen size using media queries.
Example:
h1 {
        font-size: 4vw;
    }
@media (max-width: 600px) {
h1 {
        font-size: 6vw;
  }
}

12. Best Practices for Fonts in CSS

  1. Use Web-Safe Fonts or Google Fonts – Ensure availability across devices.
  2. Specify Fallbacks – Always include generic families.
  3. Limit Font Variety – Use 2-3 fonts to maintain a clean and organized look.
  4. Readable Sizes – Use 16px for body text as a standard.
  5. Responsive Sizing – Use relative units (em, rem).
13. Complete Example (Comprehensive Font Styling):
body {
          font-family: "Poppins", "Arial", sans-serif;
          font-size: 18px;
          line-height: 1.8;
        }
h1 {
       font-family: "Playfair Display", serif;
       font-size: 3rem;
       font-weight: bold;
       text-transform: capitalize;
    }
p {
     letter-spacing: 1px;
    }

By mastering font properties in CSS, you can create visually appealing, readable, and responsive websites that enhance the user experience and reinforce your design’s overall aesthetic.

Tags:

Post a Comment

Previous Post Next Post