Text Styling Basics<!-- --> - antoineweber.com
logo

Text Styling Basics

- November 12, 2019

Photo by Charisse Kenion on Unsplash

The browser comes with default text styling. The default styling feels bland and amateurish. To create a pleasant user experience and attract the eye of the reader, you must customize and improve the styling.

Font

The default fonts are "Arial", "Helvetica", "Times" and "Times New Roman". It's best to have two different fonts: one font for the body text, and one font for the headings. Fonts like "Open Sans" and "Roboto" are used a lot. As a variation you can pick "Avenir", "Source Sans Pro" for sans-serif, and "Merriweather" as a serif font. System fonts are also an option: "-apple-system" and "BlinkMacSystemFont" for iOS and macOS, "Roboto" for Android, and "Segoe UI" for Windows .

Font weight

The default font weight for body text is 400 or "normal". Sometimes it feels too thick and inelegant. You can use 300 or "light" as a slightly thinner font-weight.

The default font weight for headers is 700 or "bold" and is usually fine. Alternatively, you can opt-in for thicker headers, with 900 font weight.

Width

The text width must be limited on large screens. Else, the text becomes unreasonably large and unpleasant for the reader. A maximum width of 700px is recommended. On mobile, you use the full width of the screen.

Line Height

The default line height is about 1.2 em. It is too small and makes text too condensed. A value between 1.4 and 1.7 em provides for a better legibility