DEV Community

Raizo-03
Raizo-03

Posted on

DAY 3 OF CSS

CSS provides powerful tools for controlling text appearance, spacing, alignment, and typography. This guide covers text formatting properties and how to integrate custom fonts into your web projects.

✨ Text Appearance Properties

Control the visual appearance of text with these essential properties.

Property Description Example
color Specifies the color of the text color: #333;
text-transform Controls the capitalization of text text-transform: uppercase;
text-shadow Defines the shadow effect of the text text-shadow: 2px 2px 4px #000000;

Text Transform Values:

  • uppercase - Converts text to uppercase
  • lowercase - Converts text to lowercase
  • capitalize - Capitalizes the first letter of each word
  • none - No transformation

Text Shadow Syntax: 

text-shadow: horizontal-offset vertical-offset blur-radius color;
Enter fullscreen mode Exit fullscreen mode

Example:

h1 {
    color: #2c3e50;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
Enter fullscreen mode Exit fullscreen mode

📐 Text Alignment Properties

Control how text is positioned within its container.

Property Description Example
text-align Sets the horizontal alignment of text text-align: center;
text-align-last Sets the alignment of the last line of a block container text-align-last: right;

Text Align Values:

  • left - Aligns text to the left (default)
  • right - Aligns text to the right
  • center - Centers the text
  • justify - Stretches text to fill the line width

Example:

.header-text {
    text-align: center;
}

.paragraph {
    text-align: justify;
    text-align-last: right;
}
Enter fullscreen mode Exit fullscreen mode

📏 Text Spacing Properties

Control the spacing and layout of text elements.

Property Description Example
text-indent Specifies the indentation of the first line of text text-indent: 20px;
line-height Sets the height of a line box line-height: 1.5;
letter-spacing Increases or decreases the space between characters letter-spacing: 2px;
word-spacing Increases or decreases the space between words word-spacing: 4px;
white-space Specifies how white space inside an element is handled white-space: nowrap;

White Space Values:

  • normal - Default behavior, collapses whitespace
  • nowrap - Prevents text from wrapping
  • pre - Preserves whitespace like <pre> tag
  • pre-wrap - Preserves whitespace but allows wrapping
  • pre-line - Preserves line breaks but collapses other whitespace

Example:

.article-text {
    text-indent: 30px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

.no-wrap {
    white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

🔤 Font Properties

Control the font family, size, weight, and style of text.

Property Description Example
font-family Specifies the font family for text font-family: 'Arial', sans-serif;
font-size Sets the size of the font font-size: 16px;
font-weight Sets the weight (boldness) of the font font-weight: bold;
font-style Sets the style of the font font-style: italic;
font-variant Specifies the variant of the font font-variant: small-caps;

Font Weight Values:

  • normal or 400 - Normal weight
  • bold or 700 - Bold weight
  • lighter - Lighter than parent element
  • bolder - Bolder than parent element
  • 100-900 - Numeric values (100 = lightest, 900 = boldest)

Font Style Values:

  • normal - Normal text
  • italic - Italic text
  • oblique - Oblique text (slanted)

Example:

.heading {
    font-family: 'Georgia', serif;
    font-size: 2.5em;
    font-weight: 700;
    font-style: normal;
    font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

🌐 Custom Fonts Integration

Method 1: Using Google Fonts with <link> Tag

Include Google Fonts in your HTML <head> section:

<head>
    <!-- Google Fonts Link -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Sunuwar&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
Enter fullscreen mode Exit fullscreen mode

Then use in CSS:

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

h1, h2 {
    font-family: 'Noto Sans Sunuwar', sans-serif;
}

p {
    font-family: 'Roboto', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Method 2: Using @import in CSS

Import fonts directly in your CSS file:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sunuwar&family=Poppins:wght@400;500;600;700;800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

h1, h2 {
    font-family: 'Noto Sans Sunuwar', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

🎯 Font Family Best Practices

Font Stack (Fallback Fonts)

Always provide fallback fonts in case your custom font fails to load:

.text {
    font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Font Family Categories:

  • serif - Fonts with decorative strokes (Times New Roman, Georgia)
  • sans-serif - Fonts without decorative strokes (Arial, Helvetica)
  • monospace - Fixed-width fonts (Courier New, Monaco)
  • cursive - Handwriting-style fonts
  • fantasy - Decorative fonts

Font Loading Optimization

Use preconnect for faster font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Enter fullscreen mode Exit fullscreen mode

📊 Complete Example

Here's a comprehensive example combining text formatting and custom fonts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Example</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        h1 {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5em;
            font-weight: 700;
            color: #2c3e50;
            text-align: center;
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: 1px;
        }

        h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.8em;
            font-weight: 600;
            color: #34495e;
            margin-top: 30px;
        }

        p {
            font-weight: 400;
            text-align: justify;
            text-indent: 25px;
            word-spacing: 1px;
            margin-bottom: 15px;
        }

        .highlight {
            background-color: #f39c12;
            color: white;
            padding: 2px 6px;
            font-weight: 500;
        }

        .quote {
            font-style: italic;
            font-size: 1.1em;
            color: #7f8c8d;
            text-align: center;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <h1>Custom Typography</h1>
    <h2>Professional Text Formatting</h2>
    <p>This example demonstrates various text formatting properties combined with custom fonts from Google Fonts.</p>
    <p class="quote">"Typography is the craft of endowing human language with a durable visual form."</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

💡 Key Takeaways

Text Formatting Essentials:

  • Text Appearance: Use color, text-transform, and text-shadow for visual impact
  • Text Alignment: Control positioning with text-align and text-align-last
  • Text Spacing: Fine-tune readability with line-height, letter-spacing, and word-spacing
  • Font Properties: Specify typography with font-family, font-size, font-weight, and font-style

Custom Fonts Best Practices:

  • Always provide fallback fonts in your font stack
  • Use preconnect for faster Google Fonts loading
  • Choose appropriate font weights for different text elements
  • Consider performance - don't load unnecessary font variants
  • Test font loading across different devices and connection speeds

Performance Tips:

  • Limit font variants - only load the weights and styles you need
  • Use font-display: swap for better loading performance
  • Consider system fonts for faster loading times
  • Optimize font loading with preconnect and preload techniques

This comprehensive approach to text formatting and custom fonts will help you create visually appealing and professionally designed web pages!

Top comments (0)