CSS
CSS Primer: Fonts and text
Default Fonts. Generic Font Family. Font Family. System UI Fonts.
Published in
4 min readJul 3, 2019
The first font I used in my web programme was probably Times. It wasn’t my favourite. It was the default font in my browser, and I was using Chrome browser to output the text “Hello World”.
Default Fonts
Text get rendered in the default standard font on browsers when we don’t specify any font in our CSS.
Generic Font Family
When a generic font family is specified, such as Sans-serif, text will be rendered in the default Sans-serif font, which is in Helvetica on my browser.
To confirm this, open your programme/website in Chrome, and launch your Chrome DevTools (refer to my previous post on DevTools if you are not familiar with using it). Under rendered fonts, you’ll see that the browser is using Helvetica to display the text.
