Tiny CSS for Nativity

Here’s a screenshot of the Visual Studio Code UI.

Visual Studio Code

Here are couple of more. Can you find what they share in common?

From left top to bottom right — Github, Medium, My Website, JSBin

Did you find it yet?

They all share the same font family. Yeah! Go back and check.

They might look slightly different but they all mean to do same thing — bring in native look.

More than a year ago I wrote about this and it’s amazing to see this trick being used at many places. I first stumbled upon it while inspecting elements here on Medium.

The Need

Electron made apps built using HTML, CSS & JS wildly popular. Apps that can run on any platform.

Build cross platform desktop apps with JavaScript, HTML, and CSS

One thing an app of that kind should be able to do is to make itself feel part of the system. It should make the user feel that the app is specifically built for their OS and a great part of that is to make sure the UI blends in.

Electron does the heavy lifting of creating native menus and app shell in general. It’s now the job of the app developer to make the UI feel part of the OS. One of the easiest ways to do so is to leverage the system fonts.

How Does It Work?

Here’s the piece of code.

body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}

It’s a simple stack of fonts that tries to accommodate the majority of the operating systems.

Examples —

  • Segoe UI is used in Windows.
  • Roboto is Android default and used in other Google places.
  • Ubuntu is for yeah! Ubuntu and it’s derivatives.

If you are using an OS that, for some reason, doesn’t have any of those fonts, it’s gonna fallback to whatever the default sans-serif family is. Neat!

The Benefits

Even the monkeys know that loading fonts has cost. It has to be sent over the wire to your website and at times you are gonna see a flash of default font styles before your favourite font loads.

Using the above font-family value, you…

  • Avoid loading a custom font. So less HTTP requests. At least till HTTP2 takes over which still has time.
  • Reduce your overall asset bundle size.
  • Bring in the native look to your UI instantly, for all platforms.
  • Force designers to look beyond a particular font when designing a system.

Should I Use It Everywhere?

No!

Fonts are great and they are core part of the experience you provide to a user. Not every website has the need to look native.

You should consider this font stack if you are developing an app as opposed to a portfolio or marketing site. In those places, you should try to be as creative as possible. Use a font that goes with your idea.

Read this for an even deep dive into this whole technique.

Think otherwise? Let me know in comments.

Show your support

Clapping shows how much you appreciated Praveen Puglia’s story.