Web Design: Serif or Sans-Serif?

By Xah Lee. Date: . Last updated: .

A survey of top web site's design choices.

wall street journal front page 2017 03 21

Serif body text

The following sites use serif font for body text.

It's commonly thought that serif is more readable. However, if you do research, you'll find that scientific evidence are inconclusive.

sans-serif body text

Vast majority of websites are still sans-serif.

  1. USA TODAY http://www.usatoday.com/
  2. wikipedia List of newspapers in the United States by circulation
  3. cosmopolitan mag. http://www.cosmopolitan.com/
  4. google.com
  5. https://facebook.com
  6. https://youtube.com
  7. https://baidu.com
  8. https://yahoo.com
  9. https://amazon.com
  10. https://twitter.com
  11. https://ebay.com
  12. https://pinterest.com
  13. https://reddit.com

Title Text Font

Fixed Layout or Flow?

the New York Times uses a fixed design. That is, if you change window size, and when your window width is smaller than 1000px, then, text will disappear, you'll need to scroll horizontally.

{Wall Street Journal, Washington Post, Los Angeles Times}, they are all “responsive design”. The layout reflows even when your window width is like a cell phone sized.

[see Web Design: Fixed-Layout vs Flowed-Layout]

Text Logo Image or Text?

Some of the journals, use complex gothic font as their logos, like

𝕬 𝕭 𝕮

[see Math Font ℤ ℚ ℝ ℂ]

so, do they design their own? or use Google Webfont, or use image, or SVG?

so that means, SVG is now mature.

[see Practical SVG Tutorial]

Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.