CSS Fonts

CSS Fonts: Styling Typography

CSS fonts are used to style and enhance the appearance of text on a webpage, making it more readable and visually appealing. They help control how text looks and fits within the overall design of your site.

• Used to set the size, weight, style, and color of text.
• Help create a consistent and attractive look across a website.
• Improve readability and align the text style with the website’s theme.

<style>
    .brand-text {
        font-family: "Arial", Helvetica, sans-serif;
        font-size: 60px;
        color: navy;
        text-align: center;
    }
</style>

<h1 class="brand-text">IntricateDevo</h1>

In this example:

• The code applies a navy, 60px Arial font to the text "IntricateDevo" and centers it on the page.
• The text is styled using the .brand-text class in the CSS.

How to Apply Fonts in CSS

Fonts in CSS are applied using specific properties that control the style and appearance of text. Let's break down the core properties.

1. Font Family (font-family)

The font-family property defines which font(s) should be used for text. You should provide a list of fonts as a "fallback" mechanism in case the preferred font is unavailable on the user's device.

Syntax:

body {
    font-family: "Font Name", generic-font-family; 
}

• Note: If the font name contains spaces (like "Times New Roman"), it must be enclosed in quotation marks.
• In this fallback system, the browser tries to display the first font. If it fails, it moves to the next one, ending with a generic family like sans-serif or serif.

2. Font Size (font-size)

The font-size property controls the size of the text. You can set the size in several units, including pixels (px), ems (em), and percentages (%).

Syntax:

h1 {
    font-size: 32px; /* Fixed size in pixels */
}
p {
    font-size: 1.2em; /* Relative to the parent element */
}

• Pixels (px) provide a fixed, absolute font size.
• Ems (em) are relative to the parent element’s font size, making them highly useful for responsive design.

3. Font Weight (font-weight)

The font-weight property controls the thickness (boldness) of the text. It can accept keyword values like normal and bold, or numeric values from 100 to 900.

Syntax:

p {
    font-weight: bold; /* Bold text */
}
strong {
    font-weight: 700; /* Equivalent to standard bold */
}

• Numeric values allow for finer control over weight (e.g., 100 for light, 400 for normal, 900 for extra bold) provided the font file supports those weights.

4. Font Style (font-style)

The font-style property defines the style of the font, typically used to make text italic.

Syntax:

em {
    font-style: italic; /* Italicized text */
}
p {
    font-style: normal; /* Normal text */
}

5. Line Height (line-height)

The line-height property defines the vertical space between lines of text. Increasing line height improves readability, especially for long paragraphs.

Syntax:

p {
    line-height: 1.5; /* 1.5 times the font size */
}

Web Safe Fonts Vs Custom Fonts

This comparison highlights the difference between universally supported system fonts (web-safe) and designer-selected custom fonts used for unique web styling.

1. Web Safe Fonts

Web safe fonts are commonly supported across almost all browsers and operating systems. These fonts are pre-installed on most computers and mobile devices, ensuring your text appears exactly the same across devices without needing to download external files.

Common Web Safe Fonts:

• Arial
• Times New Roman
• Courier New
• Verdana
• Georgia

body {
    font-family: "Verdana", sans-serif;
}

2. Custom Fonts

Custom fonts allow you to use unique typography that is not pre-installed on a user’s device. You can load them using "web fonts." The most popular and free method for using custom fonts is through Google Fonts, though you can also host fonts on your own server.

<!-- Import the Roboto font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
    h1 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        color: navy;
    }
    p { font-family: 'Roboto', sans-serif; font-weight: 400; }
</style>
<h1>Hello, World!</h1>
<p>This text is rendered using the custom Roboto font.</p>

Responsive Typography

To make typography adaptable to different screen sizes, use responsive units like em, rem, %, or vw for font sizes. You can also combine CSS media queries with typography to ensure readability across all devices.

body {
    font-size: 16px; /* Default font size for desktop */
}

/* Media query for mobile screens /
@media (max-width: 600px) {
    body {
        font-size: 14px; / Smaller font on smaller screens */
    }
}

• em and rem: These units are relative to the parent element (em) or the root HTML element’s font size (rem), allowing for scalable, accessible text.
• vw (viewport width): This unit scales the font size fluidly based on the physical width of the browser window, which is great for massive hero headings.

Summary of CSS Font Properties

To customize fonts effectively in web design, it’s crucial to understand these main CSS font properties: