Design is a first class citizen at STRATZ. We take great care to ensure that your content, however sophisticated it may be, is presented as simply and thoughtfully as possible. This devotion has led to a series of major revisions over the years, the previously most recent update being to our palette.
Today, we introduce the 4th, and perhaps final, major typography update to STRATZ. We put great care into ensuring that this change addresses all of the concerns, both present and future, that we can currently envision. We hope you love it. Now here’s Fantôme to fill you in on the details!
Typography is a facet of design that often goes unappreciated. Consciously, we don’t often put thought into the art behind the letterforms we read. Unconsciously though, they have a huge impact on the experiences we have with our content.
At STRATZ, we have less long-form copy than many sites, but that doesn’t make typography less important. Every stat, every label, every number you read, is given life by the shape of the glyphs in its given typeface family. And how well you’re able to parse these stats is dependent on the clarity of the letterforms chosen.
Until today, we have used the system default typeface to render all type on STRATZ.com. This has come with a number of advantages: instant load time, general expectation of clarity (since system typefaces tend to be simple and unobtrusive), and wide-ranging language support. Since many non-Latin alphabets [such as Chinese and Cyrillic] are prevalent amongst the Dota community, it’s important that we give these character sets equal priority.
Despite these advantages, relying on system defaults has its share of disadvantages. Because every major operating system uses their own typeface, we can’t know exactly how our interfaces are going to look on your system at home. Subtle differences in letter weight and character size become legibility issues on the macro scale.
Unifying the STRATZ experience with a single typeface has been a long time in the making, but we’re proud to announce it’s complete. After extensive testing and refining a new set of typographic rules and styles, we poured over every piece of the STRATZ website, implementing the required changes to bring the new typeface to life.
So without further ado, let’s get into the benefits of this new style!
Accessibility was at the forefront of our minds when selecting our new typeface. Similar-looking characters like lowercase “l” and uppercase “I,” or uppercase “O” and the number “0” can create issues of comprehension. These issues are compounded for users who are low-vision or have other reading difficulties.
After testing a wide range of typefaces, we settled on Noto Sans. Noto is a project by Google with the intent to support every written language in the world with visual harmony. This means that the site will look great in all languages and alphabets we support.
Another benefit of Noto is the large x-heights of the letterforms. In typography, x-height refers to the space between the baseline and the top of the lowercase letter “x.” This is one of the most important regions of a glyph, since the vast majority of lowercase letters fall within this range. Having a taller x-height makes the letters appear larger and more open, even when the point size remains small.
Further changes include simplifying our type styles and redefining rules on bold. Noto is thinner than the semibold style we were using, which means a significant amount of the stats and copy across the site have become more open and readable at smaller point sizes.
The final type-related changes involve refinements to colour. We removed gradients from all small point type, and reduced the intensity of our primary white text color. Both of these changes are aimed at reducing eye strain and improving the sharpness of letterforms for legibility.
Next week, our team will be back in full force following some much needed rest, which will allow us to return to the major update we were teasing you with at the end of 2021. Onward!
Enjoy keeping up with what’s happening at STRATZ? Follow us on Medium, Twitter, or Facebook to get notifications of our latest Supdates! If you want to get more involved, join us on Discord!
Did you miss our last Supdate? Join us as we reflect on how much we achieved in 2021!
See you soon!
