CSS Typography

Enhance text styling and readability with advanced CSS typography

Introduction to CSS Typography

Typography in CSS refers to the styling and arrangement of text to make it legible, readable, and appealing. Good typography enhances the user experience by making content easier to read and understand.

CSS provides a wide range of properties to control typography, from basic font styling to advanced features like ligatures, kerning, and variable fonts.

Font Family

The font-family property specifies the font for an element. You can provide multiple font names as a "fallback" system.

This text is in a serif font. font-family: Georgia, Times, "Times New Roman", serif;

This text is in a sans-serif font. font-family: Arial, Helvetica, sans-serif;

This text is in a monospace font. font-family: "Courier New", Courier, monospace;

This text is in a cursive font. font-family: "Brush Script MT", cursive;

This text is in a fantasy font. font-family: Papyrus, fantasy;

/* Font family examples */
.serif {
  font-family: Georgia, Times, "Times New Roman", serif;
}

.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Courier New", Courier, monospace;
}
                    

Font Weight

The font-weight property sets how thick or thin characters in text should be displayed.

This text has a weight of 100 (Thin). font-weight: 100;

This text has a weight of 300 (Light). font-weight: 300;

This text has a weight of 400 (Normal). font-weight: 400;

This text has a weight of 700 (Bold). font-weight: 700;

This text has a weight of 900 (Black). font-weight: 900;

/* Font weight examples */
.weight-thin {
  font-weight: 100;
}

.weight-normal {
  font-weight: 400; /* Same as 'normal' */
}

.weight-bold {
  font-weight: 700; /* Same as 'bold' */
}
                    

Font Style

The font-style property specifies the style of the font.

This text has normal style. font-style: normal;

This text is italic. font-style: italic;

This text is oblique. font-style: oblique;

/* Font style examples */
.style-normal {
  font-style: normal;
}

.style-italic {
  font-style: italic;
}

.style-oblique {
  font-style: oblique;
}
                    

Text Decoration

The text-decoration property sets the decoration added to text.

This text has no decoration. text-decoration: none;

This text is underlined. text-decoration: underline;

This text has an overline. text-decoration: overline;

This text has a line through it. text-decoration: line-through;

This text has a wavy underline. text-decoration: underline wavy #5e72e4;

This text has a dotted underline. text-decoration: underline dotted #ea5455;

/* Text decoration examples */
.decoration-underline {
  text-decoration: underline;
}

.decoration-wavy {
  text-decoration: underline wavy #5e72e4;
}
                    

Text Transform

The text-transform property controls the capitalization of text.

This text has no transformation. text-transform: none;

This text is uppercase. text-transform: uppercase;

This Text Is Lowercase. text-transform: lowercase;

this text is capitalized. text-transform: capitalize;

/* Text transform examples */
.transform-uppercase {
  text-transform: uppercase;
}

.transform-lowercase {
  text-transform: lowercase;
}

.transform-capitalize {
  text-transform: capitalize;
}
                    

Text Alignment

The text-align property specifies the horizontal alignment of text in an element.

This text is aligned to the left. text-align: left;

This text is centered. text-align: center;

This text is aligned to the right. text-align: right;

This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. text-align: justify;

/* Text alignment examples */
.align-left {
  text-align: left;
}

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

.align-right {
  text-align: right;
}

.align-justify {
  text-align: justify;
}
                    

Line Height

The line-height property specifies the height of a line, which affects the spacing between lines of text.

This text has normal line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. line-height: normal;

This text has a line height of 1.5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. line-height: 1.5;

This text has a line height of 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. line-height: 2;

/* Line height examples */
.line-height-normal {
  line-height: normal;
}

.line-height-1-5 {
  line-height: 1.5; /* 1.5 times the font size */
}

.line-height-2 {
  line-height: 2; /* 2 times the font size */
}
                    

Text Shadow

The text-shadow property adds shadow to text.

This text has a basic shadow. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

This text has a glow effect. text-shadow: 0 0 10px #5e72e4;

This text has an outline. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

/* Text shadow examples */
.shadow-basic {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.shadow-glow {
  text-shadow: 0 0 10px #5e72e4;
  color: white;
}

.shadow-outline {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
}
                    

Typography Combinations

Combining different typography properties can create cohesive and visually appealing text styles.

This is a Heading Style

This is a Subheading Style

This is body text style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

This is a quote style. "Typography is what language looks like."

/* Typography combinations */
.heading-style {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #344767;
  letter-spacing: -0.5px;
}

.body-text-style {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #344767;
  text-align: justify;
}
                    

Responsive Typography

Responsive typography adjusts to different screen sizes, ensuring readability across devices.

This heading scales with viewport

This text also scales with the viewport size. Resize your browser to see how the text size adjusts automatically. This approach creates a smooth scaling effect without breakpoints.

/* Responsive typography */
.responsive-heading {
  font-size: calc(1.5rem + 1.5vw);
  font-weight: 700;
}

.responsive-body {
  font-size: calc(0.9rem + 0.2vw);
  line-height: 1.6;
}
                    

Menu