28 Replies Latest reply on Apr 3, 2017 2:53 AM by jane-e

    Typography for the Web

    VL Branko Level 2

      I found these two sites and thought that some of you may also find them useful. If someone else has already posted them then please excuse the redundancy.

       

      Butterick's Practical Typography

       

      and

       

      The Elements of Typographic Style Applied to the Web

        • 1. Re: Typography for the Web
          Ussnorway Adobe Community Professional

          its ok as a guide to get you started on the web but it is subjective and I wouldn't call it current

          • 2. Re: Typography for the Web
            BarbBinder Adobe Community Professional

            Thanks for sharing! I train a lot of new InDesign/FrameMaker users with no background in the principles of setting type or designing pages. I'll add the first one to my list of resources.

            1 person found this helpful
            • 3. Re: Typography for the Web
              VL Branko Level 2

              And what would you consider objective and current?

              • 4. Re: Typography for the Web
                VL Branko Level 2

                Hello Babr

                 

                Since it is meant for web typography I don't know how much it would help for InDesign which is for books and hardcopy. Of course, the web typography is derived from hard copy so there is some common ground.

                • 5. Re: Typography for the Web
                  Nancy OShea Adobe Community Professional & MVP

                  With the explosion of Web Fonts now available from Google, Typekit, Edge and others, we're not limited to the dreary Win/Mac (web safe) font stacks anymore.  But too much of a good thing can backfire and lead to abuses.   When I see more than 3-4 web fonts on a page, it's distracting and pages tend to load much slower.   I think Web Fonts are great but they should be used sparingly. 

                   

                  My biggest other complaint lately -- and this is not limited to the web, it effects all UIs -- fonts are too small and/or lack sufficient contrast to be comfortably viewed on screen.    Who decided that gray text on a gray background was a good idea?

                   

                   

                  Nancy

                  • 6. Re: Typography for the Web
                    VL Branko Level 2

                    It seems that Barbr was the only one who looked at those sites closely. They are not about splashing X number of fonts on your website but rather the art and science of typography as applied to the web:

                     

                    "Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters (kerning). more at Typography - Wikipedia

                     

                    I have always had an attraction to typography and selection of fonts but that was heighten after I read this article in the NY Times about how people are subtly affected by which font is used in a text. That using certain fonts will make the same text more accepted than if other fonts are used. And that academic papers using certain fonts get higher scores than other fonts. Take away -- if you want to appear credible and authoritative do not use sans-sarif fonts for body text. But there is a lot more to it than that and the two websites I posted links to cover these points in more detail for those who want to create websites that stand out from the crowd but in a way that is almost imperceptible but very effective – by applying good typography.

                     

                    VL Branko

                    • 7. Re: Typography for the Web
                      VL Branko Level 2

                      Nancy O said: "My biggest other complaint lately -- and this is not limited to the web, it effects all UIs -- fonts are too small and/or lack sufficient contrast to be comfortably viewed on screen.    Who decided that gray text on a gray background was a good idea?"

                       

                      Even on a white back ground gray text is hard to read. It lacks contrast, bad typography. The "designer" forgot that the page was meant to be read and not stared as an art object. Good typography should be transparent and not get in the way of reading the page.

                      • 8. Re: Typography for the Web
                        Nancy OShea Adobe Community Professional & MVP

                        <Take away -- if you want to appear credible and authoritative do not use sans-sarif fonts for body text.>

                         

                        That statement is rooted in past century print conventions; not the modern digital age.  While serif might work well in print,  usability studies show that sans-serif fonts are much cleaner & easier to read on screen.   If you use an Android device, I'm guessing that your web experience is all in Droid Sans.

                        Droid Sans Mono Bold

                         

                        Web designers are at the mercy of the end user's web devices and settings.   We can build great stylesheets with terrific typography but that doesn't mean the end user sees it that way.

                         

                        Nancy

                        1 person found this helpful
                        • 9. Re: Typography for the Web
                          pziecina Adobe Community Professional

                          The elements of typographic style, has been around for years, (i even have the book). In my opinion one should read the book as it covers much more than both sites posted.

                           

                          Typography on the web has much more to offer, now than it did just a few years ago. As does how one lays out the text, simple 'boxes' of text are the norm still, but do not have to be, and flowing text around a shape is now so simple, that I am amazed at how few web designers even know about it.

                           

                          The problem with anything on the web, is as Nancy says, 'the end user'. We can create the best typographical experiance there is, (if you can do it in inDesign, you can do it using css on the web) but everything can be undone by the end user.

                           

                          Then of course, there is the time it takes to create such well structured pages, and the lack of knowledge of many who call themselves, 'wed designers' or 'developers'.

                          • 10. Re: Typography for the Web
                            Nancy OShea Adobe Community Professional & MVP

                            I bring you Google Font Effects (Beta) .  NOTE: You need a webkit browser (Chrome or Safari) to see most of these:

                            Get Started with the Google Fonts API  |  Google Fonts  |  Google Developers

                             

                             

                            Nancy

                            • 11. Re: Typography for the Web
                              VL Branko Level 2

                              Nancy O wrote:

                               

                              "That statement is rooted in past century print conventions; not the modern digital age.  While serif might work well in print,  usability studies show that sans-serif fonts are much cleaner & easier to read on screen.  If you use an Android device, I'm guessing that your web experience is all in Droid Sans."

                               

                              When I hear someone say "studies have shown" in my mind (and sometimes popping out of my mouth) comes the question: "whose studies?"

                               

                              "Not the modern digital age," as you are fond of saying, things move fast in web design and that we need to keep up so that also applies to typography. The modern digital age refers to -- after HD screens. Jakob Nielsen had this to say with the advent of HD screens (emphasis in red added):

                               

                              "The old usability guideline for online typography was simple: stick to sans-serif typefaces. Because computer screens were too lousy to render serifs properly, attempting serif type at body-text sizes resulted in blurry letter shapes. ...

                               

                              The old guideline was dictated by the poor screens on all mainstream computers. Now that we have high-quality screens, it's time to change the guideline.

                              In general, usability guidelines remain unchanged decade after decade because they're determined by human characteristics. However, every so often, some guidelines change due to the influence of technology or a change in user habits. For example, 10% of the original web usability guidelines from the 1990s have now changed because of technology improvements. Count this article as changing one more of those old guidelines.

                              Unfortunately, the new guideline is not as clear-cut as the old one. Legibility research is inconclusive as to whether serif fonts are truly better than sans serif.

                              Almost all mainstream printed newspapers, magazines, and books use serif type, and thus people are more accustomed to reading long texts in this style. However, given the research data, the difference in reading speed between serif and sans serif is apparently quite small. Thus, there's no strong usability guideline in favor of using one or the other, so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style." Jakob Nielsen - Serif vs. Sans-Serif Fonts for HD Screens

                               

                              Here is a scholarly article (in serif font ) by another usability consultant Alex Poole : Which Are More Legible: Serif or Sans Serif Typefaces?

                              From the conclusion:

                               

                              "What initially seemed a neat dichotomous question of serif versus sans serif has resulted in a body of research consisting of weak claims and counter-claims, and study after study with findings of “no difference”. ...

                               

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

                               

                              Here is another article: Serif vs. Sans Serif Fonts: Is One Really Better Than the Other? It debunks the myths that serif is for print and sans serif for digital.

                               

                              One user at https://www.reddit.com/r/userexperience/comments/2tvm2i/is_serif_more_readable_than_sans_s erif_on_mobile/  made the following comment containing a list of major sites (as of 2015) using both font types:

                               

                              I don't think there's a big difference, but just to see I did a little experiment. Here are major websites who publish lots of articles.

                               

                              Serif train: New York Times, The Guardian, Huffington Post, The Daily Beast, Reuters, NPR, New York Post, The New Yorker, The Atlantic, TIME, Bloomberg Businessweek, Newsweek, Forbes, Washington Post, Politico, LA Times, The Boston Globe, Wired

                               

                              Sans serif boat: BBC, NBC, Vox, Medium, Buzzfeed, Fox, ABC, CNN, Mashable, Us Weekly, The Onion, People, USA Today, Telegraph, NY Daily News, Fast Company

                               

                              I think both serif and sans serif fonts can be readable if you pick a nice one. Leading, tracking, kerning, font weight, contrast, hierarchy, and minding characters per line are also important factors in readability. If you're still font curious and want help making better font choices read Stop Stealing Sheep and Find Out How Type Works.

                               

                              So the main point that both Jacob and Alex make is that now with the improvement of technology there are no grounds for using the "better legibility" argument for sans serif in digital medium. That is is now a myth. But rather the choice is now stylistic, based upon the designer's subjective aesthetic sensibilities. My personal taste is san serif or flared serif for titles and headings (or "flared" sans like Trajan sans pro) with a serif body font. Your taste may differ. De gustibus non est disputandum -- In matters of taste, there can be no disputes.

                               

                              Nancy wrote: "Web designers are at the mercy of the end user's web devices and settings.   We can build great stylesheets with terrific typography but that doesn't mean the end user sees it that way."

                               

                              But at least when it comes to what type face they see I can control that using "@font-face"

                              • 12. Re: Typography for the Web
                                VL Branko Level 2

                                Thanks, Nancy. These "Google Font Effects" could be interesting is used aesthetically or could just be a headache if abused.

                                • 13. Re: Typography for the Web
                                  Szalam Adobe Community Professional & MVP

                                  Interestingly, I find the standard (sans-serif) typeface on these forums to be easier to read than the serif one that VL Branko is using.

                                  • 14. Re: Typography for the Web
                                    Szalam Adobe Community Professional & MVP

                                    I think it's a difference between screens and print. In print, I usually prefer serif fonts.

                                    • 15. Re: Typography for the Web
                                      pziecina Adobe Community Professional

                                      https://forums.adobe.com/people/VL+Branko  wrote

                                       

                                      Nancy wrote: "Web designers are at the mercy of the end user's web devices and settings.   We can build great stylesheets with terrific typography but that doesn't mean the end user sees it that way."

                                       

                                      But at least when it comes to what type face they see I can control that using "@font-face"

                                      Nancy is correct, and @font-face can also be blocked by a user, so you cannot control the font used.

                                       

                                      All browsers have a user css style sheet, that they can use to 'block' the use of any font, and change it to a user defined font. This also applies to any css selector.

                                      1 person found this helpful
                                      • 16. Re: Typography for the Web
                                        jane-e Adobe Community Professional

                                        I agree with Szalam. I prefer serif typefaces for reading large amounts of text in print and sans serif for reading on screen.

                                        • 17. Re: Typography for the Web
                                          Trevor.Dennis Adobe Community Professional (Moderator)

                                          jane-e  wrote

                                           

                                          I agree with Szalam. I prefer serif typefaces for reading large amounts of text in print and sans serif for reading on screen.

                                          Jane, I have an excellent solution to font dilemmas when it comes to novels.  Audio books.   

                                          • 18. Re: Typography for the Web
                                            Ussnorway Adobe Community Professional

                                            in a scottish accent lol

                                            • 19. Re: Typography for the Web
                                              jane-e Adobe Community Professional

                                              Trevor.Dennis, audio books are the only things that get me through driving 50 miles each way on the days I teach classes!

                                              • 20. Re: Typography for the Web
                                                VL Branko Level 2

                                                Szlam said "Interestingly, I find the standard (sans-serif) typeface on these forums to be easier to read than the serif one that VL Branko is using."

                                                 

                                                I quoted several usability studies that found no discernable advantage to either serif or san serif when it came to ease of reading and legibility. You may be simply just used to seeing san serif because most of the sites that you frequent use them and that is what you expect on the web. Or it is just a matter of your taste and preference.

                                                 

                                                And for me, it is the opposite. I detest sans-serif fonts for body text and relegate them to titles and headings, in fact for those jobs I prefer flared fonts. It is a matter of taste not usability. And, in a text on March 16 I listed a number of major sites that use serif fonts. It is clear that the digital world is not a sans-serif world.

                                                 

                                                I very rarely read paper books now and digitized my whole library to PDFs.

                                                • 21. Re: Typography for the Web
                                                  VL Branko Level 2

                                                  "Nancy is correct, and @font-face can also be blocked by a user, so you cannot control the font used.

                                                   

                                                  All browsers have a user css style sheet, that they can use to 'block' the use of any font, and change it to a user defined font. This also applies to any css selector."

                                                   

                                                  I agree. But how many people actually know that, and of those who do, how many actually do that? I wager that it is a minuscule number of users.

                                                  • 22. Re: Typography for the Web
                                                    Nancy OShea Adobe Community Professional & MVP

                                                    https://forums.adobe.com/people/VL+Branko  wrote

                                                    But how many people actually know that, and of those who do, how many actually do that? I wager that it is a minuscule number of users.

                                                    How many people have some level of visual impairment?  It's not minuscule. 

                                                     

                                                    On screen, small serif fonts are a usability problem for many people.   Never underestimate users' willingness to change preferences to suit their needs.   Browsers are much more user-centric than they were 10 years ago.  And Google makes it easy to find workarounds. 

                                                     

                                                     

                                                    Nancy

                                                    • 23. Re: Typography for the Web
                                                      Trevor.Dennis Adobe Community Professional (Moderator)

                                                      https://forums.adobe.com/people/Nancy+OShea  wrote

                                                       

                                                      How many people have some level of visual impairment?

                                                       

                                                      Nancy

                                                      That'll be me then.  I am borderline able to keep my driving license, but this is when getting my eyes tested in Specsavers dark cave with a barely lit eye chart.  When I see the hospital consultant his chart has windows with decent daylight, and I can pass it easily.  Still not flash though.

                                                      • 24. Re: Typography for the Web
                                                        pziecina Adobe Community Professional

                                                        https://forums.adobe.com/people/VL+Branko  wrote

                                                         

                                                        I agree. But how many people actually know that, and of those who do, how many actually do that? I wager that it is a minuscule number of users.

                                                        Latest estimates from disability statistics, is about 8%, then there is the 3%-5% who turn off javascript, and the 2%+ who use a screen reader or assisted technology, so an approximation would be about 14% of internet users.

                                                         

                                                        Not catering for these users is wrong, and if those statistics were for browser usage, everyone would support them.

                                                         

                                                        You could say that screen readers and assisted technology do not count, but in this case it is not the font that matters, but the mark-up. Readers actually do use the mark-up to use different speech tones for meaning and importance, which is something that accessibility studies have been trying to make clear to web site/content creators. The use of just h and p tags is not enough, html5 mark-up contains much more than what is currently used by designers and developers.

                                                         

                                                        Typography matters, but it is useless if the user cannot read it.

                                                        • 25. Re: Typography for the Web
                                                          Ussnorway Adobe Community Professional

                                                          In my area half the people are north of 50. They like to see what the kids are doing on facebook or play mahjong... They don't know how to set their browsers but I do that for them so I suspect they wouldn't count towards that surveys total?

                                                           

                                                          The other half are (what I now call) kids. They use phone screens to visit the sites they need and any places (like Adobe forums) that doesn't allow for phones just losses out with them.

                                                           

                                                            a survey only gives the correct answer if you ask the right question and ime most survey are made by people with no clue about the subject matter... I know 8% is laughably low in my area

                                                          • 26. Re: Typography for the Web
                                                            VL Branko Level 2

                                                            I'm in my mid-60s. I ruined my eyes looking at screens trying to tweak PhotoShop images and now wear glasses. So I count as visually impaired. Even with glasses, I increase font size but that is all. Even though I dislike sans-serif I do not mess with the fonts because it would be too much trouble and I want to experience the site the way the designer intended it.

                                                            And I remind those who insist it is otherwise that current usability studies do not support the claims favoring sans-serif. They just don't.

                                                             

                                                            Thus, there's no strong usability guideline in favor of using one or the other, so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style." Jakob Nielsen - Serif vs. Sans-Serif Fonts for HD Screens

                                                             

                                                            And:

                                                             

                                                            "What initially seemed a neat dichotomous question of serif versus sans serif has resulted in a body of research consisting of weak claims and counter-claims, and study after study with findings of “no difference”. ...

                                                             

                                                            "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 favor of serif or sans serif typefaces on aesthetic grounds than on the question of legibility."  Which Are More Legible: Serif or Sans Serif Typefaces?

                                                             

                                                            Here is another article: Serif vs. Sans Serif Fonts: Is One Really Better Than the Other?  It debunks the myths that serif is for print and sans serif for digital.

                                                             

                                                            And many high traffic sites use serif fonts. Are they losing traffic because of visually impaired readers?

                                                             

                                                            Serif train: New York Times, The Guardian, Huffington Post, The Daily Beast, Reuters, NPR, New York Post, The New Yorker, The Atlantic, TIME, Bloomberg Businessweek, Newsweek, Forbes, Washington Post, Politico, LA Times, The Boston Globe, Wired

                                                             

                                                            Sans serif boat: BBC, NBC, Vox, Medium, Buzzfeed, Fox, ABC, CNN, Mashable, Us Weekly, The Onion, People, USA Today, Telegraph, NY Daily News, Fast Company

                                                             

                                                            The Wall Street Journal is in the business of making money, most of the content is behind a paywall and their demographic is a much older.

                                                             

                                                            More than three-fourths of them have a college degree, and their average household income is $234,909. The readers of USA Today and The New York Times tend to earn less.

                                                             

                                                            The Journal has a strong grasp on a group of readers who have the disposable income to spend on big-ticket items. A full-page color ad in the paper costs $168,500 to $234,000. What Do the Rich and Powerful Read? - ABC News

                                                             

                                                            Yet the WSJ uses a serif font, go see for yourself The Wall Street Journal & Breaking News, Business, Financial and Economic News, World News and Video 

                                                             

                                                            It is a matter of taste and your sense of aesthetics. If you want to use sans-serif fonts on your site, and if you want to convert via CSS all sites on your browser to sans-serif then, by all means do so. But, to claim that studies show that sans-serif are better is simply not true.

                                                            • 27. Re: Typography for the Web
                                                              Trevor.Dennis Adobe Community Professional (Moderator)

                                                              https://forums.adobe.com/people/VL+Branko  wrote

                                                               

                                                              And many high traffic sites use serif fonts. Are they losing traffic because of visually impaired readers?

                                                               

                                                              As I stated back up the thread, my sight is not great, and I can barely read your posts as the letters are smeared into each other.  And that's with my browser zoomed in to 110% on a 30 inch monitor (1920x1200).  My sight issue is partly due to having LASIK surgery 20 years ago, and while I have needed glasses for most of that time, I have trouble at night because of glare and multiple ghosting. (Instead of one streetlight I see half a dozen or more).

                                                               

                                                              I saw the eye consultant today as it happens, and I was pleased to discover that the macular degeneration that my optician thought was causing my failing sight, was just cataracts, and I now waiting to get them fixed — and it won't even cost me anything ).

                                                              1 person found this helpful
                                                              • 28. Re: Typography for the Web
                                                                jane-e Adobe Community Professional

                                                                Trevor.Dennis  wrote

                                                                 

                                                                I saw the eye consultant today as it happens, and I was pleased to discover that the macular degeneration that my optician thought was causing my failing sight, was just cataracts, and I now waiting to get them fixed — and it won't even cost me anything ).

                                                                Oh, good news, Trevor.Dennis!