Typography - Spare a thought for your readers!

Community
21

This entire topic is why I DREAD the coming of web fonts – and why 99% of the websites I develop stick with this:

font:normal 85%/140% arial,helvetica,sans-serif;

In the body CSS, and doesn’t get TOUCHED for anything other than headings or image interactions.

You’ll constantly hear mimicry of the lame excuses from the “I learned print and they called it web” PSD jockeys who fail to grasp that the web is NOT print. All their fancy serifs and fancy typography does on the web is get in the way of delivering the content to the user – defeating the point of even having a website in the first bloody place. I don’t care how pretty your goofy font is, if it prevents anyone from reading the content

The same goes for colors when the art *** up and decides on letting their inner child go wild – now, the WCAG’s formula for checking contrast is a bit complex… but that’s why I personally go with the old IBM/MS/APPLE co-developed contrast norms they put together for the old Win3, OS/2, and MacOS norms way way way back in the day – 50% luminance minimum, 75% luminance preferred. The formula for luminance on that measurement being:

L=0.3R+0.59G+0.11B

Which is hard-coded into the VGA for converting color to a monochrome display as well as the ATI chips used in most early color Macs, and can be found in several old computer books, most notably “The Programmers Guide to the EGA/VGA” by Richard E. Ferraro, “The Windows User Interface Guidelines” included in PDF form with the old Visual Basic and VC++ for Win 3.x, and there was an Apple Book for Object Pascal that said the exact same thing… “If the user can’t read your text, what good is it?”

If you take the foreground color, convert it to L, take the background color, convert it to L, and they are more than 50% apart they’re probably illegible to most people – and if they are 50-75% apart some people may have difficulty depending on the colors. (light on dark is more forgiving than dark on light in that regard).

… and the best part is that formula also miraculously prevents color-blindness issues too!

But it’s like font-size… as a large fonts/120dpi user I find anything smaller than 12px illegible, and even 14px is on the edge – which is why when FORCED to use px by an image interaction I go with 14px or larger, but I ALWAYS keep my content at 85% for sans-serif and 100% when/if serif is appropriate (which is to say almost never).

… and yeah, I’m not a fan of tag clouds either – what’s wrong with just listing them in order of popularity? OH wait, that would make SENSE.

Oh, and @ScallioXTX – You know, I love it when people link to articles talking about print, that are themselves illegible on screen THANKS to the use of serif fonts. Screen is NOT print – that whole 6.2% to 30% the resolution thing being a real kick between the legs on the use of serifs.

22

If the content is worth reading, I do usually zoom or remove author CSS (Opera makes it so easy), but that assumes I’ve already decided the content is worth reading - depending on how I’ve ended up at the site, if I’m not sure whether to persevere then I probably won’t.

I tend to only use one or two fonts on any one website; if you use too many different ones, they can start to jar on the reader, it looks random and haphazard, a bit like when you get your Christmas letter from a great aunt who’s just got Word and learned how to change fonts.

As for justified text - no thanks. Web browsers don’t generally do a great job of justifying text, you end up with uneven spacing, which just looks messy. It’s particularly bad when there are a lot of shorter paragraphs (or bullets), meaning that the few that go onto two lines end up stretched out but not obviously lining up with anything.

Agreed. And for those of us who don’t have ClearType or any other kind of font smoothing, please use fonts that have been designed for screen use, such as Verdana, Tahoma (as long as you don’t want italics), Calibri, Trebuchet or Arial, and not print fonts like Century Gothic or Gill Sans, which don’t render at all well at body text size.

Just to add my voice to the line-height - this is something IMX that too few authors bother to change, and particularly those who go for too-small text. Adding just a little bit of extra leading can really open the text up and make it much easier to read.

23

I think in general artistic fonts should only be used in headers etc and converted to images as many people wouldn’t have non standard fonts. The main body of the text should be in Tahoma, Verdana etc, an easy to read font of a minimum size 12, I think i’m correct is saying that is along the google guidelines for commercial websites.

Robert mentioned a light gray font on a white background, that smacks of old outdated SEO to me. Again, I think i’m correct is saying Google bot picks up low contrast font/background differences and treats it as low quality SEO

