It refers to the style, arrangement, and appearance of text on a webpage. It encompasses font choices, sizes, spacing, line length, color, and alignment—all working together to enhance readability and user experience.
1. Font Family
The font-family property lets you specify which font should be used to display text on a web page. It supports both specific font names and generic font families as fallbacks. It determines the appearance and personality of your website’s text.
2. Font Size
The font size property in CSS defines the size of the text on a webpage. It’s one of the most fundamental aspects of typography, impacting readability, hierarchy, and user experience. Proper font sizing ensures that content is legible and visually appealing, both on desktop and mobile devices.
Fluid Font Size
Fluid font size means that the text size scales smoothly across different screen sizes, rather than jumping between fixed sizes at breakpoints.
Unlike fixed sizes (like px) or stepped responsive sizes (like media queries), fluid font sizes grow and shrink based on the viewport width, offering a more flexible and natural reading experience.
- min: Minimum font size (won’t get smaller than this)
- max: Maximum font size (won’t get larger than this)
Font size will grow and shrink based on screen size, but never go below min value or above max value.
3. Font Weight
The font-weight property in CSS controls how bold or light text appears. It plays a big role in creating visual hierarchy, emphasis, and tone in your typography.
4. Line Height
line-height is a CSS property that controls the vertical space between lines of text. If font-size is the height of a letter, then line-height is the height of the entire line box, including the space above and below the letters.
5. Letter Spacing
letter-spacing is a CSS property used to adjust the space between characters in text.
6. Word Spacing
word-spacing is a CSS property that controls the horizontal space between words in a block of text. It’s especially useful for fine-tuning typography, improving legibility, or adding a bit of stylistic flair to headlines and navigation.
7. Text Transform
The text-transform property in CSS is used to control the case and style of letters in text. It can automatically make text uppercase, lowercase, or capitalize the first letter of each word — without changing the actual content in your HTML.
8. Text Decoration
The text-decoration property in CSS is used to add or remove decorative lines like underlines, overlines, or strikethroughs from text.
9. Underline Offset
The text-underline-offset property in CSS controls the distance between the underline and the text, allowing for better visual spacing and design control.
10. Text Align
The text-align property in CSS is used to set the horizontal alignment of text inside a block-level element. It controls whether the text is aligned to the left, right, center, or justified across the container.