Markdown Font Size — How to Change Text Size in Markdown
Markdown has no native font size syntax. That's by design — Markdown's philosophy is to let authors focus on content, not formatting. But in practice, there are times when you need to adjust text size, like annotations, footnotes, or emphasizing specific text. Fortunately, most Markdown renderers support inline HTML, so we can use HTML tags to get the job done.
The Bottom Line: What Can Pure Markdown Do?
In pure Markdown syntax, the only way to indirectly change text size is through headings:
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6 (Smallest)Heading sizes decrease from H1 to H6, which is standard behavior defined by the CommonMark specification. But this only works for heading text — Markdown syntax has no control over body text font size.
For precise control over body text size, you need HTML.
Method 1: <span> Tag with Inline Styles (Recommended)
This is the most universal and recommended approach. Nearly all Markdown renderers that allow inline HTML support it:
<span style="font-size: 24px;">This is large text</span>
<span style="font-size: 12px;">This is small text</span>
<span style="font-size: 0.8em;">Relatively smaller text</span>
<span style="font-size: 1.5em;">Relatively larger text</span>Rendered result:
- This is large text
- This is small text
px (Pixels) vs. em (Relative Units)
Both units work, but they suit different scenarios:
| Unit | Description | Best For |
|---|---|---|
px | Absolute size, 1px = 1 pixel | When you need precise control |
em | Multiple of the parent element's font size | Responsive layouts, maintaining proportions |
rem | Relative to the root element's font size | Site-wide consistent relative sizing |
% | Percentage of the parent element's font size | Similar to em, more intuitive |
For everyday use, px is the most straightforward, while em is more flexible. I personally lean toward em because the text scales proportionally with the user's browser base font size, which is better for accessibility.
Common Font Size Reference
<span style="font-size: 10px;">Tiny text (footnotes, annotations)</span>
<span style="font-size: 12px;">Small text (secondary info)</span>
<span style="font-size: 16px;">Body text (usually the default)</span>
<span style="font-size: 20px;">Medium-large text</span>
<span style="font-size: 24px;">Large text</span>
<span style="font-size: 32px;">Extra large text</span>Method 2: <big> and <small> Tags
The <big> tag was deprecated in HTML 5, but many Markdown renderers still support it. The <small> tag is a valid semantic tag in HTML 5, representing "side comments" or "fine print":
<small>This text will be smaller</small>
<big>This text will be bigger</big> (Note: big tag is deprecated)
<small><small>Nested usage makes it even smaller</small></small>The <small> tag renders text at roughly 80% of normal size (approximately 0.8em). You can nest them to shrink text further.
My recommendation: prefer <small> because it carries semantic meaning in HTML 5 (fine print / side comments), and search engines understand its purpose. Avoid <big> — it's deprecated.
Method 3: <font> Tag (Deprecated, Not Recommended)
The <font> tag was deprecated way back in HTML 4, but some Markdown renderers still recognize it:
<font size="1">Smallest</font>
<font size="3">Normal size</font>
<font size="5">Larger</font>
<font size="7">Largest</font>The size attribute ranges from 1 to 7, with 3 being the default. While the syntax is simple, this tag gets ignored by strict-mode HTML parsers and has no place in modern web development.
Reasons to avoid it:
- Completely unsupported in HTML 5
- An increasing number of Markdown renderers filter it out
- No semantic information — bad for SEO and accessibility
Method 4: <sup> and <sub> for Indirect Size Reduction
The superscript <sup> and subscript <sub> tags aren't designed for font size control, but their rendering effect does make text smaller and offset. If you happen to need small superscript or subscript text, these work:
Normal text<sup>superscript text (automatically smaller)</sup>
Normal text<sub>subscript text (automatically smaller)</sub>This approach is semantically correct for chemistry formulas (H2O), math expressions (x2), and similar use cases.
Platform Compatibility
Font size control depends heavily on how much HTML a platform supports. Here's how major platforms handle it:
| Platform | <span style> | <small> | <font> | Notes |
|---|---|---|---|---|
| GitHub | No | No | No | HTML styles are stripped in READMEs |
| GitLab | Partial | Yes | No | Allows some HTML tags |
| Obsidian | Yes | Yes | Yes | Full HTML support |
| Typora | Yes | Yes | Yes | Full HTML support |
| VS Code Preview | Yes | Yes | Yes | Chromium-based, full HTML support |
| Joplin | Yes | Yes | Yes | Full HTML support |
| R Markdown | Yes | Yes | Yes | Full support for HTML output |
| Notion | No | No | No | No custom HTML accepted |
| Discord | No | No | No | No custom HTML support |
| Slack | No | No | No | No custom HTML support |
| Static Sites | Yes | Yes | Varies | Jekyll/Hugo/Eleventy fully supported |
GitHub's Specific Limitations
GitHub's Markdown renderer (based on CommonMark) actively strips the style attribute from HTML tags. So in GitHub READMEs, issues, and PR descriptions, <span style="font-size: 20px;">big text</span> renders as normal-sized text — the style is completely ignored.
On GitHub, your only font size options are:
- Headings (
#through######) - Bold
**text**(visually slightly larger) - If you need precise control, use GitHub Pages (Jekyll static site) where you can fully customize CSS
Font Size in R Markdown
R Markdown users can set global font size through the YAML header or adjust it locally within the document:
---
output:
html_document:
css: styles.css
---Local adjustments:
```{r, results='asis'}
cat('<span style="font-size: 10px;">Small text</span>')
For PDF output, you can control size at the LaTeX level:
```latex
\footnotesize Small text
\huge Large textManaging Font Size in Static Sites
If you're using Jekyll, Hugo, Eleventy, or another static site generator, the best practice is to define size classes in CSS and reference them in your Markdown:
/* In your CSS file */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }Then in your Markdown:
<span class="text-xl">Large heading subtitle</span>
<span class="text-sm">Secondary annotation text</span>The benefit: change one CSS rule and every reference across the site updates automatically — much lower maintenance than scattering inline styles everywhere.
Practical Recommendations
Font size adjustments — use them sparingly. Most of the time, Markdown's default body text plus heading hierarchy is all you need. Typical scenarios where font size changes make sense:
- Footnotes and annotations: Use
<small>orfont-size: 0.8em - Warning/tip callouts: Pair with color and slightly larger text to grab attention
- Unit labels in data tables: Small text to keep focus on the data
- Homepage banner or hero section subtitles: Larger text to establish visual hierarchy
Remember this principle: if your page is covered in different font sizes, your readers' eyes will get tired. Size changes should serve content hierarchy, not decoration.
FAQ
Does Markdown have a native font size syntax?
No. Markdown's design philosophy focuses on content structure, not formatting details. Font size is a formatting concern that requires HTML or CSS.
Why doesn't <span style="font-size: ..."> work on GitHub?
GitHub's Markdown renderer strips the style attribute from HTML tags for security reasons. On GitHub, font size can only be controlled indirectly through heading syntax.
What's the difference between <small> and font-size: 0.8em?
The visual effect is nearly identical, but the semantics differ. <small> in HTML 5 means "fine print" and carries clear semantic meaning; font-size: 0.8em is purely a visual adjustment with no semantics. Using <small> is recommended.
Can I mix different font sizes within a single paragraph?
Yes. <span> is an inline element that can be mixed with surrounding normal text:
This is normal text, <span style="font-size: 20px;">this part is bigger</span>, and then it's back to normal.Does font size affect SEO?
Not directly. But using semantic HTML tags (like <small> for side notes, <h1>-<h6> for heading hierarchy) helps search engines understand your content structure, which indirectly benefits SEO.