24

I actually agree with many of DeathShadow’s points
I think that semi-artsy fonts should only be used in headings and sans-serif fonts should be used in content.

I mean, what good is the content if it can not be read?

i remember a friend of mine who build an entire site with old-english font :nono:
And he actually thought that it was nice.

Artsy fonts and typography are good for print, graphic, and document design.

I think a true form of typographic art is the minimal-ness of it.
In other words, how simple can you make it while it still being elegant / professional / attractive.

In regards to tag clouds-- that does make complete sense! Why have a series of random tags, the most popular ones should be the ones displayed!

Edit: Another point.
Imagine what a page, when translated, would look like if it was in an artsy font. Some characters would look pretty bad.

25

I guess I have one more question / comment.

Is black on white fine? I mean, that seems like the most readable option.

Also, What about dark fonts on a washed-out / small-opacity colour background.

Finally, here is some propaganda:
What happens when you use comic sans

Honestly, I think some fonts, including many of these should even be avoided in print.

26

Yes, I definitely should have picked a better source for that one :blush:

No problem here. Black on any light color is the easiest to read and doesn’t leave any ‘after images’ for me. Although I could get a bit boring. Then again I’d rather have boring than after images :slight_smile:

Those fonts have their place I think, for certain applications. But they are indeed not fonts that should be slapped on any sites “because they look funny” grrr

27

You asked two actually… :smiley:

Works here, works for Google, works for eBay, works for Amazon… look at the REALLY big successes, you can come away with some good lessons despite their web-rot codebases. (or in the case of google, their increasingly bloated scripting for nothing codebases).

Every time some art *** starts spouting off about needing colors and fancy fonts across a page, I point them at the three biggest commercial successes on the Internet. If you have content people want and present it in a clear, simple and accessible manner, the rest doesn’t matter!

depends on the background to me – for the most part I avoid opacity behind text because with many backgrounds it’s difficult to read, and worse it makes scrolling the page painful for many users. It’s the type of amateurish garbage I’d expect out of a MySpace page, and not something built by a web professional.

That too.

28

What about a bg colour of rgb(159, 173, 205) / hsl(222° , 22% , 80%) ?

29

Additive luminance on that is 67%, not 80%… You pulled the hsl from some image editor, (probably adobe for the lose) which is again flawed since that’s math is designed for subtractive (print)

As such with that color it’s impossible to hit the 75% ideal, meaning it’s pretty much black or nothing and even then, it’s iffy. Pushing the luminance in the same hue to the minimums I’d be looking at #B0C0E3 (176,192,227) as the ‘darkest’ I’d be willing to go on that… (75% luminance) and I’d probably just go with #BCE (187,204,238) since I like to stay on the 3 digit boundaries.

Which is part of what I mean when I say that people are learning print even when it’s not called print – even the art students are only really learning subtractive (pigment, cmy), with additive (light, rgb) rarely covered properly.

30

Black background with white text, it burns into my eyes, I can see the letters long after scrolling down or leaving the page.

I don’t mind gray text, or small text, just that I hate too much contrast.

31

Yes I did. lol. FTL I was too lazy to figure the hsl myself so I opened photoshop and I typed in my rgba and got this, false, hsl.

Okay Well, that makes some sense to me :slight_smile: I’ll play around with getting the luminescence to 75.

Yes as I have said before: although I started with web design, I fell in love with graphic design as I was more successful with it.
However, with the development of CSS and html, I went back to web design in the mid / early 2000’s. But I still love graphic design and I do it separately.
However, sometimes part of that sneaks into my web design.
And Yes, rgba and light is rarely ever covered in graphic design literature. Which is because in print one uses cmy / cmyk pigments as you mentioned above.
However, i do agree that it is necessary that graphic designers / artists are taught rgb as well for when they apply their artwork to electronic / screen / web venues.

I know you are not an artsy or graphics person, and I maybe will have to ask that section of the SP forums, butDo you know of any good articles on RGB and light– maybe even in comparison to CMY Pigments ?

32

I don’t think that’s it at all. We’re not talking about blocks of keyword-stuffed text that are positioned half out-of-sight that they don’t want people to see. We’re talking about when the main body text is in a tiny font with way too little contrast against the background.

Designers do this all too often, because they often have great eyesight and top-notch monitors, so they can read it OK … but they forget that most people don’t have great eyesight and don’t have top-notch monitors, so can’t read it easily, if at all. It’s more usually down to ignorance (not realising there’s a problem) or arrogance (believing the supremacy of the aesthetics is more important than actual legibility) than actual malicious black hat SEO.

33
Off Topic:

Actually, here’s a shocker – I am… acrylic on miniatures, carving miniatures, [url=http://my.opera.com/deathshadow/albums/show.dml?id=248024]oil pencil on watercolor paper, [url=]3d models… and [url=http://www.ewiusb.com/]a musician.

I even worked for several years closely with a print graphics department making brochures for membership at a living history museum. (at which point I WAS the membership department after they sacked everone else). I can do layout in Pagemaker or QuarkExpress as good as the rest of them – I can even spin my own fonts from scratch if need be. (Both of the truetype fonts in the misc downloads section of classicbattletech.com I made myself – prior to that they were doing one-off hand-drawn for every book/document title.)

It’s actually what makes me particularly infuriating to people – I have this nasty habit of not badmouthing things until I’ve actually used them. It’s why my comments usually strike a nerve; I know exactly where to stick the knife and twist it.

Hell, I am an art {sexual preference slur omitted so as not to offend Wanda Sykes}, I just think it has no real place in online content delivery for the majority of websites and recognize that print is not the web.

I’m often amazed at the endless entire chapters or even books devoted to colour theory, when it’s actually so insanely simple a thing that shouldn’t take more than more than a few paragraphs to explain if you paid attention in high school physics. WHY am I tempted to quote MC Hawkings on that one?

Either that or all those years programming 16 color CGA/Tandy/EGA/VGA video modes… RGBi and rgbRGB as digital signaling… or making color printer drivers back in the DOS/Dot matrix days… I think a lot of this stuff isn’t learned properly anymore because the technology is handling too much of it for the average “user” these days. There’s no getting down into the guts of things anymore.

I mean, RGB vs. CMY is simple really.

G+B=C
R+B=M
R+G=Y

M-Y=R
C-Y=G
C-M=B

They’re literally just a 60 degree rotation of a color wheel apart from each-other.

Hell in print, the only reason blacK gets involved is it’s very hard to get “true pigments” or to get them to mix properly on the page. Without a full pigment saturation and “true to color” pigments you’ll get a purple-ish black when mixed instead of true black.

That’s really all there is to it. It does get more complex handling HSL and so forth, but since the device we’re talking about it. I’m not even sure the math to figure out hue and saturation conversion from RGB (all I know is the L formula because its’ all I really need), I just know the method used in most paint programs seems to be way off for additive and nowhere near the numbers used in video production.

34

Yes we do.

35

EXACTLY. Especially the part about aesthetics vs. functionality

… and that’s what legibility is, an aspect of functionality. Hence the question I end up with on many of the more… artsy websites: “Very pretty, but what good is it?”

About… wow, ok… two decades ago I was dating this hot little number going to a liberal arts school inside the 128 belt outside of Boston. A marketing major with a minor in design, she was all excited in her third year to flex her newly learned typography and typesetting skills to make the programs and T-Shirts for the school’s comedy troupe.

After three weeks of slaving away at it she showed me one of the prototype shirts… and I said “What on earth is a Gomuddy Greue?”

“It says comedy crew!” – RIGHT

So I held it out the door in the hallway and asked her neighbor “What does this say?”

what’s a Gomuddy Greue?

It was very attractive, in a most ornate script, but if nobody can figure out what it actually says… what good is it?

36

I remember learning that back in school, why didn’t I remember that ? :lol:

Probably because it was not emphasised enough?

Thank you for the information!

37

Typography ninjas are easy to spot. They have consistently beautiful marketing materials that are easy to read. Their websites look classy, their presentations are stunning, their e-books are gorgeous.

/snip

38

I very hate small light text on black background, or light text on fullcolor image background

39

It is certainly nice to have some variety. There are typically 5-6 that I always see on 99% of websites.

40