Promises to Users

People use the internet to consume information, and more often than not that just means reading words on a screen. Too many websites make this harder than it should be. Let's fix that. If we deliver on the following promises to users, the internet will be a much better place.

Font-Size
Font-size is the size of the font measured in px, rem, or em. We promise users text will be large enough to read easily.

Your main copy should be a minimum of 16px.

This is Good

This font is set to 20px, and you can easily read it. If it's larger, there aren't any downsides: everyone will be able to consume your content.

This is Bad

This font is set to 14px. The main goal of your website is to get people to consume your content or perform some action, and it'll be difficult for them to do so if they can't read your text.

Additional Reading

Measure
Measure is the length of a line of text. We promise users to not strain their eyes by making them read across the entire page.

For a single-column design measure should lie between 40 & 80 characters.

This is Good

This paragraph is set to a max-width of 800px which is roughly 75 characters per line (except when viewed on screens smaller than 800px wide). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line which is why good measure increases readability.

This is Bad

Measure can create unity and harmony within a design, but a long measure disrupts the rhythm. If a line of text is too long the user’s eye will have a hard time focusing on the text. This is because too much energy is spent keeping the horizontal line in sight over a long distance. Furthermore it can be difficult to continue from the correct line in large blocks of text.

Additional Reading

Leading
Leading is the distance between baselines of text. We promise users the distance will be set appropriately so large blocks of text will be easy to read.

Titles should be set at a line-height of 1.3. Copy should be set to a line-height of 1.5.

This is Good

Here's a Multi-Line Title that has just Enough Breathing Room in Between the Lines

This paragraph has a line-height of 1.5 which equals 30px (1.5 times its own font-size of 20px). The lines have enough breathing space for the user to feel relaxed but not too much where the lines feel disconnected.

This is Bad

Here's a Multi-Line Title that is More Difficult to Read because it has Too Much Space in Between the Lines

This paragraph has a line-height of 1 which isn't much smaller than the default line-height of most browsers. Lines too narrowly set impair reading speed because the upper and lower line are both taken in by the eye at the same time. Also, descenders and ascenders collide—like the bottom of 'g' and top of 'l'—which makes the block of text feel cramped.

Additional Reading

Text Contrast
Text contrast is the ratio of the luminance of the text color to that of its background. We promise users the ratio will be high enough to see text regardless of vision impairments.

The minimum contrast between main copy and its background should have a ratio of 4.5:1.

This is Good

This text is #000 on a white background which has the maximum text contrast ratio of 21:1. Contrast is measured in a formula that gives a ratio ranging from no contrast, 1:1 to maximum contrast, 21:1.

This is Bad

This text is #999999 on a white background which has a text contrast ratio of 2.8:1. You may be able to read this but people with color blindness or vision impairments, as well as people browsing under less than ideal circumstances such as bad monitors or window reflections might find it more difficult.

Additional Reading

Responsive Images
Responsive Images fit to the width of any viewport. We promise users images will never bleed off the screen regardless of screen width.

Images should be set to max-width:100%.

This is Good

Screen Width: 400px

cute panda

This is Bad

Screen Width: 400px

cute panda

Additional Reading

Conclusion

This is in no way an exhaustive list but it's a good start. These promises are clear and easy to implement. If we consistently deliver on them, we'll make a big impact in making the internet better.