Some weeks ago, while developing a custom typeface for a client, I was asked about adjusting the position and thickness of the underlines and strikethroughs. I knew it was possible to customize these values in Glyphs, Fontlab or any other font editor. But honestly, I didn’t usually bother to configure them because I knew they weren’t really enforced by most graphic software. This was a custom project, so fine-tuned underlines and strikethroughs could potentially save my client from a few headaches when typesetting documents. With that in mind, I decided to investigate further.
The technical stuff
OpenType (CFF and TrueType) have 4 parameters we can customize: underlinePosition, underlineThickness, yStrikeoutSize and yStrikeoutPosition. In Glyphs, they are represented as master’s custom parameters with slightly different names:
On export, they will be translated to the correct OpenType tables. As a bonus, they will even be interpolated if we have different values for different masters. That’s nice. However, are these values really enforced outside our font editors? The specs for underlines and strikethroughs treat them as suggestions, so it is up to the software to use them or not. On the other hand, if a type designer bothered to set values for these parameters, I strongly believe the software should honor them.
Testing
I’ve put underlines and strikethroughs to test on all graphic software I had access to, which included:
- Adobe InDesign CC 2018
- Adobe Illustrator CC 2018
- Adobe Photoshop CC 2018
- CorelDRAW X8
- Affinity Designer 1.6.1
- Microsoft Word 2016 (Mac)
- Microsoft Word 2010 (PC)
- Apple Pages 7.1
I’ve also tested this on a selection of desktop browsers (Chrome, Firefox, Edge, Safari and Opera). To ensure consistency and eliminate any font cache problems, the browser tests were performed using Impallari’s Font Testing Page, which I highly recommend if you’re in the business of designing fonts.
Adobe InDesign and Illustrator
As far as I can tell, InDesign and Illustrator support is tricky and comes with a couple of caveats.
First, the underline position is miscalculated. According to the specifications, the underline position represents “the distance of the top of the underline from the baseline (negative values indicate below baseline)”. Instead, InDesign and Illustrator measure the position of the underline from the baseline to the center of the stroke, which results in it being closer to the baseline than it should be. This means we have to decide where we want our underlines looking best: on Adobe’s or on every other software.
Also, the strikethrough thickness value is ignored and the underline thickness is used instead. This isn’t a big deal, as we generally want them to be the same size. However, strikethrough in Adobe InDesign is a mess. Not only it ignores the strikethrough position set in the font file, it uses an arbitrary position which is much higher than ideal. I believe this is because InDesign actually allows the user to customize every little detail of the strikethrough, but I see no reason why the default shouldn’t match the font designer’s choice.
Adobe Photoshop
Known for poor typography, Adobe Photoshop completely ignores all values. The underline position is way lower than any other software. The default size and position for the strikethrough are decent, but they are not customizable by the user.
CorelDRAW X8
The user can select from a few predefined underlines and strikethroughs, like thin, double and thick. Unfortunately, none of them takes in consideration the positioning and thickness parameters present in the font file. Bummer.
Affinity Designer
This is where things start to get better. Affinity software renders underlines and strikethroughs just right, following the specs exactly. I’ve been using their software for a couple of years now for all of Harbor Type graphic needs. Being a relatively new player in the area, Affinity can definitely afford to make things right from the start.
Microsoft Word
I was really surprised to find that Microsoft Word, a piece of software famous for lagging behind its competition when dealing with advanced typography, actually renders both underline and strikethrough exactly as the specs. Even the ancient 2010 version does it. Maybe this is because Microsoft takes a huge role in developing TrueType and OpenType formats and they actually host the specifications on their website to this day. A pleasant surprise nonetheless.
Microsoft Word for Mac behaves a little differently, though. It supports underline position and size, but only if the position has a negative value. If the position is positive, both position and size will break. Strikethrough works fine.
Apple Pages
Like the Mac version of Microsoft Word, Pages expects the underline position to be a negative value. As far as I can tell, it will always render the underline below the baseline, which is not 100% correct but shouldn’t cause any problems. Underline thickness works correctly, but strikethrough preferences are not supported at all.
Chrome 67, Opera 54 and Safari 11
These browsers ignore the font’s settings and use their default values for underlines and strikethroughs instead. Chrome and Opera use particularly thick strokes. Combined, these three browsers have a huge market share (especially on mobile), so any adjustments for underlines and strikethroughs most likely won’t be shown to the the majority of people online.
Update 9 July 2018: I’ve recently watched a TYPO Labs 2018 video in which Dominik Röttsches talks a little bit more about coming changes to Google Chrome. He says the CSS Working Group has proposed a couple of new CSS properties which would allow web designers to customize the thickness and distance of the underline. These properties are called text-underline-offset and text-decoration-width and they would both accept auto | from-font | <length> as values. The default would be auto, which would essentially keep things as they are today and wouldn’t break things. Maybe in the future they will flip the switch and start using the font values as default. It’s worth noting this is still part of a proposal for CSS4, so there’s still some time before we can use it.
Firefox 61 and Edge 42
Mozilla recently launched Quantum, a new rendering engine for its Firefox browser. In regards of underlines and strokes, they definitely did a good job. All properties are supported and rendered correctly. And being a Microsoft browser, Edge also follows the specs to the letter. Nice!
Summary
| underline | strikethrough | |||
|---|---|---|---|---|
| thickness | position | thickness | position | |
| Adobe InDesign | ✓ | ✓¹ | ✓² | ✗ |
| Adobe Illustrator | ✓ | ✓¹ | ✓² | ✗ |
| Adobe Photoshop | ✗ | ✗ | ✗ | ✗ |
| CorelDRAW | ✗ | ✗ | ✗ | ✗ |
| Affinity Designer | ✓ | ✓ | ✓ | ✓ |
| Microsoft Word | ✓ | ✓ | ✓ | ✓ |
| Microsoft Word for Mac | ✓³ | ✓³ | ✓ | ✓ |
| Apple Pages | ✓ | ✓³ | ✗ | ✗ |
| Chrome | ✗ | ✗ | ✗ | ✗ |
| Opera | ✗ | ✗ | ✗ | ✗ |
| Safari | ✗ | ✗ | ✗ | ✗ |
| Firefox | ✓ | ✓ | ✓ | ✓ |
| Edge | ✓ | ✓ | ✓ | ✓ |
¹ Position is miscalculated.
² Uses the underline thickness instead.
³ Underline position must be a negative value.
I honestly expected underlines and strikethroughs to be completely ignored by most applications, but I was proved wrong. Except on Adobe apps. Not only with typography, functionality in general between Adobe software is highly fragmented. They have been working to remedy that with the Creative Cloud suite, especially now with experimental support for variable fonts and a push from the industry to make OpenType features more accessible to users. This is good, however there is still a lot of elementary stuff that needs to be fixed.
Edited in 9 July 2018: updated information about Google Chrome’s support for underline offset and thickness as presented by Dominik Röttsches at TYPO Labs 2018.