Design Blog 1: Fast and Beautiful Fonts

<h1>Design Blog 1: Fast and Beautiful Fonts <h3>Simplicity, Performance and Beauty. <p dir="auto">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: <h2>Web fonts and why they suck <p dir="auto">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”. <h2>System fonts and why they’re awesome <p dir="auto">Most web apps actually don’t need a fancy custom font. Usually it makes sense not to reinvent the wheel and <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">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: <ul> <li><a href="https://medium.design/system-shock-6b1dc6d6596f" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Medium decided to use system fonts <li><a href="https://www.designernews.co/stories/71645-github-now-uses-default-system-font" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Github uses system fonts <li>And <a href="https://github.com/mrmrs/awesome-system-fonts" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">plenty others <p dir="auto">The simplicity of that idea is so powerful that recently it was even adopted by the major browser vendors when they simplified the <a href="https://css-tricks.com/snippets/css/system-font-stack/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">former chaos of various system-fonts: <pre><code>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: <pre><code>font-family: system-ui; <p dir="auto">This is already <a href="https://www.chromestatus.com/feature/5640395337760768" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">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. <p dir="auto">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 <a href="https://github.com/nimiq/fast-font" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">fast-font.css which will become Nimiq’s default font style from now on. <p dir="auto">Stay tuned for further updates regarding the development of Nimiq’s Blockchain protocol and ecosystem.<br /> <pre><code>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. <p dir="auto"><a href="https://nimiq.com" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmNYApV7puRtWjXk7LrBHY13WMH4vA9GiDmVAj8zTNPRp2/nimiq-logo-small.png" alt="Nimiq-Logo" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmNYApV7puRtWjXk7LrBHY13WMH4vA9GiDmVAj8zTNPRp2/nimiq-logo-small.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmNYApV7puRtWjXk7LrBHY13WMH4vA9GiDmVAj8zTNPRp2/nimiq-logo-small.png 2x" /> <p dir="auto"><a href="https://nimiq.com/miner/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Miner | <a href="https://nimiq.com/wallet/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Wallet<br /> <a href="https://medium.com/nimiq-network" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Blog | <a href="https://nimiq.community/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Community Website | <a href="https://discord.gg/cMHemg8" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Discord | <a href="https://t.me/Nimiq" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Telegram<br /> <a href="https://twitter.com/nimiq" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Twitter | <a href="https://github.com/nimiq-network" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">GitHub |<a href="https://bitcointalk.org/index.php?topic=1952324.0" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">BitcoinTalk | <a href="https://nimiq.com/static/images/wechat-qr.png" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">WeChat | <a href="https://www.youtube.com/channel/UCJ1qu3KXwfmkGwBkU8F1jQg" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">YouTube