Why does my choice of typeface degrade the user experience? [closed]

Question

I'm working on a social networking app, first it used Arial 100% and it looked okay. I've since introduced new "cards" similarly to how they're implemented in Instagram, which still looked okay. I've recently switched it over to Playfair Display, but it just looks wrong. I brought back Arial, but this now seemed "unsophisticated" and much worse than before the change. The following is a screenshot of how it is now. How can I improve it and not have it look "wrong"?

Answer 1

Improving on my comment, I would like to make to start by making the absolute contrast between Serif fonts (the small protruding features at the end of the lines), and Sans Serif (literally Without Serif). There are plenty of Sans fonts (fonts without Serifs), strongly associated with the Gothic typeface: Century Gothic, Helvetica, Verdana, Futura, Syntax, etc. Also its important to mention that this is an old fight, even in Stack Exchange communities.

The Serif fonts are typically said (altough still in debate) to be better for printed material, Sans Serif for web material. This is, in short, the conclusion for the source provided in comments by @DasBeasto. There are plenty who disagree and I quote:

Each font has its uses, as may be obvious to you. However, what I will say is that the increasing use of sans-serif fonts in the use of reading (such as blogs, books, and other mediums, particularly that of e-books) is detrimental to the reader.

The fact that serif fonts are undoubtedly easier to read is enough to say that it should be the primary font choice in any setting that requires lengthy reading. Of course, I know that this entire post is in a sans-serif font, but hey, what can I do? At least now, you all know my opinion on the matter!

I disagree with him but that would level us to the point of hypothetical. I tried to find serious studies made about the cognitive load of the use of Fonts. I could only mention an approximation by Alex Poole which does make a comprehensive analysis on the literature on this subject. He concludes:

Finally, we should accept that most reasonably designed typefaces in mainstream use will be equally legible, and that it makes much more sense to argue in favour of serif or sans serif typefaces on aesthetic grounds than on the question of legibility. ( Bernard, 2001 ; Tinker, 1963 )

He includes even an analysis on literature for children where:

Books produced for children are often printed with sans serif text as teachers claim that the simplicity of the letter shapes makes them more recognisable ( Coghill, 1980) , Walker, 2001 ). But studies with child participants have found no difference in their ability to read either style of typeface. ( Coghill, 1980) ; Zachrisson, 1965 , Walker, 2001 )

Hardly one can get to any conclusion from literature. There are claims favoring both sizes or simply none at all. As where small content goes it seems almost ubiquitous that Sans fonts are favored:

Use a standard font—a sans serif font such as Helvetica or Arial is more readable when projected than a serif font such as Times Roman.

, but this might be a product of our modern preference (as opposed to the classical features of Serif). There are studies conducted about the reading speed of both family fonts. Many agree that in the long run Serifs are helpful, others say otherwise being Sans Serif the faster to read.

Conclusion

I think it all boils down to what you need. In your case you want small pieces of text, mostly to be read diagonally. Let's say you are looking for fast information access. By grabbing a comparison I should mention road signs are typically in Sans, as well other public signage. It might be that its just a modern thing or that it has some scientific background behind it. I would also mention that most chat applications rely on Sans Serif fonts. In fact this very site works with Sans.

My recommendation (and by no means definitive) is that you look for what is out there in the Sans world until you get one that fits. Depending on the typical size of the text area this might mean you need a font that behaves correctly in wider or tighter spaces (sometimes the lack of use of the whole of the text areas will leave an unappealing look in software, check if this is what is causing you a bizarre feeling of weird).

Answer 2

Playfair Display is a display font (the clue's in the name!) which means it's designed to be used in big titles or situations where you want heavily stylised text - logos, pull quotes etc.

Although Facebook, Twitter and Instagram all predominantly use sans-serif fonts, serif fonts can still work well but generally give a more classic feeling. Pairing a serif for headers and a sans for body copy also works well.

Have a look at some font pairings for inspiration.

Answer 3

Typography is a big subject and takes time to learn, and there is more to typography than Serif and Sans-Serif.

Irrespective the Sans/Sans-Serif, all typefaces have different x-height, and x-height plays a big part in readability.

Definition: In typography, x-height is the distance between the baseline of a line of type and tops of the main body of lower case letters (i.e. excluding ascenders or descenders). The x-height is a factor in typeface identification and readability.

However, other aspects of typography can be employed to enhance readability. For example, line height, kerning, etc. You can even mix Sans and Sans-Serif in a design, without sacrificing readability.

The bottom line is you can make a web site/application look beautiful and easy to read using Serif fonts.

As others have mentioned here, the web has adopted Sans-Serif as their preferred typeface mainly because many people think it looks more "modern" - which of course is nonsense.

For dense web applications I would probably recommend Sans-Serif using a font with a good x-height, mainly because most text is small and the text is limited to simple one or two word titles, labels and data. Dense Web Applications don't usually have multi-line paragraphs of text.

Typography is a subject that has been around for a very long time.