Everything about `<abbr>`: when to use it and how to style it in small caps
Tags: typography, html, css
Published: 2021-04-27 08:06:10

NOTE: I cannot get rid of `</abbr>` from the title... Help me...

## TL;DR

1. Wrap abbreviations with `<abbr>` in HTML, purely as a more semantic way of styling them with CSS than using `<span>`.

2. Check if the font of your choice supports small caps as an OpenType feature. If so, move on to next step. Small caps may be available as another font family; in this case, simply use the `font-family` property and move on to step 4, or forget about small caps if the performance is a major concern. If small caps are not available, forget about styling abbreviations to avoid fake small caps rendered by browsers. 

3. If small caps are supported as an OpenType feature, use `font-variant-caps: all-small-caps` to style `<abbr>` elements. You may want to forget about a fallback for legacy browsers with `font-feature-settings: "c2sc", "smcp"`. 

4. For some fonts, you may want to increase letter spacing for small caps only slightly, starting with `letter-spacing: 0.01em`. Adjust the value until the black-and-white balance of small caps matches with that of the rest of body text. 

## Motivation

Using small caps for abbreviated words (e.g., HTML, CSS) is one of those typographic details that are standard in print media but not for websites. For the best "user experience", however, web designers/developers should adopt it. There are at least three reasons.

First, uppercase characters are bigger than the rest, and a bigger size conveys emphasis (and also YELLING!). But abbreviated words are not necessarily what the author wants to stress, especially if they appear repeatedly in text. The author's intention can consequently be misunderstood by the reader. It is a bad user experience where the reader is the user of a webpage.

> “Regular uppercase letters jump out and yell, creating undue emphasis on words such as acronyms.”—([Shoaf 2021], checkpoint #37)

Second, abbreviations in uppercase characters will interrupt a smooth flow of reading sentences which mostly consist of lowercase characters. It is again a bad user experience.

> “Small caps are designed to reduce the size of imposing capital letters in a balanced way, so that they don’t disrupt running text.” —[Brown 2018], chap. 4
>
> “Small caps create a better reading experience compared to regular uppercase letters because they blend in and flow with the rest of the text”—([Shoaf 2021], checkpoint #37)

Finally, since it's a standard practice in books, newspapers and magazine articles, abbreviations in small caps can make web articles look more professional. (This is my personal opinion.)

Once you're convinced that we should style abbreviations with small caps, however, it's not immediately clear how to code it. The information is scattered around on the web. As part of my ongoing effort of perfecting web typography, I've written this article to put everything together in one place about abbreviations in small caps for web articles, with sources of information clearly indicated.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjry88lp64tkbh2bepk6.png)(A screenshot of [Line-height Picker](https://line-height-picker.app/css), an app that I’ve built. See how the term CSS, rendered in small caps, blends into the rest of the text.)

## 1. Marking up in HTML

In the HTML document, wrap abbreviations with `<abbr>` like this:

```html
5:00<abbr>pm</abbr>
```

### But there are exceptions

There are a few types of abbreviations for which we should not use small caps. 

The first type is two-letter geographical acronyms (e.g., Washington DC, state names such as NY), and the second type is acronyms for personal names (e.g., JFK) ([Bringhurst 1996] p. 48). 

So the abbreviations should look like this (image source: [Rutter 2019]):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl2bz8uhii9wulg05hl1.png)

### Why not `<acronym>`?

In old days, there was an HTML element called `<acronym>`. But it is deprecated with the arrival of HTML5 ([Leadbetter 2010]). 

### Why `<abbr>` instead of `<span>`?

The use of `<abbr>` is simply for the sake of applying different CSS declarations to them from the rest of paragraphs. As far as I understand, using `<span>` instead doesn't have any practical consequences. It's just that `<abbr>` is more semantic than `<span>`. W3Schools used to say, “Marking up abbreviations can give useful information to browsers, translation systems and search-engines” ([W3Schools 2018]), but this sentence has been removed since then ([W3Schools 2021]).

**Updated on 28 April, 2021**: As a comment to this article, [InHuOfficial 2021] explains two benefits of `<abbr>` for screen reader users: 
> “`<abbr>` has a dual purpose for screen readers. First it lets them know this is an abbreviation so it can announce it as such. Second it lets the voice synthesis part of the screen reader know to read it as an abbreviation rather than a word. This is the key difference between an `<abbr>` and a `<span>`.”

### The `title` attribute may be unnecessary

Every discussion on `<abbr>` involves the user of the `title` attribute. As far as I see, the only benefit from using `<abbr>` is that its `title` attribute will activate a tooltip so the mouse users can see what the abbreviation stands for by hovering over it:

> “The global title attribute can be used in the <abbr> tag to show the full version of the abbreviation/acronym when you mouse over the <abbr> element.” —[W3Schools 2021]

Clearly, this functionality is not available for mobile device users. Making it work for touchscreens requires up to 50 lines of JavaScript code ([Coyier 2019]).

The `title` attribute for the `<abbr>` element doesn't change how screen readers read out the abbreviations by default. The user can configure a screen reader to read the `title` attribute value.

> “...screen readers usually just read out the element content. ... You can set up the screen reader to read the title content, but it's an opt-in setting ... There's really no way to set content for a screen reader with title.”—[Li 2017]

Still, I don't really see the value of adding the `title` attribute. 

For common abbreviations such as AM and PM for time or BC and AD for years, there is no point of explaining them as _ante meridiem_, _post meridiem_, before Christ, _anno Domini_. Indeed I just learned these phrases. :-)

