Skip to content

Instantly share code, notes, and snippets.

@ricealexander

ricealexander/adobe-fonts-bad-quality.md

Last active November 22, 2020 21:09
Show Gist options
  • Save ricealexander/2924982e0b78f8b811b629dfa8a83d25 to your computer and use it in GitHub Desktop.
Save ricealexander/2924982e0b78f8b811b629dfa8a83d25 to your computer and use it in GitHub Desktop.
Download ZIP
Adobe Fonts fonts may display poorly on non-retina devices. Here's a collection of examples
Raw
adobe-fonts-bad-quality.md

Adobe Fonts display Errors

A while back, I noticed that the fonts in our Typekit subscription displayed poorly at many many sizes.

I mapped out font/weight combinations for the font Acumin Pro across 25 font-sizes and all 9 weights, and noticed that a shocking 41% of font/weight combinations had noticeable distortions, particularly around the characters a, e, s.

The font Utopia Std also had distortions at multiple sizes, though not as many as Acumin Pro.

Both Acumin and Utopia were made by the Adobe Originals font foundry and can only, per their LICENSE, be served via Adobe Fonts (Typekit). As I continue to visit websites, fonts with artifacts around a, e, and s stick out like a sore thumb and I take the time to inspect them. They're almost all by Adobe Originals, and every instance I've seen has been served with Adobe Fonts.

This collection exists because I couldn't find any other documentation online about the display errors of one of the most popular Webfont products on the web.

I have some leading theories:

  • Adobe Originals foundry optimizes for Adobe Products, which may have a custom font-smoothing engine. Non-Adobe Products would then have potential display issues. (There are non-Adobe Originals fonts served by Typekit which do have this issue)

  • Typekit is optimized to serve retina devices / Mac devices / Mobile devices. The standard-sized Windows desktop experience is not a priority, so it has display issues.

  • Adobe Fonts isn't optimized for the web? Simply, if Adobe Fonts is optimized for Adobe Products and other applications, its use as a webfont could be an afterthought. A test for this theory would be to put together a sample site which uses Adobe Fonts to serve a font with distortions and then self-host the same font. This violates the license of any Adobe Originals font, but would provide much insight.

@ricealexander
Copy link
Author

ricealexander commented Nov 10, 2020 •
edited
Loading

Proxima Nova on CBS News

Artifacts are seen on the characters A, a, e, f, s

proxima-nova-poor-display

@ricealexander
Copy link
Author

ricealexander commented Nov 13, 2020

Adobe CC Desktop Interface

Artifacts are seen on the characters a and e of the "Update" button. The other characters on this button are not crisp

adobe-cc-desktop-update-text-distortions

@ricealexander
Copy link
Author

ricealexander commented Nov 13, 2020 •
edited
Loading

Acumin Pro Size/Weight Combinations and Distortions

green means font displays without distortion; red means artifacts are present.

92 of the 225 combinations display poorly (40.89%)

By charting this out, we were able to switch from 400w and 700w for our font weights to 300w and 600w for a significant and immediately-noticeable improvement of the quality of type on our site.

font-weight-combinations-for-acumin-pro

@ricealexander
Copy link
Author

ricealexander commented Nov 22, 2020

DDG Proxima Nova on DuckDuckGo

These fonts aren't served over Typekit, but it's a variant of Proxima Nova, an example above. This would suggest that it may not be a problem with Typekit, but further exploration is warranted

duckduckgo-blog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment