Search code examples
htmltags

Why is the letter f squished in the code tag


I noticed that when the letter f acts strangely when it's in the code tag and followed by either its self or some other - but not all - characters.

For example:

<code style="font-size: 200px;">fff</code>

Notice how the first two fs are squished together.

Another example:

<code style="font-size: 100px;">Makefile</code>
<code style="font-size: 100px;">mono.txt</code>

Although the text in the code tag is supposed to be monospaced. The f and the i appear to take the space of a single character. And the string mono.txt seems to have one more character compared to the string Makefile. When in fact, they are the same length.

Is there any rationale behind this?


Solution

  • For some unknown reason, my browser was using a weird font called "Nimbus Mono Regular" for monospaced text. Which was the source of my misery. Thanks to the commenters for the help.