Keyboard Shortcut for Small Caps: A Practical Guide

Learn how to apply small caps quickly with keyboard shortcuts across Word, Pages, and web content. This guide covers CSS, HTML, and editor tips for consistent typography.

Shortcuts Lib Team

March 22, 2026·5 min read

Keyboard Shortcuts Bold Word Shortcuts Italic

Small Caps Shortcuts - Shortcuts Lib — Photo by Waypixelsvia Pixabay

Quick AnswerDefinition

Small caps is a typography feature that renders lowercase letters as small uppercase glyphs. There is no universal single-key shortcut for small caps across all apps; most software requires opening a Font or Typography dialog to enable the feature. This quick guide explains how to access small caps with common shortcuts and provides web and CSS alternatives.

What is small caps and when to use it

Small caps is a typography feature that renders lowercase letters as uppercase glyphs at a smaller size, creating a refined, cohesive look for headings, acronyms, or proper nouns. It helps maintain emphasis without introducing full uppercase shouting. In modern web design, you can trigger small caps with CSS using font-variant-caps or font-variant: small-caps. For print or word processors, most editors expose Small Caps via a dedicated Font dialog. This section demonstrates practical implementations in code and in editor workflows.

CSS

/* CSS approach for web content */
.example { font-variant-caps: small-caps; }

/* All small caps (where supported) */
.sc-all { font-variant-caps: all-small-caps; }

HTML

<!-- HTML usage example -->
<h1 class="sc-title">Typography Example</h1>

In CSS, browsers render small caps by mapping lowercase letters to uppercase glyphs at a reduced size. The availability depends on the font in use. If the font lacks true small caps, some browsers synthesize them, which can look inconsistent across platforms. For best results, pair small caps with fonts that include real small-cap glyphs.

font-inline-css-example.css;html;svg

codeblock_note_skip_none_to_keep_style_attachment_1.md

Steps

Estimated time: 15-25 minutes

1
Identify target text
Select the heading or paragraph you want to render in small caps. This ensures the style applies only where intended and avoids accidental changes.
Tip: Use a separate CSS class for headings if you’re styling web content.
2
Open formatting options
Open the Font dialog in your editor (Word/Pages) or edit your CSS in your stylesheet. If working on the web, locate the font-variant-caps property.
Tip: In Word, Ctrl+D opens the Font dialog; on Mac, Cmd+D usually works as well.
3
Enable small caps
In editors, check the Small caps option. In CSS, apply `font-variant-caps: small-caps;` or `all-small-caps` for broader coverage.
Tip: Test across headings and body text to compare readability.
4
Apply and verify
Apply the change and review the rendered text in multiple environments (desktop, mobile, print preview).
Tip: Confirm that the chosen font actually supports small caps to avoid poor rendering.
5
Consider alternatives
If the font lacks true small caps, you can use all-small-caps or a bold uppercase variant with adjusted tracking to simulate the effect.
Tip: Consistent typography across platforms matters more than perfect glyph fidelity.
6
Document the approach
Add notes in your style guide about when and where small caps should be used.
Tip: Standardize usage to maintain typographic coherence.

Pro Tip: Choose fonts with true small caps to avoid synthetic rendering differences across platforms.

Warning: Not all fonts provide true small caps; testing is essential to avoid inconsistent results.

Note: For web content, CSS-based small caps ensure consistent rendering across browsers if fonts are properly loaded.

Prerequisites

Required

CSS knowledge and a modern browser (Chrome, Firefox, Edge)
Required
Access to the CSS file or a page to apply styles
Required

Optional

Fonts with true small caps support (optional but recommended)
Optional

Keyboard Shortcuts

Action	Shortcut
Open Font/Typography dialog to enable small capsCommon in Word, Pages; uses the font dialog to toggle Small Caps	`Ctrl`+`D`

Questions & Answers

What is small caps and why should I use it?

Small caps renders lowercase letters as smaller uppercase glyphs, creating a refined emphasis blend. It’s often used for acronyms, section headers, or styling that requires a formal look without full uppercase emphasis.

Is there a universal keyboard shortcut for small caps?

No universal shortcut exists across all apps. Most editors require opening a Font or Typography dialog to enable the feature. Web content uses CSS properties to apply small caps.

Which fonts support true small caps?

Fonts with real small cap glyphs provide the best rendering. Many system fonts lack full support, causing synthetic results. When possible, choose fonts designed with true small caps.

Can I still use small caps in web pages if the font doesn’t support it?

Yes, you can fall back to CSS synthesis or use font stacks with fonts known to include small caps. However, rendering quality may vary between browsers.

What’s the best practice for headings versus body text?

Use small caps for headings or emphasis while keeping body text readable. Consistency is key; apply small caps to a defined set of elements (e.g., H2 headings) to maintain harmony across the document.

How do I apply small caps in Word or Pages specifically?

In Word or Pages, select text, open the Font dialog, and enable Small Caps. This workflow relies on the app’s typography controls rather than a universal shortcut.