htmlcssfontssmallcaps

Native HTML tag for small caps

In CSS, I can do small caps like:

<span style="font-variant: small-caps;">Jane Doe</span>

But is there a native HTML tag for small caps?

Solution

  • In short: No there is no HTML tag for small-caps.

    Any chance to get a <smallcap> element?

    As explained by Kaiido HTML's paradigm moved to a semantic concept (... long before HTML5) discouraging the use of "hard-baked" presentation (style) in HTML markup.
    For instance browsers still render the old <b>, <i> or <small> tags – but we should move the visual presentation to CSS. So it is very unlikely HTML11 will introduce a small caps element.

    True small caps support vs. "faux-small-caps"

    Similar to "faux-bold" styles (no proper bold font variation available – render a synthetically boldened font) we have

    @font-face {
  font-family: "Alegreya2";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/s/alegreya/v35/4UaBrEBBsBhlBjvfkRLjzanB44N1.woff2") format("woff2");
}

* {
  margin: 0;
}

body {
  font-family: "Alegreya";
}

p {
  font-size: 10em;
  line-height: 1em;
}

.sc,
small {
  font-variant: small-caps;
}

.true-sc,
small {
  font-family: Alegreya2;
}
    <link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900" rel="stylesheet">

<h3>True small-caps</h3>
<p><span class="sc true-sc">HhH</span>h</p>

<h3>Faux-small-caps (just scaled)</h3>
<p><span class="sc">HhH</span>h</p>


<h3>HTML small element to display small-caps (no real benefit)</h3>
<p><small>HhH</small>h</p>

    As you can see, with true small-caps (implemented by the font designer) we get a "harmonious" text rendering providing visually consistent stem widths.

    You can of course map an existing HTML element like <small> via CSS to a specific style – this may add benefits for editing purposes but under the hood it all relies on the CSS font-variant: small-caps property (ideally applied with a font supporting true small-caps).

    You may also define a custom element but this won't remove the necessity to define a CSS rule.