Steps to reproduce
How to reproduce the bug:
- Take any OpenType font supporting small capitals (i.e. smcp and/or c2sc feature tag). In fact, almost any modern system font is suitable, such as Calibri (Microsoft), Roboto (Google) or San Francisco (Apple).
- Take any HTML element with text content containing lowercase Latin letters (and maybe any other characters).
- Apply the specified font and the CSS rule
font-variant: small-capsto this element.
What result is expected:
The browser should render lowercase letters as small caps, which looks like this:
(This is a screenshot from Mozilla Firefox, which processes small caps the right way.)
What wrong result is observed in MS Edge:
Edge browser renders lowercase letters as fake small caps: they are just ordinary uppercase letters programmatically zoomed and distorted:
These fake small caps do not match the uppercase letters with their stroke width and proportions, they have bad spacing, therefore the whole inscription looks ugly and inhumanly.
Unfortunately, typography amateurs are not aware that small capitals is a separate kind of letters. It is often said that “small caps are letters of uppercase form and lowercase size”, but this is completely wrong. You cannot programmaticaly generate small caps from the uppercase letters, just like you cannot programmaticaly convert lowercase and uppercase letters to one another. It would be more accurate to say that small caps are close to uppercase letters by their form and to lowercase ones by their height. And still font designers develop independent glyphs for small-caps, just as they create separate lowercase and uppercase glyphs for each letter.
Fake small capitals were a common issue of early desktop publishing software, for programmers did not know typography and typographers could not write the code. Now browser developers go through the same grief as DTP software developers left behind twenty years ago.
Meanwhile, MS Egde (as well as Internet Explorer) is actually able to render real small capitals, though it requires to use
font-feature-settings: 'smcp' 1. That means Egde sources already contain the code needed to display small caps properly. It only remains for the developers to make
font-variant: small-caps work the same way.
This bug relates not only to Latin script, but also to other bicameral scripts such as Greek and Cyrillic.
Fake small caps can still make sense in cases when the font itself does not support real small capitals and does not provide glyphs for them.
Comments and activity
I am sorry, I have specified Safari among the browsers having this bug, but this was a misclick. Safari renders small caps correctly, as Firefox does as well. Now I cannot find how to edit my issue details, so I write this comment.
- Microsoft Edge Team
Changed Assigned To to “Rick J.”
Changed Assigned To to “Christian F.”
Since version 52.0 (now in beta), Google Chrome displays small caps the right way and supports font-variant-caps property as well.