Basics of Typography in CSS
Explore how to change font characteristics and adjust text styles to improve user experience.
Typography is a fundamental aspect of web design that significantly impacts the user experience. CSS provides a range of properties to style text, allowing us to enhance readability and visual appeal. In this lesson, we’ll explore how to change font characteristics and adjust text styles using CSS.
Changing font family
The font-family property specifies the typeface of the text. We can assign multiple fonts as a “fallback” system in case the first choice isn’t available on the user’s device.
body {font-family: "Helvetica Neue", Arial, sans-serif;}
In this example, the browser will use “Helvetica Neue” if it’s available; if not, it will try Arial, and finally any sans-serif font.
The following table includes some widely recognized font families in web development due to their screen readability, popularity, and availability across platforms.
Frequently Used Font Families
Category | Font Family | Description |
Sans-serif | Open Sans | Versatile, professional, and highly legible. Commonly used in web UI, corporate websites. |
Roboto | Clean and modern, default for Android. Commonly used in web and mobile apps. | |
Montserrat | Geometric sans-serif with a sleek, modern appearance. Commonly used in branding, headlines. | |
Arial | Universally available and highly readable. Commonly used as the fallback font for web content. | |
Serif | Georgia | Optimized for readability on screens. Commonly used in blogs and news sites. |
Times New Roman | Classic serif font, though less common now for the web. Commonly used in legacy content, formal websites. | |
Monospace | Consolas | Preferred for code display due to its clarity. Commonly used in code snippets, programming blogs. |
Source Code Pro | A modern monospace font for web coding contexts. Commonly used in developer-focused sites. |
Adjusting font size
The font-size property sets the size of the text. Common units include pixels (px), ems (em), and percentages (%).
p {font-size: 16px;}
This sets all <p> elements to a font size of 16 pixels.
Setting font weight
The font-weight property controls the thickness of the characters. We can use keywords like normal or bold, or numerical values from 100 (thin) to 900 (heavy).
h1 {font-weight: 700;}
This makes all <h1> headings bold.
Applying font style
The font-style ...