For uncommon abbreviations (e.g., technical terms in a document written for non-experts), the standard practice in print media is to define it when it first appears in the document and use them without explanation afterwards. And I don't see what's wrong with it.

But not everyone agrees (see a comment to article by [InHuOfficial 2021], for example). If you go with the `title` attribute, a code example is as follows (taken from [W3Schools 2021]):

```html
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
```

## 2. Checking the availability for small caps

### Fonts with no small caps

The font you have chosen may not contain small cap characters. In this case, applying CSS declarations for rendering small caps will yield an ugly result as browsers “fake” small caps:![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5fnidskw14s4n76tu9x.png)
(Roboto with fake small caps whose letter stroke widths are inconsistent with full caps. Image source: [loominade 2016])

All typographers disdain fake small caps.

> “Genuine small caps are not simply shrunken versions of the full caps. They differ from large caps in stroke weight, letterfit, and internal proportions as well as in height. Any good set of small caps is designed as such from the ground up. Thickening, shrinking and squashing the full caps with digital modification routines will only produce a parody.”—[Bringhurst 1996], p. 48
>
> “Do not scale down full caps ... They will look odd and fake next to lowercase text.”—[Truong 2019]
>
> “Pseudo small caps are easy to spot—they look thin and spindly compared to the surrounding letters.”—[Shoaf 2021], checklist #37
>
> “Software creates pseudo small caps by shrinking down normal caps to the approximate x-height; the resulting letters look starved and sickly because their weights don’t match that of their brethren.” —[Lupton 2014]

If you really need to use a font that doesn't contain small caps, it's better not to use small caps for abbreviations. Go with full caps.

### Fonts with small caps as an OpenType feature

If your font supports small caps, these characters are available as an OpenType feature. To activate this feature, you need a set of special CSS declarations to apply to the `<abbr>` elements. We will discuss this in the next section.

In the case of using Google Fonts, however, it's a different story…

### Fonts with small caps as a separate font family

