logo

Web UI 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 browser fonts are Arial, Helvetica, Times and Times New Roman. To replace those fonts, we can start by setting the default font to a System font. System fonts are a safe bet: -apple-system and BlinkMacSystemFont for iOS and macOS, Roboto for Android, and Segoe UI for Windows.

But It's best to have two different fonts: one font for body text, and one font for headings. For body text, you can pick a serif font such as Merriweather, or a sans-serif font such as Open Sans, Roboto or Source Sans Pro. Open Sans is a popular choice but is a bit overused. For headings, Roboto is a solid choice. As a variation you can pick Avenir.

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 headings is 700 or "bold" and is usually fine. Alternatively, you can opt-in for thicker headers, with 900 font weight.

Font size

The default font size for body text is 16px. It's a bit too small. It's better to use 18px (12.5% bigger), or even 20px (25% bigger). This blog uses 18px (1.125rem). For mobiles, the default font size 16 px is fine. This blog uses 16.5 px on mobiles.

Headings have a bigger size than body text. The <h1> heading default size is twice as big as body text. It is defined as 2em. The <h2> heading size is set to 1.5 em. Each subsequent heading has a smaller size, and the smallest headings are smaller than body text. The biggest heading is only 2 times bigger than body text. This is good because regular headings should keep a reasonable size.

Text 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. This blog uses 900px and it's not ideal.

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. This blog uses 1.7 em.

Text Color

The default text color is pure black (#000). Dark grey is a better choice as it reduces the contrast with the white background. A slight blue tint can improve the overall aspect. This blog uses a blueish dark grey: rbg(40 42 54).

The default text color for links is pure blue (#0000FF). It is a poor color that is associated with amateurish websites. Google uses a slightly darker blue: (#1a0dab). Google blue is better, but can still feel a bit "stock". (#150a86) is a slightly darker blue that doesn't have the Google feeling attached to it.

Spacing

The default space between two paragraphs is 1em. A space greater than 1.2 em creates a better reading experience as it gives a bit more room to the text. This blog uses 1.2 em as paragraph spacing.

By default, headings spacing with their surrounding elements is symmetric. This means the heading is as close to the previous paragraph as it is close to the next one. It's better to shift this spacing, so that the heading is closer to the next paragraph, while being a bit more distant from the previous paragraph. To do that, we increase the margin before the heading, and decrease the margin after the heading.

Horizontal Rule

The horizontal rule creates a semantic break between two topics or two different parts of the page. It is drawn as a horizontal line.

The default horizontal rule is 2 pixel tall, and is made of two colors: dark gray at the top and light gray at the bottom. It is decent but can be refined as a thinner 1 pixel tall border, and as a rgba(0, 0, 0, 0.1) subtle gray.

The default vertical spacing around the horizontal rule is set to 8 pixel on each side. As a result, the default horizontal rule takes no more room than a regular line of body text. It's better to increase the spacing up to 27 pixel on each side, to create more room.

More

For reference, the styling defaults for the Chrome browser can be found here: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css Those are the basic settings that apply when no CSS is provided. This is derived from webkit and very similar to it. As such, Chrome and Safari have a very similar render engine.