More and more with @font face and Google fonts typography is becoming an important part of website designs. What makes for good typography in a webpage? What doesn't? What are your thoughts?
Printable View
More and more with @font face and Google fonts typography is becoming an important part of website designs. What makes for good typography in a webpage? What doesn't? What are your thoughts?
Type that is designed to be read.
I am not as concerned about using Garamond Pro Light Italic as I am making sure that visitors can read the text. And I am not all that sure that most visitors expect a typographic tour de force.
Type that is as long as the width of this text box but the same size is harder to read at this wide a measure as this text is at this size.
Type that is as long as the width of this text box but the same size is harder to read at this wide a measure as this text is at this size.
I've always understood that Typography is a term for print rather than web site viewing.Quote:
Originally Posted by angelize
Well, quite literally it is "writing on the surface" and so typography fits with display as well as print.
Frances, here's a link you may enjoy:
http://designmodo.com/typography-web-design/
Typography on the web still has many challenges that time will likely overcome. One day, gone will be headings in images only. I'm not too keen on using @fontface yet, though I have played around. I would like to see speed issues more equalized for people's connections, etc.
Take care, Mike
Gary: I agree readability is a top concern, because if your visitors find your site hard to read they aren't going to stick around.
Steve: I think Typography is becoming more prominent on the web, when you design a site how do the text and headings work to give the site a certain feel?
Mike: that link was very interesting, and the examples of sites that make good use of typography were inspiring. Thanks
I actually don't. In fact more than ever less is more and when you look at professionally designed sites you'll note that they do not have umpteen different fonts faces on every page. As Gary pointed out, "most visitors don't expect a typographic tour de force.", and this is spot on advice.Quote:
Originally Posted by angelize
Of course, if your website is actually about fonts, then this is a different kettle of fish. But using other fonts for the body text, navbars and so on just because you can may not be a wise choice. But I do agree that we can (and do) choose a nice typeface relevant to the site for logos and banners.
I agree with what you are saying, too many fonts on one page is not in my opinion good typography. Good typography should be more about how you use fonts not about how many you use. By mixing say 2 or 3 fonts on a page if they are chosen well can make a good composition. Say you are doing a site for a restaurant and you have a nice script for the headings and then contrast that with a clean sans serif font for the body text and navbars you could still get creative with different weights, and sizes. Choosing fonts that play nice together is important too, contrast is good but not when they clash with each other.
The use of embedded fonts on a website is no more a tour de force for a visitor than an embedded Flash file. Think of where cutting edge sites were 3 years ago, and then project where they will be in another 3 years.
Color, plug-ins, choice of fonts, wrap-around text, all this stuff is window dressing—it can coax a visitor towards "the thing", but it's not "the thing", as Shakespeare wrote, "The play's the thing." If an effect is used well, appropriately, not gratuitously of for wont of a solid concept, then it can be like seasoning to a meal that's already good—and effect can enhance it.
If fancy fonts or pootsy Flash animations are the heart and soul of a website, they're the star and there is no real content to point to, then it's what we used to call in advertising "dancing baloney (bologna)".
All sizzle and no steak.
—Gary
Steve—
The fact that large corporate sites are telling their hired designers to go with a "Spartan Look", can be viewed as a copycat copying a copycat, Adobe started doing Minimalist and then someone else though it was trendy and followed their lead.
"Clean" is a "look"; professional...erm, well, yes as of 11am today, but aesthetics tend to follow a trend, unless one is a truly original power-broker in the field of web graphics. If you subscribe to the graphics newsletter LinkedIn offers members, they have a very good round-up of what's happening in all countries around the world with trendy design.
But when all's told, websites aren't all that different than other parcels for the dissemination of content, at least where design is concerned. We'd all be reading html if Marc Andreessen hadn't introduced the image tag in NetScape Navigator. Clearly we're not, and clearly we can deduce that people who surf like graphics and they're comfortable with website paradigms that imitate deliver forms they're familiar with, such as magazines and newspapers.
Bear with me here: the use of more than 2 or three fonts, fonts that have family members, is usually just bad design, whether it's online or on the printed page. So I'd like to discourage creative people from using every font on their system in a design as a general rule, not exclusively to using fontface. And as a general rule, a truly experienced design could indeed use, say 13 different fonts in a design and it could look swell. Rules are meant to be broken, but only those who have a profound understanding of rules can break them with beauty and coherence.
The thing I appreciate about fontface is that let's be real—everyone and their sister has used a bitmap of a font not supported in navigators to get it there for whatever reason. And this blows accessibility, Google won't search the page for that word, and fontface is a really good and friendly alternative if you have to use a font outside of the given 13 or so all browser support.
My Best,
Gary
I can't offer any empirical numbers on a website that uses embedded fonts versus the same website that doesn't use fontface, but realistically, a site that's "clean" of plug-ins and preloads has to load and run faster than an "encumbered" website, right?Quote:
Originally Posted by mwenz
So it begs that a site that does use fontface, does so wisely and with meaning.
The USA is behind just about all the European countries with bandwidth, but the trend is definitely toward speed, which somewhat alleviates preload stuff, and consider this: Google is perhaps the largest company that stands the most to lose when a web page doesn't load quickly. You can't search what you can't load, right? And yet the largest proponent of fontface is...Google.
-g-
I would argue that to Google, that within reason it is indiscriminate about the speed of page loads. Page loads do matter to ranking somewhat, but readable content will always trump page load speed. That is not to say pages that load slow due to construction techniques are not penalized, they are. But within G's speed consideration metrics, a page isn't unduly penalized because a site with generally similar content loads faster.
I suspect that Google doesn't penalize sites using font-face. Simply because as you say, they are encouraging its use, so I doubt the overhead matters to Google. (Again, within reason.)
@font-face is a good technology. If for no other reason that once it becomes more wide-spread all those sites out there are ripe for make-overs. Which is good for those who do such work. And from my perspective, using font-face does enhance a site. Like with print, I have seen some people go wild because they can. Which is no different than early DTP.
Take care, Mike
Hi GaryP,
I'm not getting what you are talking about here. Text boxes on TG are not a set size, they are fluid and are about 85% of the width of your browser window.Quote:
Type that is as long as the width of this text box but the same size is harder to read at this wide a measure as this text is at this size.
Are you talking about the typographic principles and rules of thumb that related to font size and line length?
The default body text size (the size a browser will use for paragraph text unless told otherwise) for browsers is 16px. The recommended line length for optimal readability is usually given as being somewhere between 45 and 72 characters, with font size, font choice, contrast between the type and the background and the line spacing or leading being major factors that affect readability.
"With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. Thus when the text size is changed, so the measure changes. Source: The Elements of Typographic Style Applied to the Web"
However recent studies of reading speed and comprehension when reading online news articles recommend 95 characters per line.
So I think that it basically comes back to the designer to specify fonts, line spacing and line lengths that best suit the content, the audience and the overall look or color of the online page, just as it does for print.
Personally, for large block of single column of body text on a page , I prefer higher contrast text (don't like type set at #444 or lighter as is trendy now) at 14 to 16px and leading or line spacing set to around 1.3 to 1.5em and line lengths of between 75 and 90. It is easier on my bi-focalish eyes and as the population as a whole ages large sized, high contrast body copy becomes more and more appreciated.
As far as using @fontface to load fonts for a web page, I believe it is a very useful tool in a designers toolbox. And as with all tools, it can be used with skill and precision, or ham-handedly to poor and amateurish effect.
Literally millions of sites small (The Xara Xone which serves them locally) and large (The Boston Globe which is served by a CDN) use fontface for headlines and other special text without any performance problems.
These stunning and often award-winning sites wield the fontface tool creatively and effectively. And clean, award winning sites like MENDO or Boozy Cake Company even use fontface for body copy without ill effect.
If a concern about font face performance issues are holding you back, it's really no more of a concern today than loading large graphics, video, Flash, widgets or iframes (Facebook-like buttons, analytics, or adservers for example, can be horrible drags on page loads) page load is affected—and we all use them from time to time.
With the new web designer programs now having the ability to embed fonts, this topic now becomes quite current.
So how many fonts is too many?(assuming here that one is not doing a fonts site as that is a different critter) I think that 3 maybe 4 tops on a site is plenty and I don't think I would use more than 3 very often.
What fonts pair well together?
Web or not web, consider these pairs when laying out an article:
Helvetica for headlines, Times New Roamn for body copy. I've also seen this reversed to good effect.
Futura for headlines, Garamond for body copy.
Lemme think some more of effective pairs of typefaces.
-g-
Two questions. First Q, I don't think it is much (if at all) different than print as regards how many fonts to use. I can see using 3–4 depending upon the web site.Quote:
Originally Posted by angelize
Second Q. Fonts should convey meaning and I think especially with a web site, structure that fits the design aesthetic. If I design something for print, I think I can get away with being a little more adventurous because someone reading a printed piece is a more or less captive audience. At least more so than the web.
With a web site, there is precious little time to convey the site and its contents to new visitors (returning viewers have made a commitment, so I am disregarding them here). So for me, I need to be clear about the site and its information straight away. Still, it depends on the site and its contents as to what fonts I would pair together. For a business, I would tend to be most conventional (sans serifs for body headings, either serif or sans serif for main title heads, and likely a good readable sans serif for the body).
But that is perhaps just me. Even with print design, I tend towards conventional, conservative lay out and do so with web sites as well.
Take care, Mike
There's an old saying in advertising, "When you got nothing to say, you sing it."
Same is true in print. If what you offer as written content is meager, you can attract attention by dressing up your text in fancy fonts.
This is no excuse for not writing content, but it's just a fire alarm, you pull it when you need to.
On the other hand, a message-intensive tome on a web page demands structure, but not the trendy, glossy treatment you'd graphically inflict on something more appropriate in a fashion magazine.
Taste, restraint, sensibilities, and relying on your previous experiences as a design should help point your course.
There is no ideal number of typefaces to use on a website.
The same as there is no social yardstick for excessive use of color, theme, or graphic style on a website.
The message HAS to dictate the execution of the site.
-g-
Different things for different people, honestly. At the very least, though, things must be easy to read and must be exciting to the eyes.
I always stick to what I've stumbled upon one day, to keep typography invisible. A good typography is invisible typography.
Um, your June post, longlivemedia, says that "things", I assume you mean text, must be exciting to the eyes.
And then yesterday you state that typography should be "invisible".
How is something that's invisible be exciting to the eye?
Please elaborate?
Thanks!
Gary