Typography Showcase
Visual examples of Markdown typography elements rendered in context.
Note
If you are reading this in an EPUB (e-book) format, some e-book readers such as those made by Kindle and Kobo strip out fonts and replace them with their own default fonts, if this happens then you can view this typography showcase online at our website md.docizr.com/v1/showcase/typography-showcase
Drop Caps
A drop cap enlarges the first letter of a paragraph to create an elegant editorial opening — common in printed books, magazines, and long-form blog posts. Simple drop cap We arrived in the village just as the morning market was winding down. The last of the flower sellers were packing up their...
Google Fonts
Free fonts from Google Fonts loaded via a stylesheet link. Each demonstrates a distinct personality suited to different kinds of writing. Playfair Display — editorial serif A Weekend in the Dolomites The mountains were everything the photographs promised, and nothing like them at all...
Ligatures
Ligatures are special joined glyphs for character pairs that would otherwise clash or look awkward — such as fi, fl, ffi, and ffl. Most quality fonts include them. Common ligatures on vs off Pair Ligatures on Ligatures off fi final, find, fire, figure, fin...
Kerning and Spacing
Kerning, tracking, and leading (line height) are the three fundamental spacing controls in typography. Small adjustments make a significant difference to readability and visual tone. Letter spacing (tracking) Tight: letter-spacing: -0.04em Fresh bread from the village bakery every Sat...
Text Effects
Decorative CSS effects for headings and display text. Text shadow Soft shadow Harvest Festival Hard retro shadow Retro Café Neon glow Night Market Long shadow Summer Gradient text Warm sunset gradient Golden Hour Ocean gradien...
Text Columns
CSS column-count splits a block of text into newspaper-style columns — useful for newsletters, articles, and reading-optimised layouts. Two columns The old recipe book had lived at the back of the kitchen cupboard for as long as anyone could remember. Its cover was warped from years of stea...
Decorative Headings
Headings styled with borders, rules, backgrounds, and other decorative treatments using inline CSS. Underline rule Seasonal Recipes Double rule Seasonal Recipes Left bar accent Seasonal Recipes Coloured left bar with background Seasonal Recipes Ruled centred Seasonal Re...
Small Caps and Variants
OpenType font features for numbers, small caps, and specialised text treatments. Small caps Small capitals are designed glyphs — not simply shrunk full capitals — that match the x-height of lowercase letters. They read naturally in running text. Normal caps She arrived at 9AM on Th...
Variable Fonts
Variable fonts contain a continuous range of weights, widths, and other axes in a single file. A CSS font-weight of any value from 100–900 is possible — not just multiples of 100. Inter — weight axis (100–900) Every weight value from Thin to Black — no separate font files. 100 · Th...
Emoticons and Emoji
Emoji are standard Unicode characters and work anywhere plain text does — in headings, paragraphs, lists, and inline HTML. No special syntax is needed. Emoji in headings 🌿 Notes from the Allotment ☕ Morning Coffee Thoughts 🎉 You are Invited 🌊 Coastal Walk Diary Emoji in running text...
Text Rotation
Rotating text has practical uses — sidebar labels, book spines, watermarks, and decorative headings. Three distinct techniques are available: CSS transform, CSS writing-mode, and SVG presentation attributes. CSS transform — any angle transform: rotate() on an inline or block element. Nega...
Non-Western Character Sets
Markdown is plain Unicode text, so any script that your reader's system can render will display correctly. No special syntax is needed. Right-to-left scripts require a dir="rtl" attribute on their containing element to render in the correct direction. Modern operating systems include system font...