If you use a font with small caps from Google Fonts, small cap characters are available as a separate font family. For example, [Alegreya](https://fonts.google.com/specimen/Alegreya) has a small cap family called as [Alegreya SC](https://fonts.google.com/specimen/Alegreya+SC). 

Apparently, Google Fonts disables the OpenType feature for small caps ([Leatherman 2018], [de Mattos Neto 2020]), presumably for the purpose of shortening the time for browsers to download font files. 

In this case, you just need to add the small cap family to the `<link>` tag for loading Google Fonts and apply the `font-family` CSS property for `<abbr>` elements.

Of course, there is a cost: the user needs to wait for downloading an additional font file to see abbreviations in small caps. This may or may not be worthwhile:

> “Loading a separate font file just to implement small caps may not be worth it on the web. I tend to only use OpenType small caps on my sites.”—[Shoaf 2021], checklist #37

## 3. Activate the OpenType feature for small caps

If your font supports small caps as an OpenType feature, activating it requires either of the following two CSS properties: `font-variant-caps` and `font-feature-settings`.

### font-variant-caps

Up until very recently, the browser support for `font-variant-caps` is limited. Consequently, everyone seems to recommend using `font-feature-settings` as a fallback, even though MDN Web Docs recommends otherwise:

> “Whenever possible, Web authors should instead use the `font-variant` shorthand property or an associated longhand property such as ...  `font-variant-caps`... These lead to more effective, predictable, understandable results than `font-feature-settings`, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, `font-feature-settings` shouldn't be used to enable small caps.”—[MDN 2021]

As of March 2021, however, 93.06% of global page views are compatible with `font-variant-caps` ([Can I Use 2021](https://caniuse.com/mdn-css_properties_font-variant-caps)). If you can forget about legacy browsers such as IE, use the following CSS code:

```css
abbr {
  font-variant-caps: all-small-caps;
}
```

and all the abbreviations wrapped in `<abbr>` will be rendered in small caps.

[Rutter 2019] recommends adding to the above code  `font-style: normal` because “vanishingly small numbers of fonts provide italicized small caps.” See if this happens with your font file. 

There is an alternative declaration `font-variant-caps: small-caps`, which turns only lowercase characters into small caps. I don't think this is useful for abbreviations which are best written in uppercase characters for readability in HTML documents. Plus, with this declaration, “some older browsers will even override the proper OpenType small caps and replace them with pseudo small caps” ([Shoaf 2021], checklist #37).

In case your font doesn't support small caps, then the `font-variant-caps` will force browsers to fake small caps ([Leatherman 2018]). As discussed in the previous section, this should be avoided. This is why we should forget using CSS if the font doesn't support small caps.

### Font-feature-settings

To support legacy browsers, use `font-feature-settings` as a fallback. But its implementation is quite tricky. What [Adobe Fonts 2021a] recommends is as follows:

```css
abbr {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}
```

The `c2sc` value turns uppercase characters into small caps. The `smcp` turns lowercase characters into small caps. For the purpose of dealing with abbreviations, we don't need `smcp`, but it's just for making it consistent with the behaviour of `font-variant-caps: all-small-caps` which turns every character into small caps.

This code will behave as expected. However, what browsers actually do is to override `font-variant-caps` with `font-feature-settings`, even if the order is reversed(!): 

> “Because `font-feature-setting` is a low-level property intended “for special cases where its use is the only way of accessing a particular infrequently used font feature” it will override `font-variant` regardless of source order. ”—[Adobe Fonts 2021b]

This fact is also pointed out by [Leatherman 2018].

If we want CSS code to reflect what we really mean (i.e., using `font-feature-settings` as a fallback), therefore, a suggestion by [Brown 2018] makes more sense:

```css
abbr {
  font-feature-settings: "c2sc", "smcp";
}
@supports (font-variant-caps: all-small-caps) {
  abbr {
    font-variant-caps: all-small-caps;
    font-feature-settings: normal;
  }
}
```

Without `font-feature-settings: normal` inside the `@supports` block, the `font-feature-settings` will keep overriding `font-variant-caps`. Setting it to `normal` stops this overriding behaviour. 

But this code is more complicated and difficult to understand. So we should follow the previous one.

An extra care needs to be taken for using `font-feature-settings` when you use other OpenType features for all text, such as kerning. Since `font-feature-settings` overrides itself ([Adobe Fonts 2021b]), these other OpenType features stop being applied to the `<abbr>` elements if we just say `font-feature-settings: "c2sc", "smcp"`. So if you use, say, the kerning OpenType feature throughout the text (which is activated with `font-feature-settings: "kern"`), your code for abbreviations should be like:

```
abbr {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "kern", c2sc", "smcp";
  -webkit-font-feature-settings: "kern", "c2sc", "smcp";
  font-feature-settings: "kern", "c2sc", "smcp";
}
```

All this drives web developers nuts. I guess that's why [MDN 2021] recommends to use the `font-variant-caps` property instead of `font-feature-settings`, as mentioned above.

With today's good enough browser support of `font-variant-caps`, we should probably forget about supporting legacy browsers and let those old devices show abbreviations in full caps. It's in line with the principle of “progressive enhancement” (originally proposed by [Champeon 2003], reinterpreted for 2020 by [Steiner 2020]). 

## 4. Letter Spacing

Typographers recommend increasing space between letters for small caps, only slightly.

> “Letterspace all strings of capitals and small caps ... Acronyms such as CIA and PLO are frequent in some texts. So are abbreviations such as CE and BCE or AD and BC. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.”—[Bringhurst 1996], p. 30
>
> “Also, letterspace small caps very subtly, using ems so the spacing scales with font size. A little will do, like `letter-spacing: .01em`.”—[Brown 2018], chap. 4

The reason is:

> "The extra space helps small caps breathe, and better matches the black-and-white balance of body text.”—[Brown 2018], chap. 4

But some fonts have already adjusted the letterspacing of small caps:

> "The small caps of some fonts already include built-in spacing, so you may not always need to add additional spacing."—[Shoaf 2021], checklist #32

So judge by yourself if abbreviations in small caps appear a bit too blackier than the rest of text. If so, start with 

```css
letter-spacing: .01em
```

and adjust the value until the black-and-white balance evens out, without abbreviations breaking into individual small cap characters.

## Summary

First, wrap abbreviations with the `<abbr>` tag.

If your font supports small caps as a separate font family, simply set it as the value of the `font-family` property for `<abbr>` elements. For the best performance of loading fonts, you may not want to do so, though. 

If your font supports small caps as an OpenType feature, apply CSS to `<abbr>` elements as follows.

```css
abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: .01em; /* If black-and-white balance adjustment is necessary; tweek the value as you wish */

  /* Skip below if you decide not to support legacy browsers */
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
  /* If you use other OpenType features such as "kern", don't forget include them in these declarations */
}
```
If small cap characters are unavailable, forget about these CSS declarations to avoid fake small caps.

---

Using small caps for abbreviations is not common on the web, probably because this typographic practice is not widely known among web designers/developers (I didn't know it until recently, even though I should have been familiar with it from reading books and magazines in print). But now you know about it with the rationale behind it.

Another reason for its rarity may be that most web developers think it's not worthwhile the effort of dealing with the tricky nature of the  `font-feature-settings` property as described above. Given almost the universal adoption of the `font-variant-caps` property by modern browsers in 2021, this is no longer the case. We should revive this typographic practice for web media. 

If you agree, always refer to this article for how to implement it with HTML/CSS.

## Footnote: Other use cases of small caps

All these CSS techniques for small caps can also be used for _lead-ins_ (the first few words of the very first paragraph; see [Strizver 2015] for examples) as well as [subheads](https://en.wikipedia.org/wiki/News_style#Subhead) and [bylines](https://en.wikipedia.org/wiki/Byline) (as suggested by [Shoaf 2021]). For these cases, however, `font-variant-caps: small-caps` is more appropriate to keep full capital characters intact.

## Changelog

v2.0.0 — The title of the article has changed from “Abbreviations in small caps—the definitive guide for web developers in 2021” (May 1, 2021)
v1.1.0 — Part of a comment by [InHuOfficial 2021] to this article is incorporated (Apr. 28, 2021)
v1.0.0 — The first version published (Apr. 27, 2021)

## References

Adobe Fonts. (2021a) “[Syntax for OpenType features in CSS][Adobe Fonts 2021a]”, _Adobe Fonts User Guide_.

Adobe Fonts. (2021b) “[Using OpenType features][Adobe Fonts 2021b]”, _Adobe Fonts User Guide_.

Bringhurst, Robert. (1996) [_The Elements of Typographic Style_][Bringhurst 1996], 2nd ed., Vancouver: Hartley & Marks.

Brown, Tim. (2018) [*Flexible Typesetting*][Brown 2018]*.* A Book Apart.

Champeon, Steve. (2003) “[Progressive Enhancement and the Future of Web Design][Champeon 2003]”, _hesketh.com_, Mar. 21, 2003.

Coyier, Chris. (2019) “[Revisiting the abbr element][Coyier 2019]”, _CSS-Tricks_, Feb. 7, 2019.

de Mattos Neto, Jose. (2020) “[A comment to ‘How to get true small-caps from a webfont from Google-fonts’][de Mattos Neto 2020]”, _Stack Overflow_, Jul. 8, 2020.

InHuOfficial. (2021) “[A comment to ‘Abbreviations in small caps—the definitive guide for web developers in 2021’][InHuOfficial 2021]”, _Dev.to_, Apr. 27, 2021.

Kramer, Jen, and Erika Lee (2021) “[#30DaysofHTML Day 7: <abbr>][Kramer and Lee 2021]”, _30 Days of HTML_, Apr. 8, 2021.

Leadbetter, Tom. (2010) “[The abbr element][Leadbetter 2010]”, _HTML5 Doctor_, Nov. 30, 2010.

Leatherman, Zach. (2018) “[Coded up a better test case showing real versus fake small-caps support...][Leatherman 2018]”, _Twitter_, Dec. 11, 2018. 

Li, Andrew. (2017) “[An answer to ‘How do screen readers read <abbr> tags?’][Li 2017]”, _Stack Overflow_, Aug. 19, 2017.

loominade. (2016) “[Web fonts that support small-caps?][loominade 2016]”, _Stack Overflow_, Oct. 17, 2016.

Lupton, Ellen. (2014) [_Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students_][Lupton 2014], Princeton: Princeton Architectural Press.

MDN (2021) “[font-feature-settings][MDN 2021]”, _MDN Web Docs_, Mar. 16, 2021 (last updated).

Rutter, Richard. (2019) “[3.2.2 For abbreviations and acronyms in the midst of normal text, use spaced small caps][Rutter 2019]”, _The Elements of Typographic Style Applied to the Web_, Jan 16, 2019 (last updated).

Shoaf, Jeremiah. (2021) [*Flawless Typography Checklist*][Shoaf 2021].

Steiner, Thomas. (2020) “[Progressively enhance your Progressive Web App][Steiner 2020]”, _web.dev_, Jun. 29, 2020.

Strizver, Ilene. (2015) “[Designing with Lead-ins][Strizver 2015]”, _Creative PRO_, Sep. 2, 2015.

Truong, Donny. (2019) “[Discerning Typographic Details][Truong 2019]”, _Professional Web Typography_, 2nd edition.

W3Schools (2018) “[HTML <abbr> Tag][W3Schools 2018]”, _w3schools.com_, Dec. 11, 2018 (archived by Internet Archive).

W3Schools (2021) “[HTML <abbr> Tag][W3Schools 2021]”, _w3schools.com_.

[Adobe Fonts 2021a]: https://helpx.adobe.com/fonts/user-guide.html/fonts/using/open-type-syntax.ug.html#c2sch
[Adobe Fonts 2021b]: https://helpx.adobe.com/fonts/user-guide.html/fonts/using/use-open-type-features.ug.html
[Bringhurst 1996]: https://www.google.co.jp/books/edition/_/uz-7QgAACAAJ?hl=en
[Brown 2018]: https://abookapart.com/products/flexible-typesetting
[Champeon 2003]: http://www.hesketh.com/progressive_enhancement_and_the_future_of_web_design.html
[Coyier 2019]: https://css-tricks.com/revisiting-the-abbr-element/
[de Mattos Neto 2020]: https://stackoverflow.com/questions/55700843/how-to-get-true-small-caps-from-a-webfont-from-google-fonts#comment111061469_55700843
[InHuOfficial 2021]: https://dev.to/inhuofficial/comment/1e03e
[Kramer and Lee 2021]: https://jen4web.substack.com/p/abbr
[Leadbetter 2010]: http://html5doctor.com/the-abbr-element/
[Leatherman 2018]: https://twitter.com/zachleat/status/1072145547027509248?s=20
[Li 2017]: https://stackoverflow.com/questions/45776312/how-do-screen-readers-read-abbr-tags/45776429#45776429
[loominade 2016]: https://stackoverflow.com/q/40083805/11847654
[Lupton 2014]: https://www.google.co.jp/books/edition/_/gswEBAAAQBAJ
[MDN 2021]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
[Rutter 2019]: http://webtypography.net/3.2.2
[Shoaf 2021]: https://www.typewolf.com/checklist
[Steiner 2020]: https://web.dev/progressively-enhance-your-pwa/
[Strizver 2015]: https://creativepro.com/designing-lead-ins/
[Truong 2019]: https://prowebtype.com/discerning-typographic-details/
[W3Schools 2018]: http://web.archive.org/web/20181211225551/https://www.w3schools.com/tags/tag_abbr.asp
[W3Schools 2021]: https://www.w3schools.com/tags/tag_abbr.asp