SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 57
  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sans Serif vs Serif

    I've always read/been told that you should use Serif fonts in print and Sans Serif fonts online.

    Do you agree with this?

    I see that a lot of online newspapers use Serif fonts.

    Sincerely,


    TomTees

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tom

    From a print perspective, it is not about using only a Serfi typeface exclusively, but rather choosing one that will compliment your design and be an effective mechanism in translating your concept.

    As with webdesign, it is best to stick to a limited range of typefaces that are able to be used on multiple browsers. Standard typefaces which include Arial, times, courier, Verdana Georgia.

    In any case you probably know this and my list is not the best. But I would say choose a typeface that suits the content. For example, an online newspaper, as you have mentioned, may choose times new roaman. But that's not to say that it wont look good with tahoma.

    A sans-serif typeface adds readability. The sans means 'without' the superfluous decoration you find on typefaces such as Times. Another thing to consider with serif fonts is what their ascenders and descenders are doing. Often these can be longer and shorter (BTW they are how far a y goes down the page, or how hight the top of a t goes). The x height will also be affected.

    This means you will need to adjust your leading tracking/ kerning to suit (that's the distance letters/words are apart and line height).

    A good place deepen your understanding of type face usage is at the beginning.

    http://en.wikipedia.org/wiki/Johannes_Gutenberg
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  3. #3
    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)
    The best computer montior in the world sucks badly in comparison to the cheapest newsprint. Serifs work on paper to help guide the eye and are often desireable. On computer screens they only confuse the eye and make the text harder to read, and should be avoided except in headings where they are large enough to look OK.

    The web is not paper, and it isn't going to be paper anytime soon. When monitors get down to around 300 pixels to the inch then serif fonts might be a workabale idea, but that ain't gonna happen any time soon and so you sould continue to avoid serifs for normally sized text.
    Ed Seedhouse

  4. #4
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't agree.

    Design has guidelines, not rules.

    Though as far as readability goes, online text is easier to read with sans-serifs, and print is easier with serfis, a large enough serif can work beautifully online as a header. Most sites should limit themselves to no more than 3 typefaces IMO, and there needs to be a good differentiation between the fonts.

    Tahoma mixed with Verdana is too similar. But use Georgia for a header and Tahoma for a body text and you have a much more harmonious difference.

  5. #5
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    The best computer montior in the world sucks badly in comparison to the cheapest newsprint. Serifs work on paper to help guide the eye and are often desireable. On computer screens they only confuse the eye and make the text harder to read, and should be avoided except in headings where they are large enough to look OK.

    The web is not paper, and it isn't going to be paper anytime soon. When monitors get down to around 300 pixels to the inch then serif fonts might be a workabale idea, but that ain't gonna happen any time soon and so you sould continue to avoid serifs for normally sized text.
    Duly noted.

    However, why then, do major websites like the New York Times, LA Times, Wall Street Journal, Time magazine, etc use Serif fonts?


    TomTees

  6. #6
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TomTees View Post
    Duly noted.

    However, why then, do major websites like the New York Times, LA Times, Wall Street Journal, Time magazine, etc use Serif fonts?


    TomTees
    Firstly, when it comes to professionalism in all it's ways, there really are no standards out there; just guides. Visual design is subjective, like art; what one person likes, others may not. I try for what is called the LCD approach (lowest common denominator).

    This means appealing to the widest amount of people possible.

    Look at Google. Undoubtedly a powerhouse monstrosity of search incredible-ness, and yet their website frontpage, as beautifully minimalistic as it is, as of this writing, has 82 validation errors.

    Serifs have their place, even in web-based typography. I personally don't feel we need 300-ppi capable monitors to appreciate what serifs have to offer via screen mediums.

    As for NY Times (one of your examples), as proven with Google, just because you're popular, doesn't mean you're high quality; and people will argue what quality really matters with the service they provide. NYT uses larger, bolder serif fonts (Georgia, I believe) for titles, and this looks great, but they also use Georgia for body text, which I personally feel a nice font like Calibri or Myriad Pro would work better.

    It's important, IMO, for headers and body text to by harmonious, which oddly enough, means they need to have significant differences to each other; but need to compliment each other as well.

    (Oh, and NYT has over 380 validation errors. That's disgraceful and embarrassing in my books)

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TomTees View Post
    I've always read/been told that you should use Serif fonts in print and Sans Serif fonts online.

    Do you agree with this?

    I see that a lot of online newspapers use Serif fonts.
    I would agree with that as a general guideline for body text. At normal body text size on screen, the letters are usually too small for serifs to show cleanly and without dominating the letter shape. Some fonts that have been specifically designed for screen use (such as Georgia) are undoubtedly better than the generic but awful TNR, but they still look fussy compared with the clean sans-serif shapes of Arial, Verdana, Trebuchet or Calibri.

    For print, the serifs will help to lead the reader's eye along the line and make it easier for people to follow the text.

    That's all for body text - that doesn't mean you shouldn't break with that style for headings, boxouts and so on. While you don't want to go mad with too many different fonts (or it starts to look like something your great-aunt did in Word the first time she found out how to change fonts...), if you choose fonts that complement each other you can get a good effect by using serifed headings and sans-serifed body text.

    As to why many newspaper sites use serif fonts, I would guess that they are trying to replicate their print style. The news site that is generally recognised as one of the best in the business (the BBC) currently uses Arial, and previously used Verdana. Just because some news sites use serif fonts does not mean it's good practice!

  8. #8
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    Firstly, when it comes to professionalism in all it's ways, there really are no standards out there; just guides. Visual design is subjective, like art; what one person likes, others may not. I try for what is called the LCD approach (lowest common denominator).

    This means appealing to the widest amount of people possible.
    Well, that is sorta what I want to avoid... doing what the masses do and crave. (Very unoriginal!)


    Look at Google. Undoubtedly a powerhouse monstrosity of search incredible-ness, and yet their website frontpage, as beautifully minimalistic as it is, as of this writing, has 82 validation errors.
    Yet another sign that Google is *evil*!!


    NYT uses larger, bolder serif fonts (Georgia, I believe) for titles, and this looks great, but they also use Georgia for body text, which I personally feel a nice font like Calibri or Myriad Pro would work better.
    It sounds like you know fonts pretty well!

    Is there is an easy way to know what fonts a website uses? (Sometimes trying to find the right style sheet on a major website is nearly impossible!)

    So tell me more about Georgia and Calibri and Myriad Pro.

    What do you like about them?

    How are they different from other fonts?

    Are they very well supported in browsers?


    It's important, IMO, for headers and body text to by harmonious, which oddly enough, means they need to have significant differences to each other; but need to compliment each other as well.
    So how do you learn what is "harmonious"?


    (Oh, and NYT has over 380 validation errors. That's disgraceful and embarrassing in my books)
    I just like the look of their content. Not saying I want their entire look. And I certainly would like to write error-free code!



    TomTees

  9. #9
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    I would agree with that as a general guideline for body text. At normal body text size on screen, the letters are usually too small for serifs to show cleanly and without dominating the letter shape. Some fonts that have been specifically designed for screen use (such as Georgia) are undoubtedly better than the generic but awful TNR, but they still look fussy compared with the clean sans-serif shapes of Arial, Verdana, Trebuchet or Calibri.
    To me, I think Serif fonts look amateurish. They look like they were created by a programmer!

    What I like about the look of the websites I mentioned above is that they look more "professional" and "distinguished" in terms of content.


    if you choose fonts that complement each other you can get a good effect by using serifed headings and sans-serifed body text.
    So how do I know which Serif and Sans-Serif fonts go well together?

    Also, isn't the opposite for print? I remember learning that body text should be Serif, and headings should use Sans-Serif.


    As to why many newspaper sites use serif fonts, I would guess that they are trying to replicate their print style. The news site that is generally recognised as one of the best in the business (the BBC) currently uses Arial, and previously used Verdana. Just because some news sites use serif fonts does not mean it's good practice!
    Far enough. With my American bias, I haven't looked at the BBC's website, but will now. (I did notice last night that USA Today uses Sans-Serif fonts to good effect.)



    TomTees

  10. #10
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an old article talking about the NY Times font.

    Not sure what they currently use.

    BTW, can you sue that font or is it copyrighted?



    TomTees

  11. #11
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You're over analyzing design too much. You're looking for a logic out of it, and there really isn't any. I understand you're trying to find principles that help create popular typography, but there is honestly a huge amount of information in regards to how fonts work with your project.

    I use Firefox 3.6 with Firebug plugin. When a website loads up, you can inspect an element (like a paragraph tag that has a font you like) and it'll tell you the CSS properties applied to it, which include the font used.

    Understand that if you specify a font that the user does not have on their machine, users will not see it. How to specify the order and font name is known as a "Font Stack". Do a Google search on that in order to find out what I mean.

    Why I like fonts like Myriad Pro is impossible for me to put into words. I can't tell you why I like it so much, but I really do; it has a timeless classy quality. Don't forget that with Myriad Pro, you can have different font faces like: Oblique, Condensed, Regular, Italic, Semibold, Semibold Italic, Bold, Bold Italic, Black, Black Italic, etc.

    Have a look at Myriad Pro

  12. #12
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TomTees View Post
    Here is an old article talking about the NY Times font.

    Not sure what they currently use.

    BTW, can you sue that font or is it copyrighted?



    TomTees
    You can use it as it come with the Microsoft package and is free license. As far as I know.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TomTees View Post
    However, why then, do major websites like the New York Times, LA Times, Wall Street Journal, Time magazine, etc use Serif fonts?
    Because said companies STILL have no clue how the web even works, which is why their websites are illegible inaccessible bloated trash? I don't even want to THINK what their bounce rates are. (or absurd hosting costs)

    Those ones listed still have their heads wedged so far up print's backside they're tasting tonsils, and wouldn't know accessibility if it took a dump on them from orbit!

    Let's look at the NYT -- font sizes below accessibility minimums in serif face, color contrasts (grey on white?) below accessibility norms, fixed width layout that isn't even 1024 friendly, website functionality that is broken in many places when javascript is disabled, nonsensical heading tag orders (h6 preceeding h2, jumping to h6 from h2), static scripts and style inlined in the markup -- endless repetitive classes for nothing, tables for layout, oddball uneven paddings between elements making it hard to tell where anything begins or ends... shall I go on? Top to bottom we're talking a laundry list of "how NOT to build a website"

    Just because it's a professional website doesn't mean it's professional quality -- the sites you listed being some of the worst there are online... Well, at least until you look at anything made by Microsoft or Yahoo.. Entirely typical of the 'big name print world' companies who just don't get that (as Ed said) the Internet is not PRINT!

    Most of said websites are so ineptly coded and constructed that frankly I wonder how in the bloody blue blazes any of these people are able to keep their jobs; I guess it's a case of "never underestimate the stupidity of their boss." -- how else does one get away with blowing half a megabyte page load built around 130k of markup and 90k of javascript totaling no less than 100 separate files on delivering 12k of plaintext content!

    It's called ineptitude -- and usually the bigger the brick and mortar name, the worse it gets as these companies STILL think of the Internet as a cute side addition to their company not realizing that for many of them (like newsprint) their days are counted. It's not a question of IF they'll become irrelevant, but when.

    Hence the half minute page-loads on my 22mbps downstream connection... and hence why I don't go to the print outlet websites as usually the TV stations at least seem to 'get it' a bit better.

    So taking web tips from their sites? Even for something like fonts just say NO!

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,264
    Mentioned
    60 Post(s)
    Tagged
    3 Thread(s)
    deathshadow, what a pleasure to read your post, a very serious indictment of the horrors of form over function

    "tasting tonsils" and "from orbit" are memorable

    when will people learn that web design is all about how something works, and not how pretty it is
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TomTees View Post
    Is there is an easy way to know what fonts a website uses? (Sometimes trying to find the right style sheet on a major website is nearly impossible!)
    The easiest way is to use a developer tool like Firebug (Firefox) or Dragonfly (Opera). This will tell you what fonts have been set, although it's up to you to know whether you have the first one listed installed on your computer!

    So tell me more about Georgia and Calibri and Myriad Pro.

    What do you like about them?

    How are they different from other fonts?

    Are they very well supported in browsers?
    These fonts were all designed for screen use rather than for print, which means they work well at small text sizes, with the letterforms aligned up with the pixel grid, so they retain their shape and easy legibility.

    Georgia is very widely installed. Calibri is fairly widely used - it is part of the standard package on Windows Vista and W7, but is also available with Office 2007 and Powerpoint Viewer 2007 on older OSs. Myriad looks great but isn't very common out there in the real world of home PCs.

    So how do you learn what is "harmonious"?
    The same way you learn which colours are harmonious, and what design features complement each other well. Try them and see. If you don't have an arty bone in your body, ask other people. Good design is rarely a right or wrong answer, but a consensus opinion will generally guide you the right way.

    Quote Originally Posted by TomTees View Post
    Also, isn't the opposite for print? I remember learning that body text should be Serif, and headings should use Sans-Serif.
    That is the general guideline for print, yes. So it's worth thinking about that when you write your print stylesheet - you then have to decide whether to swap the serif and sans-serif fonts over to get the best font for each media, or whether to keep them as they are on the screen to reinforce consistent branding and design.

    Quote Originally Posted by TomTees View Post
    Here is an old article talking about the NY Times font.

    Not sure what they currently use.

    BTW, can you sue that font or is it copyrighted?
    Assuming you're just specifying the font using ordinary CSS, you can set any font you want ... but if the user hasn't got it installed on their computer, they won't see it in that font. There's no harm in specifying a slightly more obscure font as the first choice, if you can find a more common (but similar) font to use as the second/third choice.

    If you are looking at embedding the font so that users' browsers download it and use it then yes, you would need to look into licensing restrictions. I doubt that they use the same font on their website as they do in print!

  16. #16
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron.martone View Post
    Understand that if you specify a font that the user does not have on their machine, users will not see it. How to specify the order and font name is known as a "Font Stack". Do a Google search on that in order to find out what I mean.

    Have a look at Myriad Pro
    That link takes me to an Adobe page where you have to spend a couple hundred dollars to buy the font.

    So wouldn't that create the exact problem of people not having the font that you describe above?



    TomTees

  17. #17
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    deathshadow, what a pleasure to read your post, a very serious indictment of the horrors of form over function

    "tasting tonsils" and "from orbit" are memorable

    when will people learn that web design is all about how something works, and not how pretty it is
    A few comments...

    1.) I just said that I liked *some* of the fonts on the websites mentioned earlier. I never said I liked their entire layouts, nor did I say I liked how things were coded.

    2.) According to you, r937,
    web design is all about how something works, and not how pretty it is
    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.

    These are not mutually-exclusive concepts as you seem to imply.



    TomTees

  18. #18
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Georgia is very widely installed. Calibri is fairly widely used - it is part of the standard package on Windows Vista and W7, but is also available with Office 2007 and Powerpoint Viewer 2007 on older OSs. Myriad looks great but isn't very common out there in the real world of home PCs.
    Is there someone that lists all of the Common Fonts and has a picture of each - so you see what they should look like? (Almost like an "Online Library of Computer Fonts?!)

    So what do you think are the Top-5 Serif and Sans-Serif Fonts for online??

    And why?



    TomTees

  19. #19
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    The news site that is generally recognised as one of the best in the business (the BBC) currently uses Arial, and previously used Verdana. Just because some news sites use serif fonts does not mean it's good practice!
    I spent some time browsing over their site last night. (Haven't been there in ages.)

    You are right, they do have a really nice looking website - both layout and font too!


    TomTees

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Why the BBC would go from a font designed for readability (and one of the few who can tell I from l) like Verdana to something that isn't anywhere as good (Arial, who canNOT tell I from l), I have no clue. Verdana has a larger x-height at the same font-size setting as other fonts... that alone makes it a winner. Arial gets damn small damn fast for me. But, ok, it's the cheerleader/football jock of fonts, everyone uses it...

    but anyway...
    Well, that is sorta what I want to avoid... doing what the masses do and crave. (Very unoriginal!)
    When it comes to artsy "design", go ahead, be original.

    When it comes to usability (and this includes readability), don't be original. Use what works and is easiest for real human beings. Art is not readable. Science and user studies point the way. Do the right thing, as often as you can get past your clients (hint: tell them it's good for SEO... works for me).

    Well, being successful in business and making $$$ *IS* about how things appear and how they are perceived.
    But is always secondary to usability. If it doesn't work, we don't care how lovely it is. The most awesomely beautifully designed can opener who is a pain in the butt to open cans with will sit in the drawer. Joe may take it out once in a while to show to his friends, but he'll use the one he got at the ten-cent shop when he needs to open a can.

    It has to work first, and then you can worry about looking more awesome than everyone else... and then you need to make sure the awesome-saus didn't ruin the usability.

    Is there someone that lists all of the Common Fonts and has a picture of each - so you see what they should look like? (Almost like an "Online Library of Computer Fonts?!)
    I use this page (which is slowly starting to date): http://www.apaddedcell.com/web-fonts
    Also the "Linux" here is "Ubuntu" though most of those fonts also work for Fedora and Open Suse as well.

    But this one stays up to date more: http://www.codestyle.org/css/font-fa...dResults.shtml (but the disadvantage of this page is you have to click on "image" for every font you don't have... and I don't have 90% of those).

    Oh, forget Vista fonts unless you are absolutely in love, for two reasons (and yeah, I'll prolly be the only one here to say this... vista fonts have a lot of love, mostly because of the lack of ugly):

    -most of them (not all) are tiny as hell. If 1em font size is readable in Verdana, it's almost half that size in Calibri. Cute, but difficult to stack well. I tend to try to keep my font stacks with similar-sized fonts, so huge size differences don't occur when font #2 or #3 is getting used instead of the first one I set.

    -Vista fonts are not available to me. No Linux, no Mac, no ancient Windows (if you are targeting the corporate world, especially finance and banking with your site, expect they are using Windows 2000 servers and IE5 or 6... bleh. And no pretty vista fonts). So then unless you're using the two or three who are not so damn tiny (and one of those is monospace so you're not using it for body text anyway), you'll have huge text-size differences between (new) Windows vs every other OS.

  21. #21
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You took what Isaid out of context...

    Quote Originally Posted by Stomme poes View Post
    Well, being successful in business and making $$$ *IS* about how things appear and how they are perceived.
    But is always secondary to usability. If it doesn't work, we don't care how lovely it is. The most awesomely beautifully designed can opener who is a pain in the butt to open cans with will sit in the drawer. Joe may take it out once in a while to show to his friends, but he'll use the one he got at the ten-cent shop when he needs to open a can.
    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. #22
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This looks like a really cool website...



    TomTees

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #24
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    heehee, they tickle me : )
    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!


    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. #25
    SitePoint Member ivancosic's Avatar
    Join Date
    Dec 2010
    Location
    Belgrade, Serbia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •