SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Font Discussion

  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Discussion

    Hey guys...

    A bit random, but this is all related to my working on that mockup. I'm curious to hear all of your opinions on the merits of Serif vs. San-Serif fonts in regards to web use, specifically for portfolio sites. Yes, I know Serif fonts seem a bit older and more "newspapery " (for a lack of a better word), and Sans-Serif fonts are more "modern" by some definition.

    But, I've always thought that Serif fonts seemed a bit more "personal" to me if that makes any sense? IE, I designed that last mockup all in Georgia...but started with georgia headings and Arial body text. And now, I'm having second thoughts on the point of only using one font on an entire site. What are your thoughts on this?

    Thanks,
    Eric Huang
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Coming from a family with three generations of commercial printers and a background in typefaces and fonts, I have never felt that serif fonts were anything but formal (read stodgy?). Speaking as a user, I prefer sans-serif fonts as clean, crisp and easier on the eyes. The only time I prefer serif fonts is when viewing something italicized, then the tails on the serf fonts seem to make the italics flow more.

    I don't see the point of using only a single font on an entire site. A font change between headings and text adds interest and focuses the attention on your topics or points of interest. Just don't get carried away.

  3. #3
    SitePoint Addict wibble wobble's Avatar
    Join Date
    Dec 2008
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Printers (especially for newspapers, books, mags, etc) have very high PPIs (pixels per inch) so the serifs are more clear and we can read them easier.

    Monitors, though (especially ipods, phones, etc) have relatively low PPIs so the definition of serifs just looks 'bad'.

    IMO serifs are most common and look best in big text (ie headers) because the serifs are easier to see, whether the designer notices that consciously or not. For most web use I would say stick with sans-serif.
    Find freelance jobs from all the major sites in one place:
    on twitter / on the web / twitter rss feed

  4. #4
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What wibble wobble says above is correct. My so called 22" monitor's native resolution is 1680 x 1050. It's actual width is just over 18", so being generous that's less than 94 dots per inch.

    Even the worst newsprint has far better resolution than that, and also a lot more contrast. Monitors still come nowhere near paper for quality, so the rules for paper can't just be applied to them without thinking.

    Stick with sans-serif fonts for normal text, and use serif fonts for effect, like headers. That's still the best advice in my opinion.
    Ed Seedhouse

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Serif fonts can be quite okay for body text, as long as you use a font family that's appropriate for on-screen use (i.e., has a large x-height) and as long as you don't make the text ridiculously small.

    I use a serif font (Georgia) for the body text on my blog and I've only ever had one complaint about it (from a fellow SitePoint moderator, actually).

    For fine print on screen, sanserif fonts are probably better.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I've also been trying to start with size 16 font for my body text, and then to build upwards from there. I feel like larger body text with serif fonts can look okay...

    But everyone agrees, that the best possible compromise is to use Serif for titles and Sans-Serif for body text?
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    My so called 22" monitor's native resolution is 1680 x 1050. It's actual width is just over 18", so being generous that's less than 94 dots per inch.
    The 22 inches will be the diagonal measurement between opposite corners of the screen. Assuming that the native resolution is using the correct width to height ratio to give the same PPI in both directions that means the screen width should be about 18.87 inches giving 89 Pixels Per Inch. So your 94 is a bit too generous.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Assuming that the native resolution is using the correct width to height ratio to give the same PPI in both directions
    Possibly not true. I certainly haven't counted any pixels myself.

    that means the screen width should be about 18.87 inches giving 89 Pixels Per Inch. So your 94 is a bit too generous.
    Yes, I was being deliberately generous, since it didn't affect the point I was trying to make. The screen measures pretty close to your specifications.

    Now it is certainly not the best monitor on the market, and my video card is just whatever is stuck in this laptop, so it's certainly far from the best, too.

    But I think it is clear that even the best commercially available monitors with even the best video cards are not going to be as good as cheap newsprint. I can read far smaller text on paper than I can on my monitor.
    Ed Seedhouse

  9. #9
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    Possibly not true. I certainly haven't counted any pixels myself.



    Yes, I was being deliberately generous, since it didn't affect the point I was trying to make. The screen measures pretty close to your specifications.

    Now it is certainly not the best monitor on the market, and my video card is just whatever is stuck in this laptop, so it's certainly far from the best, too.

    But I think it is clear that even the best commercially available monitors with even the best video cards are not going to be as good as cheap newsprint. I can read far smaller text on paper than I can on my monitor.
    Yeah, I get your point whether your right or wrong hahah... It's beginning to make more sense now.
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  10. #10
    SitePoint Addict wibble wobble's Avatar
    Join Date
    Dec 2008
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The 22 inches will be the diagonal measurement between opposite corners of the screen. Assuming that the native resolution is using the correct width to height ratio to give the same PPI in both directions that means the screen width should be about 18.87 inches giving 89 Pixels Per Inch. So your 94 is a bit too generous.
    Picky now are you?
    Find freelance jobs from all the major sites in one place:
    on twitter / on the web / twitter rss feed

  11. #11
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh god...I started a Sitepoint thread rumble!? :P
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Most screens will display somewhere between 72 and 120 pixels per inch depending on the screen size and the resolution it is set to. Most will be toward the lower end of this scale.

    Most laser printers will print somewhere between 300 and 2400 dots per inch (inkjets usually quote figures about 20&#37; higher for effectively the same resolution given that the ink tends to spread more than the toner does).

    Top end printing presses print at much higher resolutions than conventional printers.

    Typically you would expect your printer to print at least 4 times as many dpi in each direction as you get on the screen. That's a minimum of 16 dots on the paper for each pixel on the screen. That means that printers are far more capable of showing serifs than screens are.

    And I wasn't trying to be picky re the pixels per inch on the screen mentioned earlier, just trying to explain that a width of around 18 inches is about right for a 22 inch screen (there is some variety now in width to height ratios with screens becoming wider for the same height but they all used to be a 4 by 3ratio which would have made for a 17.6 inch wide screen when the diagonal was 22 inches so any 22 inch screen wider than 17.6 inches is a wide screen format).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    And I wasn't trying to be picky re the pixels per inch on the screen mentioned earlier, just trying to explain that a width of around 18 inches is about right for a 22 inch screen
    Yes, I already knew that but I didn't (and don't) think you were being picky. Besides, if it comes to that, I can out picky darned near anyone.
    Ed Seedhouse

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    Yes, I already knew that but I didn't (and don't) think you were being picky. Besides, if it comes to that, I can out picky darned near anyone.
    It was wibble wobble who claimed I was being picky.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My fonts of choice for web design are from the Humanist school of sans-serif, although if you want to give a website a feeling of elegance then try using some serif fonts...

    For some typographic inspiration take a look at the following article at Vandelay Design:

    35+ Websites with Minimal Color Schemes

    Because they are minimalist in colour and graphics then the fonts really stand out
    Let everyday be Christmas


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •