CSS Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. CSS provides various properties to style text.
1. Font Families
The font-family property specifies the font for an element. It can hold several font names as a "fallback" system.
p {
font-family: "Times New Roman", Times, serif;
}- Serif: Fonts with small lines at the ends on some characters (e.g., Times New Roman).
- Sans-serif: "Without serif". Clean lines (e.g., Arial, Helvetica).
- Monospace: All characters have the same width (e.g., Courier New).
2. Font Size
The font-size property sets the size of the text.
- Pixels (
px): Fixed size. Good for precise control. - Em (
em): Relative to the font-size of the element (2em means 2 times the size of the current font). - Rem (
rem): Relative to the font-size of the root element (html). - Percentage (
%): Relative to the parent element's font size. - Viewport Units (
vw,vh): Relative to the viewport size.
h1 { font-size: 40px; }
p { font-size: 1.2rem; }3. Font Style and Weight
font-style: Mostly used to specify italic text.normal,italic,oblique.
font-weight: Specifies the weight (boldness) of a font.normal,bold,bolder,lighter.- Numeric values:
100(Thin) to900(Black).400is normal,700is bold.
p.italic { font-style: italic; }
p.bold { font-weight: bold; }4. Text Alignment
The text-align property is used to set the horizontal alignment of a text.
left,right,center,justify.
h1 { text-align: center; }
p { text-align: justify; }5. Text Decoration
The text-decoration property is used to set or remove decorations from text.
none: Often used to remove underlines from links.underline,overline,line-through.
a { text-decoration: none; }
del { text-decoration: line-through; }6. Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
uppercase,lowercase,capitalize.
p.uppercase { text-transform: uppercase; }7. Spacing
line-height: Specifies the space between lines.letter-spacing: Increases or decreases the space between characters.word-spacing: Increases or decreases the space between words.
p {
line-height: 1.5;
letter-spacing: 2px;
}