Home > Article > Web Front-end > Typography and Font Styling in CSS
In this lecture, we'll explore how to style text using CSS. Typography is a critical aspect of web design that affects readability, user experience, and overall aesthetics. By the end of this lecture, you’ll know how to apply various font styles and control text appearance on your website.
Web fonts allow you to use various typefaces on your website. You can use system fonts that are pre-installed on devices, or you can import custom fonts using services like Google Fonts.
System fonts are reliable because they are pre-installed on most devices, but they limit your design options.
body { font-family: Arial, sans-serif; }
Google Fonts offers a wide selection of web fonts that you can easily integrate into your website.
Example:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Then, apply the font in your CSS:
body { font-family: 'Roboto', sans-serif; }
CSS offers a variety of properties to style your fonts, including font size, weight, style, and more.
You can control the size of the text using the font-size property.
h1 { font-size: 36px; } p { font-size: 16px; }
The font-weight property allows you to set how bold the text appears.
h1 { font-weight: bold; /* Or use numeric values like 700 */ }
The font-style property lets you italicize text.
em { font-style: italic; }
Use font-variant to display text in small caps.
p.caps { font-variant: small-caps; }
The line-height property controls the space between lines of text.
p { line-height: 1.5; }
The text-align property controls the horizontal alignment of text within an element.
h1 { text-align: center; }
The text-decoration property allows you to add underlines, overlines, or strikethroughs to text.
a { text-decoration: underline; }
You can add a shadow effect to your text using the text-shadow property.
h2 { text-shadow: 2px 2px 5px gray; }
Let’s combine these properties to style a webpage with a focus on typography.
HTML:
5d1e94760349a02ec7e3e05385bc999a 4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd 03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68
CSS:
/* Google Font */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap'); body { font-family: 'Open Sans', sans-serif; color: #333; line-height: 1.6; } /* Heading Styles */ h1 { font-size: 36px; font-weight: 700; text-align: center; text-shadow: 2px 2px 4px #aaa; } h2 { font-size: 28px; font-weight: 700; margin-top: 20px; } /* Paragraph Styles */ p { font-size: 18px; margin-bottom: 15px; } .intro { font-style: italic; font-variant: small-caps; text-align: justify; } /* Centering the content */ .content { max-width: 800px; margin: 0 auto; padding: 20px; }
In this example:
Next Up: In the next lecture, we’ll discuss CSS Layouts: Floats, Flexbox, and Grid, where you’ll learn how to create complex and responsive layouts for your website. Stay tuned!
Follow me On LinkedIn
Ridoy Hasan
The above is the detailed content of Typography and Font Styling in CSS. For more information, please follow other related articles on the PHP Chinese website!