Programming for beginners: Font Families In css

In CSS, a font family refers to a set of fonts that share common design features. When you specify a font family in your CSS, you're essentially telling the browser which fonts to use to display the text on a webpage. If the first font specified is not available or supported on the user's device, the browser will try the next font in the list, and so on.

Syntax

font-family: "font 1", "font 2", generic-family;

Example

font-family: Georgia, Times, "Times New Roman", serif;

Main Generic Font Families in CSS

1. Serif: Fonts that have small lines or strokes attached to the end of a larger stroke in a letter or symbol. They are often used in print media and are considered more traditional.

· Examples: Times New Roman, Georgia, Garamond.

· Use Case: Great for body text in print, formal documents, and any context where a classic, readable look is desired.

2. Sans-serif: Fonts without the small lines at the ends of characters. They are cleaner and more modern looking, often used in digital interfaces.

· Examples: Arial, Helvetica, Verdana.

· Use Case: Suitable for websites, mobile apps, and any context requiring a modern, clean appearance. Sans-serif fonts are typically easier to read on screens.

3. Monospace: All characters occupy the same amount of horizontal space. These fonts are often used in coding environments and technical documentation.

· Examples: Courier New, Consolas, Monaco.

· Use Case: Ideal for displaying code snippets, technical documents, and any context where alignment of characters is important.

4. Cursive: Fonts that mimic handwritten or calligraphic text. They are generally more decorative and can add a personal or artistic touch.

· Examples: Brush Script, Pacifico, Comic Sans MS.

· Use Case: Best used sparingly, for informal designs, personal messages, or artistic elements where a handwritten feel is desired.

5. Fantasy: Decorative fonts that are often used for special effects. These are not intended for large bodies of text.

· Examples: Impact, Papyrus, Jokerman.

· Use Case: Good for headings, logos, or any design element where a unique and eye-catching font is needed.

fontFamily.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Family Examples</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Default to sans-serif for body */
            margin: 20px;
        }

        .serif {
            font-family: "Times New Roman", Times, serif;
        }

        .sans-serif {
            font-family: "Helvetica Neue", Arial, sans-serif;
        }

        .monospace {
            font-family: "Courier New", Courier, monospace;
        }

        .cursive {
            font-family: "Brush Script MT", cursive;
        }

        .fantasy {
            font-family: Impact, fantasy;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        p {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>Font Family Examples</h1>

    <section class="serif">
        <h1>Serif Font Example</h1>
        <p>This paragraph is styled with a serif font family. Serif fonts have small lines or strokes at the ends of each character. They are often used in traditional and formal contexts, such as in books and newspapers. This text is using "Times New Roman", Times, serif.</p>
    </section>

    <section class="sans-serif">
        <h1>Sans-serif Font Example</h1>
        <p>This paragraph is styled with a sans-serif font family. Sans-serif fonts do not have the small lines or strokes at the ends of characters. They are clean, modern, and widely used for web content. This text is using "Helvetica Neue", Arial, sans-serif.</p>
    </section>

    <section class="monospace">
        <h1>Monospace Font Example</h1>
        <p>This paragraph is styled with a monospace font family. Monospace fonts have characters that occupy the same amount of horizontal space, making them ideal for code and technical documents. This text is using "Courier New", Courier, monospace.</p>
    </section>

    <section class="cursive">
        <h1>Cursive Font Example</h1>
        <p>This paragraph is styled with a cursive font family. Cursive fonts are designed to mimic handwriting and often include decorative elements. They are used for artistic and personal touches. This text is using "Brush Script MT", cursive.</p>
    </section>

    <section class="fantasy">
        <h1>Fantasy Font Example</h1>
        <p>This paragraph is styled with a fantasy font family. Fantasy fonts are decorative and unconventional, often used for special effects or themed designs. They stand out and are not typically used for body text. This text is using Impact, fantasy.</p>
    </section>

</body>
</html>

Above snippet generate below screen.

Previous Next Home

Programming for beginners

Thursday, 19 December 2024

Font Families In css

No comments:

Post a Comment