Collecting some frontend related notes, thoughts, bookmarks and tips.
With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):
This can be helpful for example for tables or when displaying prices below each other.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
font: 1rem/1.2 BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
The shorthand version cannot start with
Google Fonts can and should be served locally instead of from google. This tool can be used to download the font files: https://google-webfonts-helper.herokuapp.com/fonts
I was recently working on the relaunch of my website and wanted to include the open source font Inter. Unfortunately, even the woff2 versions of each different font style were at least 100kb large. As I wanted to use three font styles, this was, of course, way too much. […]