Search pages
Search all CSS Showcase pages by name
Typography
The art and technique of arranging type to make written language beautiful and readable
Font Families & Loading
Choosing the right typeface sets the tone for your entire design. Learn how to load and use fonts effectively.
System Sans-Serif
System Serif
System Monospace
Google Fonts: Inter
Variable Font (Inter)
Font Display: Swap
Playfair + Inter
Classic serif paired with modern sans-serif creates elegant contrast.
Bebas Neue
Bold display font with clean body text for impactful design.
Interactive Font Preview
Experiment with different font families, sizes, and weights to see how they affect the look and feel of text.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 400;Text Styling Properties
Transform plain text into visually appealing content with these essential CSS properties.
Thin (100)
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
Italic Style
Oblique 15deg
Extra Small (0.75rem)
Small (0.875rem)
Base (1rem)
Large (1.25rem)
Extra Large (1.5rem)
This paragraph has optimised line height (1.6) for comfortable reading. Notice how the lines have breathing room between them, making the text easier to scan.
Tight Letter Spacing (-0.05em)
Normal Letter Spacing
Wide Letter Spacing (0.1em)
Increased Word Spacing
UPPERCASE WITH SPACING
Simple Underline
Custom Underline Style
Strikethrough Text
Overline Decoration
lowercase to uppercase
capitalize each word
Small Caps Variant
Left aligned text (default)
Centre aligned text
Right aligned text
Justified text creates even edges on both sides by adjusting word spacing. This can sometimes create rivers of white space.
This paragraph has a text indent, common in traditional book typography for the first line of paragraphs.
Advanced Typography
Take your typography to the next level with these advanced CSS features and techniques.
Weight: 300
Weight: 500
Weight: 700
Weight: 900
Animated Variable Font
Simple Shadow
Long Shadow Effect
Neon Glow
3D Text Effect
Outlined Text
Ligatures: fi fl ff ffi ffl
No Ligatures: fi fl ff ffi ffl
Old Style: 1234567890
Tabular: 1234567890
Fractions: 1/2 3/4 5/8
This text is too long and will be truncated with an ellipsis at the end...
This text is too long and will be clipped without any visual indicator...
Thisisaverylongwordthatwillbreakwhenitreachestheendofthecontainer
This paragraph uses automatic hyphenation to break long words at appropriate syllable boundaries.
Type Specimens
Complete typography systems showcasing hierarchy, rhythm, and cohesive design.
The Quick Brown Fox
Jumps Over the Lazy Dog
A Typography Specimen
This is a lead paragraph demonstrating larger, more impactful text that introduces the main content. It sets the tone and draws the reader in.
Regular body text maintains optimal readability with carefully chosen font size, line height, and measure. The typography system creates visual hierarchy through size, weight, and spacing rather than relying on colour alone.
“Typography is the craft of endowing human language with a durable visual form.”— Robert Bringhurst
Type Scale
Character Set
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numbers
0123456789
Punctuation
.,;:!?'""-–—()[]{}/*@#£$%&
Typography Best Practices
Optimal Line Length
Keep lines between 45–75 characters for comfortable reading. Use ch units or max-width.
Establish Hierarchy
Use size, weight, and spacing to create clear visual hierarchy, not just colour.
Limit Font Families
Stick to 2–3 font families maximum. More creates visual chaos.
Ready to Layout?
Beautiful typography needs a solid foundation. Time to master modern layout techniques!