Introduction to Subsetting
Using MyFonts’ webfont kit builder, it’s possible to create a version of the webfont that includes only a partial selection of the font’s glyphs. This might sound like a strange idea – why intentionally cut out half or more of a font’s characters? Read on for our introduction to Subsetting.
Subsetting is the process of selecting the most essential information from any type of digital file before it is sent to be read by the recipient. What this means for web typography, is that we can create versions of our webfont files that contain only the most important characters for the page that the viewer is visiting.
Most font files contain many more glyphs than average day-to-day users generally need, such as accented characters for European languages, specialist punctuation and math symbols, alternate characters and ornamental variations (in extended OpenType fonts, for example). For a website communicating in English using the basic Latin character set, a font file chock full of these extras will simply be too large in terms of file size, slowing down page load times unnecessarily as the font is sent to the browser, which then has to sift through all the extraneous stuff to get to the characters it needs.
Streamline page loading
The first page a user sees should appear almost instantly – loading bars or large swathes of blank page will see your bounce rate soar beyond redemption. A lean, subsetted font file will make a noticeable difference to how quickly that first page loads, especially for users on mobile devices. Using the kit builder on the webfont download page, create a subset which only includes the characters most probable to appear on your page.
The choices are restricted to just Latin and Western European characters, and standard ASCII. Choosing standard ASCII will result in a much smaller file of around 128 glyphs; 26 uppercase, 26 lowercase, 10 digits, 33 punctuation marks and 33 largely obsolete control characters. There are no accents, umlauts or currency symbols other than the dollar, so use this option with caution (see below). For most purposes, the Latin and Western European set will create a reasonably small file while containing more than the bare essentials.
Specify the subset webfont (which will be smaller) as first in your fontstack, then the full (larger) webfont. The browser will only load the larger webfont when the document includes characters not included in the subset webfont.
Creating a custom subset
The custom option allows the designer to enter any string of characters into a box. The subset webfont will then only contain those characters. This option will be useful for pages with single, static headlines or calls to action (like a telephone number — good for search engines) set in the webfont. Copy and paste the text into the field, remove any duplicates, save your kit with a new name and build it into a new headline class in your CSS.
Look out for missing characters
Before you ruthlessly expunge all the weird, foreign-looking letters from your webfont kit, be sure to review your text and content plan. You might not be using accented characters right now, but if you have a lot of text on your homepage that changes regularly, who knows when you might want to blog about how the new French Café downtown is great for nomadic workers. If that glyph hasn’t been included in your font at all, then the browser will look in your font stack for the next available specified font. Failing that, it will use the first system font it comes across. Probably Times New Roman.
Seeing a TNR é in your line of Museo Sans could be quite disturbing, but it’s easily prevented. Be sure to include a full font further down in your font stack, behind your special subsets but before the generic system fallbacks, and the browser will only call on it in the event of that glyph appearing in your text.
Getting creative with subsets
Subsetting isn’t just a practical policy — with a bit of playing around, we can substitute individual characters, create versions of webfonts for different languages and make use of specialist typographic features like small caps and lining figures while we wait for browsers to catch up with the possibilities of OpenType programming. All this coming up in a later article on advanced subsetting.Back...
Posted 29 Sep, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
A Guide to Using Illustrative Type on the Web
Fonts designed to look as if they were drawn, written or printed by hand — as if, in fact,…
Getting Started with Font Stacks
A font stack is the instruction in a page of CSS code that tells a browser what fonts to display,…
Layering Type with CSS Z-index
Create colorful standout text effects by using the CSS properties z-index and position to layer…