13

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"?

  • 9
    webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle Although I believe headers can be serif – DasBeasto Oct 31 '16 at 20:17
  • Completely agree with @DasBeasto. Sans family fonts seems far better for internet content. Their minimalistic approach does well with several different sizes and usually look better with modern UIs, likely due to their round features (which modern UIs tend to have, including yours). It will look less contrasting with other web content and consequently become more part of the global experience. Its not that I dislike the Serif family (I use it myself) but Its just not fluid enough. Internet users read internet content fast and often partially. Font is important. – armatita Oct 31 '16 at 20:37
  • 2
    @Rob I just saw yours and Devin comment but I really don't get why would a question about typography be outside the realm of User Experience. In fact it seems to me one of the most ancient sciences where user experience is indeed criteria. Is there some major argument against this that I'm missing? – armatita Nov 1 '16 at 11:41
  • 2
    @armatita The question, despite the headline, is about font selection and design. – Rob Nov 1 '16 at 12:29
  • 1
    @Rob Ok, I understand your argument and I can see how quickly these things can follow in the "matter of preference" hole. Still notice that I (as in personally) do not detach those features from User Exp. In the case of this question, although I see how could it be seen as off-topic (by your argument), it still feels at the most in a grey area. The OP concerns seem relevant to me. The font in his screenshot does seem inadequate and detrimental for user experience. I agree his phrasing is a bit outside the best, but the intent is there. I think small edits would remove the problem altogether. – armatita Nov 1 '16 at 14:41
32

Sans vs Serif

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).

  • 2
    This is a great answer, I was going to simply post the Poole research, but your answer is really complete and elaborated, thank you. Sadly, this question will probably be deleted, so I'd suggest if you can find another non-opinionated question to post this answer so it stays :) – Devin Oct 31 '16 at 22:00
  • Hi @Devin , Rob just mentioned more or less the same thing (in the Question comments) but I really don't understand why would this question be out of the scope of UX. – armatita Nov 1 '16 at 11:43
  • Whether the medium is the reason for the difference I cannot say, but I know that serifed fonts were absolutely preferred as far back as my ol' journalism training held for physically printed material, eg material on paper, as the serifs eased the intraletter transition on the eye. Large headlines were, in contrast, rarely serifed. The density of information in a large book, or novel, I think brought home the point of eye fatigue and serifed fonts, whereas single-page web apps tend to mitigate against the fatigue argument. – David W Nov 1 '16 at 18:11
  • @DavidW Perhaps but notice that Alex Poole, in his analysis of available research on the subject, did not arrive to the same conclusion of Serifs somehow being easier to read, or that it increased legibility. In fact he could not make a compelling case for either Serif, or Sans Serif. – armatita Nov 1 '16 at 18:29
  • I think there's a very fine semantic line to be drawn between legibility versus ease of read. I would never expect there to be research showing one or the other is more legible; my contention is that the serifed fonts were preferred in order to reduce eye fatigue over dense material - clearly something that would require more than a web page of text to measure in appreciable terms. Ergonomics specialists are really only now starting to explore this issue as it pertains to eye health IMO. – David W Nov 1 '16 at 18:36
9

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.

  • 1
    Spot on. To add a touch more detail, a few of the features that make Playfair Display unsuitable for body text include the high contrast (the difference between thicks and thins - looks great when the text is large, but the thins almost disappear at small sizes, harming legibility and readability), and the tight kerning and narrow widths (powerful and punchy in small doses on large text, but bad for readability for long lines of text and at small sizes). You need to be careful and prioritise readability when choosing typefaces for body text – user56reinstatemonica8 Nov 1 '16 at 13:06
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.

  • 2
    Sans-serif was used because displays, in the past, could not render the fonts clearly. Displays, today, do a much better job due to higher resolution and that is the reason a move to using serif fonts is more common and with less concern. – Rob Nov 1 '16 at 10:40
  • 1
    @Rob Good point. I am old enough to know those low resolution CRT monitors. – SteveD Nov 1 '16 at 10:44
  • 1
    @SteveD Great call on the kerning tables. Bad spacing can make ANY font look like someone squashed a bug on my screen LOL :) – David W Nov 1 '16 at 18:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.