Design Blog 1: Fast and Beautiful Fonts

nimiq (31)in #nimiq • 7 years ago (edited)

luna badge.png

Design Blog 1: Fast and Beautiful Fonts

Simplicity, Performance and Beauty.

On our road to Nimiq Mainnet launch we encounter lots of interesting engineering and design problems. We thought it might be valuable to share our most interesting experiences and approaches in a blog style format. This is part 1:

Web fonts and why they suck

When you design a web app and you care about user experience you usually start by choosing a beautiful font. Though you actually don’t want a web font if you also care about performance, because on the current web platform there is no easy way to include a web font which doesn’t drastically slow down your startup time since your browser needs to download the font from somewhere before it can start rendering any content. Especially on slow connections this is like: “Choose one: Design or Performance”.

System fonts and why they’re awesome

Most web apps actually don’t need a fancy custom font. Usually it makes sense not to reinvent the wheel and just use system fonts like “Roboto” (current Android) or “SanFrancisco”(current iOS) because those fonts don’t need to be downloaded and they’re exactly what users are used to from their system. This idea is as simple as it is good and in recent years many big companies shifted from web fonts to a system font stack which improves both performance and design:

The simplicity of that idea is so powerful that recently it was even adopted by the major browser vendors when they simplified the former chaos of various system-fonts:

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, 
“Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, 
Helvetica, Arial, sans-serif;

into a single, handy new command:

font-family: system-ui;

This is already available on Chrome, Safari, Firefox and Opera but in practice you still need backward compatibility so you actually can’t yet get rid of the mess of other declarations. Nevertheless the general approach of using system fonts is simple and it drastically improves loading time without sacrificing the beauty of a modern font.

This fits perfectly our need for fast and beautiful typography across the Nimiq ecosystem of Blockchain applications. Therefore we’ve created a very condensed snipped called fast-font.css which will become Nimiq’s default font style from now on.

Stay tuned for further updates regarding the development of Nimiq’s Blockchain protocol and ecosystem.

DISCLAIMER: None of the statements must be viewed as an endorsement or recommendation for Nimiq, any cryptocurrency, or investment product. Neither the information, nor any opinion contained herein constitutes a solicitation or offer by the creators or participants to buy or sell any securities or other financial instruments or provide any investment advice or service.