• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Typography for the Web

Engaged ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

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

Views

1.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

And what would you consider objective and current?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 09, 2017 Mar 09, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

<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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2017 Mar 21, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 28, 2017 Mar 28, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 28, 2017 Mar 28, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 29, 2017 Mar 29, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 02, 2017 Apr 02, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 03, 2017 Apr 03, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 03, 2017 Apr 03, 2017

Copy link to clipboard

Copied

LATEST

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​!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 29, 2017 Mar 29, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 29, 2017 Mar 29, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 16, 2017 Mar 16, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2017 Mar 21, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2017 Mar 21, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2017 Mar 21, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines