Serif Fonts Vs. Sans Serif Fonts: A Working Case Study

The standard style for most content on the Web is sans serif fonts, such as Arial or Verdana. And this is sensibly the case for a number of reasons: sans serif fonts are easier to read on-screen, they look pretty good when their size is reduced, and they tend to retain their visual appeal across different platforms and browsers.

Serif fonts are used for titles and subtitles on many sites and that can lend a nice effect on heavily sans serif pages. But does it ever work to use serif fonts for the main content? There are a limited number of sites that I could find that do this successfully, one being Cameron Moll’s blog. There are few more sites with serif fonts listed in this Webpage Design for Designers post by David Rodriguez, “Don’t Be Afraid of Serif Fonts.” While I like the way it looks when the serif font suits the layout and design, I admit that it takes a few seconds for my eyes to get used to reading the copy on these sites.

The Case Study

This leads me to my current issue. I’ve considered using a serif font on a site I’m working on, but I’m not completely convinced I should go that route. There are a few reasons why this has been an option on this particular site:

  1. It’s the client’s preference.
  2. It suits the company’s services (publishing support).
  3. It may work well with the design.

I’ve created two test pages so you can see what I mean with #2 and #3 above. Here are the details and a couple of screen shots (click to enlarge).

Serif Fonts Vs. Sans Serif Fonts: A Working Case Study

Live site:
Font: Arial
H1: 22px
H2: 18px
Body: 12px
Serif Fonts Vs. Sans Serif Fonts: A Working Case Study

Test pages: Home and About Us
Font: Georgia
H1: 22px
H2: 18px
Body: 12px

These screen shots were taken on my Mac, but I’ve looked on a PC, too, and the test pages look noticeably different (see below).
Serif Fonts Vs. Sans Serif Fonts: A Working Case Study

Overall, I love the way Georgia looks with this design, particularly on my Mac, but I’m not completely convinced it’s the way to go. My concern is maintaining aesthetics across platforms, which is easier accomplished with sans serif fonts, especially when a Windows user doesn’t have ClearType enabled on their PC. But what’s your take? Are their any other pros or cons for using a serif font?


Category: other Time: 2009-03-18 Views: 3

Related post

  • luaotfload can't find font "CMU Sans Serif Demi Condensed" 2011-03-30

    Luaotfload has problems finding a font that is installed in my texmf tree. The source: \input luaotfload.sty \font\myfont={CMU Sans Serif Demi Condensed} at 10pt \myfont foo \bye The font is in texmf-dist/fonts/opentype/public/cm-unicode/cmunssdc.otf

  • Serif vs. Sans Serif 2014-06-25

    For text-heavy pages on the web, is there evidence to suggest that serif fonts are a better option? The studies I've found seem very murky in pointing one way or another indicating that yes, users read serif fonts quicker but they're not more legible

  • How to switch easily between normal font and sans-serif font for maths? 2013-10-15

    I would like to switch easily to sans-serif font, even for the mathematical symbols. Is it possible? So far is what I have tried : \documentclass{article} \def\mySfFamily{\fontfamily{cmbr}\selectfont\sffamily} \def\N{\mathbf{N}} \def\R{\mathbf{R}} \d

  • What is the latest research on Serif vs. Sans Serif fonts for readability and retention esp. for those with vision issues 2015-03-03

    I've been told by someone who worked with a researcher that Sans Serif fonts have lots of ambiguity in things like i, 1, l and this causes the eye to need to back and forth (more, presumably than the usual saccades). The evaluation criteria is: * Rea

  • XCharter font changes sans serif font as well 2016-06-22

    I'm trying to use XCharter font for regular text and gillius2 as sans font. Either font works fine when used individually. But when used together, the final document doesn't display sans serif font at all (or for that matter mono font as well). There

  • Why is my system (Ubuntu) using FreeSans font for sans-serif/arial/helvetica web rendering? 2010-08-18

    Recently, I noticed that my web browsers (Chrome, Firefox) are using a strange font for all the sans-serif/helvetica/arial/etc. text. I believe it's FreeSans, after inspecting a bunch of fonts. It looks "boxier" than what I believe was the origi

  • Changing Number Font Into Sans Serif 2014-06-16

    I want to use Libertine Sans Serif numbers (only numbers) in math font. Can i get this result using a command like this: \DeclareSymbolFont{numbers}{T1}{libertine}{m}{n} \SetSymbolFont{numbers}{bold}{T1}{libertine}{bx}{n} \DeclareMathSymbol{0}\mathal

  • Is there a sans-serif font that appears different for I (capital i) and l (small L)? 2011-12-29

    Is there a sans-serif font that appears different for I and l? If we are not familiar with "Kim Jong Il", we might spell his name as Kim Jong Two or other incorrect ones. --------------Solutions------------- From the LaTeX2e Font Catalogue: Sans

  • Force font to computer modern (serif) in math mode although it is set to sans serif 2012-01-26

    I set my font to sans serif via \renewcommand{\familydefault}{\sfdefault} \usepackage{helvet,sfmath} Now I want to use some symbols -not all- (only normal letters or greek letters) from the standard computer modern math font in mathmode. Unfortunatly

  • Bold sans-serif font in LaTeX 2012-03-21

    How can one format a chapter or section heading in bold using a sans-serif font? I tried \textsf{\textbf{bold sans-serif text}}, but it does not seem to work. Any idea? --------------Solutions------------- It looks like you are trying to change the s

  • Switching fonts in section titles while maintaining a serif/sans-serif distinction for ToC vs. title itself 2012-07-29

    The solution to this problem is probably something absurdly simple, but I'm too stupid to see it - Consider a document written in blackletter. German blackletter typography rules require latin words and uppercase abbreviations to be set in antiqua. I

  • What are the more respected sans serif fonts that come standard on most computers? 2013-01-21

    I've been tasked with making a powerpoint theme for the company I work for and one of the requirements is that it uses a font that comes standard with most computers. What are some of the built-in sans serif fonts that graphic designers respect and u

  • Problem with sans serif font in Komascript 2013-10-27

    I want to make a complex, custom titlepage with graphics etc. (I don't see that using the default template is an option). I want to use the "TeX Gyre Pagella" serif font (-> for the "normal&quo

  • Is there a better way than sans-serif font to separate captions from the document? 2014-05-08

    Scope This is a question about looks in a written document. I has nothing to do with LaTeX, although I create my documents with that. Is this the right site then? Current state I write lab reports and other documents where I have to include a lot of

  • pgfplots: Using Sans Serif Fonts for Numbers and Text (not Variables) in Figures and Diagrams 2014-06-21

    I want to use a sans serif font in figures and diagrams. This also applies to tables (related question). The normal text should remain roman (with serif). Here is the normal way one would try to achieve this: Solution 1 (not perfect) \documentclass[]

  • Does fouriernc contain sans serif fonts? 2015-07-05

    Does fouriernc contain sans serif font? If not, which type is actually used for it? Is this type scalable? My problem shows not so minimal working example: \documentclass{memoir} \usepackage{fouriernc} \usepackage[T1]{fontenc} \usepackage[utf8]{input

  • How do I find sans/serif pairs of fonts? 2015-10-13

    A particular project I'm working on (a house style) will need a serif/sans pair of fonts. Currently, I'm at the "Identify some possibles" stage, but I'm not asking for suggestions. Examples of the sort of pairs I mean are Calluna and Calluna San

  • Why not use san-serif fonts on print design? 2011-03-10

    It's better to use san-serif than serif fonts on web, as their simpler letter form remain readable at low resolution. Serif fonts need more pixels to display their extra details. I was wondering why I seldom see any san-serif fonts for body text on p

  • How do I switch all fonts in a document to a sans-serif family? 2012-09-26

    Possible Duplicate: Simplest way to typeset entire document in sans serif (Helvetica) I use document class article and included \usepackage{helvet} I now begin my document with \begin{document} \sf % select sans-serif family % ... text here ... Most

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.968 (s). 13 q(s)