Michael Großklaus

Collecting some frontend related notes, thoughts, bookmarks and tips.

• all
• accessibility
• animations
• css
• favicons
• grid
• html
• internationalisation
• javascript
• performance
• print
• svg
• typography
• ux
• yaml

1. Fri Nov 18 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

   • css
   • typography

   Fluid type and size calculator

   https://utopia.fyi

2. Mon Mar 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • typography
   • css

   Numbers with same width

   With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):

   font-variant-numeric: tabular-nums;

   This can be helpful for example for tables or when displaying prices below each other.

3. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • typography
   • css

   System fonts

   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;

   or

   font: 1rem/1.2 BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif;

   The shorthand version cannot start with -apple-system!

4. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • typography

   Google Fonts Downloader

   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

5. Sun Jan 12 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • typography

   Reducing the file size of open source 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. […]