Sans Serif vs Serif

Get Started
21

You took what Isaid out of context…

Ummm, I said…

Well, being successful in business and making $$$ IS about how things appear and how they are perceived. No one visits a website because they have the tightest HTML and CSS code around. (Well, unless you don’t have a life!)

Being a good business person - but also someone who takes pride in his IT work - my goal is to achieve both: A professional-looking design and layout, with respectable code that is accessible to as many people as practical.

I do believe you can have both.

That is the reason for my inquiry…

How can I find something that is…

1.) Unique

2.) Pretty

3.) Readable

4.) Well-Supported

TomTees

22

This looks like a really cool website…

http://www.typetester.org/

TomTees

23

This looks like a really cool website…

http://www.typetester.org/

heehee, they tickle me : )

We’re very sorry, but the Typetester won’t work without JavaScript enabled.
Please, enable JavaScript in your browser and reload the page.
It will not harm your system. That’s a promise.

Lawlz.
After I ctrl++ a few times, this starts to look pretty awesome. Because you can see three fonts at once, you can try that harmony hippy thing StevieD was talking about: say, header text next to body text next to something special like small italics.

You took what Isaid out of context…

More making a point… I’d hope most of us try to do the both thing, but my opinion is that there’s definitely an order as to which comes first. I apologise, I was not trying to make you out as one of those money-grubbing goons who only care about teh pretties, lawlz : )

How can I find something that is…

1.) Unique

2.) Pretty

3.) Readable

4.) Well-Supported

Unique kinda kicks Well-Supported’s butt, if you think about it.

But maybe what you want to do is see what catches your eye, and then check with your browser and developer tool (as mentioned earlier) to see what they did.

I’ve noticed many of the artsy-fartsy designer blogs use a serif like Georgia (who also has a large x-height like Verdana does… so one of the bigger fonts) but will make it larger than normal and then quite a bit of line-height to space the lines a bit more than normal apart.

Or, just a readable whatever for the body, but use Unique for headers… where you come to the choice of using maybe either images with alt text (or Gilder-Levin), or sFIR, or @font-face… to get the 'neek font showing.

24

What tickles?! :-/

After I ctrl++ a few times, this starts to look pretty awesome. Because you can see three fonts at once, you can try that harmony hippy thing StevieD was talking about: say, header text next to body text next to something special like small italics.

Glad I could finally give back to SitePoint.

Only bad thing about the site is the limited number of fonts. (Wish I could do a side-by-side with fonts like “'nyt-cheltenham-hinted-1”.

More making a point… I’d hope most of us try to do the both thing, but my opinion is that there’s definitely an order as to which comes first. I apologise, I was not trying to make you out as one of those money-grubbing goons who only care about the pretties, lawlz : )

Nah, just a super poor guy who wants to get out of debt while still maintaining his dignity and programming-soul! :wink:

Unique kinda kicks Well-Supported’s butt, if you think about it.

Usually, yet at the same time there are usually lots of gems out there that the masses ignore.

I believe if you dig a little bit, you can attain “unique” while also being accessible/supported/etc.

But maybe what you want to do is see what catches your eye, and then check with your browser and developer tool (as mentioned earlier) to see what they did.

I’m doing that now.

I have a Bookmark Folder where I save websites that I like. And I keep going back and scrutinizing the sites and determine which things I like including fnts.

I’ve noticed many of the artsy-fartsy designer blogs

BTW, I wouldn’t put me in that class.

I’ve seen lots of websites that are “cool” from an artistic standpoint, but which aren’t practical from a business standpoint.

Fun to look at for a bit, but then they quickly become gaudy.

use a serif like Georgia (who also has a large x-height like Verdana does… so one of the bigger fonts) but will make it larger than normal and then quite a bit of line-height to space the lines a bit more than normal apart.

I don’t understand what x-height is. You keep bringing it up.

Or, just a readable whatever for the body, but use Unique for headers… where you come to the choice of using maybe either images with alt text (or Gilder-Levin), or sFIR, or @font-face… to get the 'neek font showing.

That may help jazz things up.

TomTees

25

You have to take font size in calculations. Screen guidelines were made when majority of web were in 10px font size, now with em sizes or in general standard of 13 px it’s not that big deal which font you use.

Also formating plays big role here. Big chunk of most readable font will not be that pleasant as several blocks broken by smart formated h3 lines, important stuff highlighted with <strong>, emphasizes, bulleted lists and so on. Line height also plays big role.

Font is maybe something that comes first in mind but by no meaning you shouldn’t stick to one definition, explore, potentials are endless and you wont make masterpieces over night. Read about web typography there are some great articles and you will improve over time. Don’t focus on big guys. Check what ordinary but amazing bloggers do.

26

Good advice.

So, do you have some websites that you feel demonstrate what you mentioned above?

If so, please posts some URL’s.

TomTees

27

Not sure if this many links will work trough, but if you are really into this you should try to google combination of typography and web and you will find abundance of resources.

http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/
http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography

28

Thanks for the links!! :slight_smile:

TomTees

29

Thanks for posting this and saving me a lot of trouble saying it less effectively.

30

Quality fonts aren’t usually free. You should look into font replacement techniques (until we can get into WOFF and EOT type solutions) which will allow you to use the font of choice (if you have the license to do so) whether the client has the font or not.

If you develop your font stack properly, you can state by the best looking but less popular to the best looking most popular fonts.

font: “Myriad Pro”, Calibri, “Microsoft Sans Serif”, Tahoma, Arial, sans-serif;

The above would let those who have Myriad Pro to see the element in the desired font, but step down the stack until they reach ones you have a higher chance of having.

If you understand where we stand in typeface use online, you’ll know it’s not an ideal situation.

31

I don’t understand what x-height is. You keep bringing it up.

It’s how you measure how “large” a font is… based on the size of that font’s lowercase letter “x”. That is the x-height.

So if you have with CSS set a 12px Verdana and then a 12px Arial, same text, you will not only see the differences from things like leading (line-height) and kerning (letter-spacing, except CSS isn’t as good at it), but also the actual tallness of the letters is greater in Verdana than Arial, even though you’ve set them both at 12px with CSS.

You will notice the same thing with Georgia vs Times New Roman. Georgia has a larger x-height.

*edit duh I’m a tard, there’s a Wikipedia page for it: http://en.wikipedia.org/wiki/X-height

font: “Myriad Pro”, Calibri, “Microsoft Sans Serif”, Tahoma, Arial, sans-serif;

I try to look around for Mac and popular Linux fonts to put in my stack: on my machine’s default settings, the above font-stack is made for just one OS, Windows, so I’d hit sans-serif which would probably give me Free Sans, a free font available on many unixy systems.

Mac users who install stuff like Outlook for the Mac etc will have more Windows fonts available to them, but it’s not a bad idea to have some Mac fonts in your stack anyway.

If you like the links Ivan gave you (esp ILoveTypogaphy) then you’ll also like Jon Tan’s page: http://jontangerine.com/ he’s also all crazy into typography.

32

The x-height is the distance in space between the baseline (an imaginary line the text sits on) and the top of a lower-case ‘X’ (sans it’s serifs, if it has them)

The reason why they use an X is based on the belief that it shared a similar width and height due to it’s symmetrical design from a vertical and horizontal perspective.

Yeah, you can add Mac Fonts as well, but unless you have a tool or that font installed as well, you may not know what your site will look like when using it. The font stack I provided was Windows-centric.

33

Yeah, you can add Mac Fonts as well, but unless you have a tool or that font installed as well, you may not know what your site will look like when using it.

This is true… however I believe if your site is meant to be used by any and all users, then it’s our job to know what it looks like (if only to check readability or, is some word popping out of a box or something).

To this end I’m (still) saving up for a used Mac. I do test Windows versus Linux, and yeah I’ve made changes to code based on text differences between the two (same browser!).

34

So it sounds like a greater x-height leads to greater readability? :-/

If you like the links Ivan gave you (esp ILoveTypogaphy) then you’ll also like Jon Tan’s page: http://jontangerine.com/ he’s also all crazy into typography.

Just glanced at his site. Not sure about Typography, but the simplicity of his layout and content is awesome! (Definitely gives me some ideas for some other threads I have on SP.)

Thanks,

TomTees

35

I test for Safari 4, Chrome, Opera 10 Firefox 3 and IE8, but I only have a Windows environment to test on. There is technology out there, like browser cams, which will let you see how your site works on a myriad of OS as well as browsers, but personally, I charge clients if they want compatibility with older browsers and or OSes,

36

Perhaps now would be a good time to link to an explanation of why Verdana is a bad font to use on the web.

And I just add that if you think fonts are particularly important for web pages you are deluded.

37

his argument is that verdana “looks, for most people, unnecessarily large and unattractive”

that’s poppycock (a polite way of saying it’s just his opinion), unsupported in any way on that page

38

Pretty strong term…

(Why does everything on the Internet have to turn “personal”? Even on Christmas Day…)

My original post asked about the differences between Sans-Serif and Serif fonts.

Where did it say anything about font being the #1 concern as your comment implies?

TomTees

39

I have asked myself this question over a billion times. I’ve yet to come to any logical reason.

If you state that it is YOUR OWN OPINION that “this is good” or that “this is bad”, people will still take personal offense if they believe the opposite. Not only do they take personal offense, but they also then take up the banner to defend the honor of their own opinion.

These types of people flock to forums (which is counter-intuitive because their incapability of allowing others to have opinions that differ from theirs puts them at constant ends with people due to the open-nature of forum discussion.

What gets me most is that they want others to respect their opinion, yet they can’t do the same for others. This is the mentality of a child. (The world revolves around ‘me’. I cannot see beyond myself or the needs of others)

I don’t know, maybe they don’t understand what an opinion is. “McDonalds is the worst food on the planet” is an opinion. It is not fact by the sheer facet that it is an opinion. Yet those who love McDonalds will have assumed you just slapped them in the face and fight you as if you directly insulted them.

…this ignorance does not take a break; even on Christmas.

40

My question would be why the blue blazes do people take innocuous comments like that one as a personal affront?!?

But I encounter that bull all the blasted time the moment I deal with anyone from outside New England… It’s like the rest of the world is filled with thin skinned wussies who either can’t take a joke or just spend their time looking for an excuse to get upset over NOTHING.

It’s why half the time I spend online I feel like telling people to either grow a pair, or borrow Hillary’s.