Mobile app version of vmapp.org
Login or Join
Mendez620

: Titles and Menu items in lowercase, uppercase, serif or sans serif? Im building a new wordpress website and need some input. The question is - should i use lower or uppercase - serif or sans-serif

@Mendez620

Posted in: #Typography #WebsiteDesign

Im building a new wordpress website and need some input. The question is - should i use lower or uppercase - serif or sans-serif for my post titles, widget titles and menu items? Which is the best in terms of readability and focusing of each / important section?

Here are some examples:

Post Title Example / Serif



Post Title Example / Sans-Serif



Widget and Menu Title Example / Serif



Widget and Menu Title Example / Sans-Serif



Or maybe a combination of...?

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Mendez620

4 Comments

Sorted by latest first Latest Oldest Best

 

@Pope1402555

Well, the rule number one for on-screen reading in general is: Smaller sized text should be always sans-serif. Why? Because the serifs become sub-pixel and you can hardly see them, the thin strokes can become almost invisible and various anti-aliasing and hinting methods found in various browsers make the output look different.

So unless you're using a very large base font size, your base font should be a high quality sans-serif web font. (Remark: Arial is not of quite high quality, moreover it's not exactly a free font.)

For headings, you can use whatever you want. For example TeX.SE uses serif font there and it's fine, it gives the site a bit more "print-like" look.

As for uppercase/lowercase: You can uppercase, but with a caution. Make sure that in the headers, you'll never need to distinguish uppercase and lowercase. Two examples of what I mean:


My login name is tohecz and not TOHECZ as in the profile on DYI.SE.
Can you tell me what physical unit is MT in A BRAND NEW 500MT SOLUTION TO ...?

10% popularity Vote Up Vote Down


 

@Speyer780

Which is the best in terms of readability and focusing of each / important section?


Trust your own eyes on that one:

Uppercase sans-serif wins that one hands down.

10% popularity Vote Up Vote Down


 

@Voss6371140

There are no 'rules' for this sort of thing, although there are some things to take into consideration when choosing a style. Personally I would only use fully uppercase to make something stand out, like a menu option or for a really IMPORTANT word in a paragraph.

Use lowercase for everything else.

Thoughts on serif/sans serif, it is completely different for every design. Although I would recommend sticking with Sans Serif for body text and areas where information is. Serif fonts can be used for logos, heading/titles etc.

Mostly it is up to you and your design wants/needs/likes.

Hope this helps.

10% popularity Vote Up Vote Down


 

@Lengel450

I don't think there are any absolute rules here.

The guiding principle is that you want to create a visual distinction between your title and your body copy, but you still want both to be harmonious.

Within that guideline, I think that the title sans-serif with normal casing doesn't distinguish from a sans-serif body copy, unless you were to do something like make it bold or add color.

Other than that, any of them can work. It's just a matter of what kind of vibe you're going for. All-caps serif can project a very classical look, particularly when it's black and white as you've shown. All-caps san-serifs can either look bold and modern or look like you're yelling, depending on how they're treated. If your primary concern is to call out headers, then make them caps, make them bold, and change the colors. But do it too much and you'll lose the text. You'll just have to play with it and find that balance!

A good default is to have a sans-serif title with serif copy. But like I said, these are guidelines, not rules.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme