Element <code> and it's font-size

Published: Recently I stumlbed upon an issue on React's Github, titled "Docs: Text in code snippets is tiny in Firefox". At first glance that sounds trivial, but if you dig deeper, as I did, you may find things you did not know before. This article researches how different browsers set font size of an element <code> — standalone, or nested inside of <pre>. You may skip to tl;dr's conclusion.

<code></code> and font-size

Imagine the following HTML structure: 

<code>example</code>
Default style, in each browser I tested, is 13px font size and monospace font family. So far so good…

Now, let's apply some CSS: 

code { font-family: 'SomeFont'; }
It turns out that font size is now changed to 16px for Chrome, Safari and Firefox, even though I have not declared font-size, nor used shorthand font declaration, which could impact size as well. Strange isn't it?

Further tests showed that the same browsers set <code>'s font size to 13px (instead of using body's 16px, which is also default for other similar elements) if:

  • font-family isn't set
  • font-family is set to monospace
For any other font-family value, the font size was 16px, except in Internet Explorer, where it remained unchanged. Strangly, that also holds true if we set font-family to "Courier New", "Lucida Console" or Monaco, which in fact are monospaced font families.

I find it rather disturbing that browsers downsize fonts of <code> element under two conditions mentioned above. This sorcery is consistent among Chrome, Firefox and Safari.

<pre><code></code></pre> and font-size

<pre>
    <code>example</code>
</pre>
A common pattern, usually present in documentations, where we describe code.

Default (browser) style of <pre><code>example</code></pre>, in each browser I tested, is 13px font size and monospace font family. Knowing what we know, this is now expected.

And if we change font-family to anything but monospace, for example… 

code { font-family: 'SomeFont'; }
… we would expect font-size to be 16px, at least in Firefox, Chrome and Safari, as shown earlier.
Not really! Firefox hitting you below the belt, setting font-size to 13px. Turned out this was the root cause of an issue reported on React's Github page.

Note: Strangly, this is only true if preceding element is <pre>.

A comparison table

Comparing computed font size for <code>example</code>
font-family: Firefox Chrome Safari Internet Explorer
not set 13px 13px 13px 13px
monospace 13px 13px 13px 13px
* anything else 16px 16px 16px 13px
Comparing computed font size for <pre><code>example</code></pre>
font-family: Firefox Chrome Safari Internet Explorer
not set 13px 13px 13px 13px
monospace 13px 13px 13px 13px
* anything else 13px 16px 16px 13px
* even if font-family value is "Courier New", "Lucida Console", Monaco or any other monospaced typography.

Conclusion or tl;dr

  • Internet Explorer 10: font size does not change and is set to 13px,
  • Firefox, Chrome and Safari: default font size for <code> is 13px,
  • Firefox, Chrome and Safari: font size for <code> is 16px unless font-family is monospace or is not set,
  • Firefox, Chrome and Safari: even if we set font-family to "Courier" or "Lucida Console" (both monospaced), computed font size is 16px,
  • Firefox only: if <code>'s parent element is <pre>, the font-size is always 13px, unless font-size is declared.

The research was conducted on Mac OS X Yosemite (version 10.10.1), Chrome version 40, Firefox version 35.0.1, Safari 8.0.2 and on Windows 8's Internet Explorer 10.

Update: I was also able to test it on Internet Explorer, where default font size was 13px, regardless of font-family. Personally, this is my prefered behaviour.

blog comments powered by Disqus