Ctrl.blog

Version 13 of the Unicode Standard — the World’s leading standard for digitalization of characters, symbols, and emoji — was announced in early March 2020. The addition of the Creative Commons (CC) license symbols caught my interest among the 5390 new characters added in version 13.

Creative Commons is a set of permissive free-culture licenses that are meant to encourage sharing. Think of it as the open-source code for creative works. Read the Creative Commons License Primer if you’re unfamiliar with their licenses. The different CC licenses are associated with symbols that represent what rights the license restricts. For example, the 🄏 non-commercial symbol is used to represent licenses that restrict commercial exploitation.

The below table shows the new licensing symbols that were introduced in Unicode 13. The first one is technically the mathematical “circled equals” symbol that has been part of Unicode Standard for years. However, it was given a secondary meaning applicable for use with Creative Commons in Unicode 13.

I was excited to use these symbols on my websites. However, no system fonts — font files pre-installed with operating systems — support these new characters yet. Even if some system fonts added these characters today, the updated versions won’t reach visitors’ devices until a couple of years from now.

You may be screaming “webfonts” at the top of your voice by this point, and you wouldn’t be wrong. That’s how your web browser [hopefully] is rendering the above symbols. However, I prefer using locally installed fonts whenever possible. Webfonts are large blocks of data that waste bandwidth and are slow to render on low-end devices.

I don’t even use the symbols on every page. Only some articles on this website contain Creative Commons licensed materials. Luckily, the Cascading Style Sheet (CSS) standard has a good solution for adding a fallback font for specific characters. This solution is supported in all modern mobile and desktop web browsers.

Modern web browsers won’t download fonts it won’t need. The CSS font-family attribute can contain a comma-separated list of font files. Web browsers will pick fonts from left to right in the list until it finds one that is already installed or that it knows how to download. More importantly, this process is repeated for individual characters that are missing in the preferred font. The browser will check local fonts for the characters and fallback to download the font with the newer Unicode characters on demand.

I created a minimal webfont that only contains the copyright symbol and the new CC license symbols (eight in total). The copyright symbol (a circled letter C) is frequently used in conjunction with license information. It’s visually similar to the circled CC license symbols. I thought it would be visually pleasing with a matching set of symbols.

You can download CC Symbols, my Unicode-compatible Creative Commons Symbols font. The download contains the font in WOFF2 format 1,9 KiB, and WOFF format 3,8 KiB for older web browsers. For context: the SVG version — a vector file format so comparable to the symbol information stored in a font — of just the 🅭 circled CC symbol downloaded from the CC website is 2,4 KiB.

The download also contains an installable TrueType font (TTF) and the FontForge source file (SFD) for those who want to modify the font. These last two aren’t suitable for use on the web. You should be able to use the new symbols in any Unicode-compatible application after installing the font on your computer.

The symbols in the font a based on the Unicode Standard reference symbols. I waive all copyright to the font and release it into the 🅮 public domain.

This font is a good example of the compression innovations that went into WOFF2. You can provide both fonts as an option, as shown in the code example below, and newer browsers will download the smaller WOFF2 file. Older browsers will need to download double the amount of data for the WOFF version.

To incorporate this fallback font on a website, you’ll need to define a font-face and apply it to an element on your page, e.g. the body element. You’ll then be able to use the characters anywhere on the page. The following example defines a font-face called “CCSymbols”, instructs the browser where to download the font files (the src property), and what characters are included in the font (the unicode-range property).

@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url(CCSymbols.woff2) format(woff2),
       url(CCSymbols.woff)  format(woff);
  unicode-range: u+a9, u+229c,
                 u+1f10d-1f10f,
                 u+1f16d-1f16f;
}

body {
  font-family: Helvetica,
               Arial,
               sans-serif,
               CCSymbols;
}

Browsers will prefer rendering the characters from the named font, followed by any local sans-serif font, and then download the CCSymbols webfont as a last resort for these characters. The font will only be downloaded if any copyright symbol or CC license symbol is found in the document. You can move the CCSymbols font to the front of the list if you want to use the visually-consistent copyright symbol found in the font. Other characters will be rendered from the next option in your font list.

Other existing fonts also incorporate the Creative Commons license symbols. There is even one provided on the CC website and another as part of the Font Awesome icon collection. Neither of these fonts uses the new Unicode 13 character codes and thus won’t render them correctly. These older fonts instead use font-specific private area codes in Unicode that means the characters aren’t interoperable with other Unicode Standard compliant fonts.

The circled CC symbol is a trademark of Creative Commons. As far as I’ve been able to establish, this is the first time that a trademarked symbol has been included in the Unicode Standard.