Fungible Convictions

Huge lists of resources

• 50 Useful Design Tools For Beautiful Web Typography
• 100 Free High-Quality XHTML/CSS Templates

Pure typographical tools

• Matrix of fonts bundled with Mac and Windows operating systems
• Typechart: “Lets you flip through, preview and compare web typography while retrieving the CSS”
• PXtoEM
• Em calculator
• CSSType
• Type matrix and code generator
• Typetester
• CSS Type Set

More general CSS tools

• Gridr Builderrr: Helps create versatile CSS for columns
• Grid Designer 2
• PSD2CSS: Converts a Photoshop layout into CSS—requires strict attention to its guidelines to work
• Layout Generators

Firefox plugins

• abcTajpu: Easy reference for special characters
• Web Developer: My all-time favorite tool, allows you live-tweak your CSS on your own site

Inspiration

• 12 Examples of Paragraph Typography
• Google: CSS Inspiration

Dear Massachusetts friends,

Tuesday is the special election for Ted Kennedy’s open U.S. Senate seat, and with it rides the fate of health care reform: the 60th vote.

I urge you to book an extra 30 minutes Tuesday morning to go to your polling place and vote for Democrat Martha Coakley:

Your voting location:

http://www.wheredoivotema.com/bal/myelectioninfo.php

Tons of my friends have the dreaded “pre-existing condition”. I have one. Someone in your family has one. If Coakley loses and health reform fails, it may be decades before discrimination based on pre-existing conditions can be fixed.

The bill isn’t perfect. But it lowers costs in the long-run, cares for the most vulnerable, and ensures coverage for millions of Americans.

Vote Coakley on Tuesday to pass these needed reforms.

Andrew

PS Forward this note to your friends throughout Massachusetts.

Accessibility means being able to say, “Yes, everyone can access my content.” It not only has to do with users with visual disabilities but also with users whose needs we touched on above: those with small or huge screens, those who prefer a certain text size, etc.

Text size

Legibility: Your typography at the very least should be legible. That means body text that is generously-sized, line-height that strikes a balance between the length of the line (horizontal) and the length of the text (vertical), and a font-choice that has a bias towards a sans serif.

Accommodating resizing: Some users will want to resize your text, usually to make it larger. It’s as simple as hitting Control+ (or Command+ on a Mac). If you haven’t built your text blocks to handle resizing—if your text overruns, overlaps, or does nothing at all—you’re not doing right by your user.

So as we discussed above:

1. Set min and max widths for your divs, and try to set a comfortable measure, around 66 characters per line
2. Set your text styles to relative measures like ems or %
3. In your headers, pay attention to lesser-used CSS elements such as word-spacing in order to space things comfortably

Accommodating hard-copy printing: But don’t forget to create a separate print style sheet, one that, in contrast to your master style sheet, strictly sets the sizes for your text. When you create print.css, every text element should be sized in points (pt).

Color

You want to keep two things in mind when choosing a color for your typeface.

First, Always have sufficient contrast. Black type on a white background is as contrasty as you can get, but while there’s no magic formula for measuring good contrast among the thousands of colors available, you can always print out your website (print the screen image, that is) on any black and white printer and see if it’s comfortable to read. W3.org suggests it this way:

To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.

Second, remember that all colors on a computer screen are being radiated. In print, black text absorbs light while the water paper reflects it, but on a screen, every color is shooting photons at the user. And these colors are being radiated differently depending on the monitor. So a red background can not only be intense on the eyes but it might show up as orange or pink to some users depending on how their monitor is calibrated. Therefore, remember that your dark gray text on a light blue background ultimately might not have enough contrast when it comes out of a monitor rendering them as medium gray text on a medium blue background.

So, again, concentrate on the user’s needs—you can even go as far as to make a second stylesheet that the user can opt for, for example if you sense a 50/50 split among your users’ preferences for light text on a dark background vs. the opposite.

Colorblindness: Around 8% of the male population suffers from some level of color-blindness. (Through a genetic quirk, colorblindness is significantly lower among women). So when you choose colors for your type and background, consider using a tool like Adobe’s Color Scheme Designer, which has a feature to help you see what a colorblind user sees. While there’s no magic formula for what colors work best, you always want to know what your site would look like to someone who isn’t seeing it as intended.

Fluid width

We’ve talked this one to death, but to reiterate one last time: different users have different screen sizes and different preferences for width. For your main blocks of text, always set a max and a min width, either in ems or &.

SIFr

One option I haven’t spoken about is SIFr (and similar options like FLIR and Typeface.js). For our purposes, they’re complicated to discuss, but here’s the background for SIFr and when you might use it.

SIFr stands for Scalable Inman Flash Replacement (Shaun Inman being the guy who came up with it), and it does what it says: it replaces each letter in a block of text with a Flash equivalent, using any typeface of the designer’s choosing. So if I have a heading that reads “Typography for the Web” but want it to be displayed with the typeface Meta, SIFr will use Flash to overlay the letters T, y, p, o and so on, in Meta, over top of those same letters in a traditional web-friendly typeface.

The benefits are twofold: you can use any typeface you want, and screenreaders (for blind users) and search engines can still read the content.

The drawbacks are twofold as well: it can be really difficult to implement, and because you’re using Flash or a script, it’s really only appropriate for headings—it would slow down the loading of body text to a point where the site is unpleasant to use.

Licensing

Lastly, I want to mention the licensing of typefaces. When I asked a group of typographers what they want people to know about type on the web, every one of them said—yelled, really—”Everyone needs to know that typefaces aren’t free!”

We’re accustomed to thinking type is free only because it comes pre-installed on our computers. And we at MIT are culturally accustomed to sharing everything. But Microsoft and Apple have in fact paid a lot of money to have those half a dozen basic types on your computers.

Typefaces can be downloaded just like music files can—both legally and illegally. So know that if you ever stray away from those basic typefaces and want to take advantage of something like SIFr, be sure you have some money budgeted to buy a license to use those new types or be sure are prepared to risk running afoul of the law.

References:
http://www.w3.org/TR/WCAG10-CSS-TECHS/
http://colorschemedesigner.com/
http://en.wikipedia.org/wiki/Color_blindness
http://veerle.duoh.com/blog/comments/my_view_on_light_text_on_dark_background_vs_readability/
http://www.mikeindustries.com/blog/sifr
http://www.fonts.com/

Donna loves what you did for her blog (see exercise #1). However, even though you went ahead with her request to use Verdana for the body text and even though her father says he can read it fine, Donna comes back to you with an issue:

She says that one of her posts got linked to by a few major websites, and she’s been getting tons of emails from random readers essentially saying, “I love your content. I want to keep reading it, but, at least on my screen, it’s really hard to read.”

With your partner, use everything you now know to discuss how you might:

1. Respond to these readers to probe their concerns
2. Use new CSS to address their concerns—without affecting Donna’s father’s reading experience

This is a depressingly short section. Why? Because despite the web’s having been around for two decades, we as website designers are still (practically speaking) limited to half a dozen “web-safe” typefaces supported by the majority of web browsers:

• Arial
• Comic Sans
• Courier New
• Georgia
• Times New Roman
• Trebuchet
• Verdana

You better have an ironic reason to ever use Comic Sans, which takes us down to five options.

It goes without saying that your typeface should reflect the style of your website. Trebuchet and Verdana might be good for more modern sites, while Georgia is good for text meant to look more conservative.

The key thing, though, is to collect some data on your users’ screen resolutions and colors. Serif fonts can be a strain on users’ eyes whose monitors can’t smoothly render small details like serifs. So if your website serves a large part of the general population—or, conversely, a large number of mobile users—consider sticking exclusively to sans serif fonts like Arial and Verdana for your body text.

Ironically, even as the average user’s monitor increases in resolution and number of colors it supports, the trend is also for users to have larger screens that display type even smaller, another argument in face of sans serif typefaces (as well as increased default text size).

You also want to keep in mind the concept of “graceful degradation”—meaning a website works even when a user doesn’t have everything needed for it to work as ideally intended (for example, when Javascript is turned off). Graceful degradation for fonts means understanding that different browsers handle different fonts differently, and thus you want/need some amount of control over that handling. The very basic example is the font-family statement:

So instead of:

h1 {
font: helvetica;
}

Use this instead:

h1 {
font-family: helvetica, arial, sans-serif;
}

That way, if the user doesn’t have Helvetica, the browser will render the text as an alternative sans serif font, Arial. And if the user then also doesn’t have Arial, it will use any available sans serif on the user’s system. The text degrades, but gracefully.

So in short:

• Stick to the five typefaces that are common enough not to cause problems
• Keep Arial and Verdana in your head as your default for body text
• And write your font-family statements such that they degrade gracefully

Later, we’ll touch upon reasons and methods for using typefaces that aren’t one of those five—largely for headings.

References:
https://www.google.com/analytics/reporting/resolutions
http://www.w3schools.com/browsers/browsers_display.asp
http://www.theinternetdigest.net/archive/websafefonts.html

Government’s role in the economy should be to allow creative accidents to happen and ensure destructive accidents don’t.

Right there in the middle, on the back of a packet of beef bullion:

"As a broth: For a satisfying hot beverage, dissolve contents in 1 cup (8 oz.) hot water."

I advocate throwing up in your mouth a little.

Dear Self:

Face-on-fire in Cambridge

Dear Face-on-fire in Cambridge,

First of all, you’re an idiot. But I’m sure your wife told you that already.

I’ll assume you already tried to rinse it out with water and that now you know you’ve just made things worse, because water just swishes it around some more.

Stop crying. Get a cotton ball or disc. Put some milk on it; milk naturally counteracts the capsaicin from a pepper. And then pick your nose with it—you’re good at that part.

Sincerely,

Self

You and the person sitting next to you have a friend, Donna, who has asked you two to help design a blog for her existing website. Donna feels a little in over her head, and all she knows is that the font needs to be Verdana–the same as the rest of her site–and that she’s worried no one will read her entire posts because she tends to write very long posts…especially her father, who says he tends to skim other blogs because he thinks the type is always too small.

Your task is to reassure Donna by filling out these CSS statements so that they will beautifully render the typography for her blog’s main text block. (Assume it is just the text block, with no sidebar or other divs.) How would you explain to Donna your decisions? Without knowing anything else about the rest of Donna’s website, what might you look for to make sure your blog typography fits with the site as a whole?*

/* The main text div */
#main-text {

}

/* The blog post's headline */
h2 {

}

/* The text of the blog post itself */
p {
font-family: Verdana, sans-serif;

}

*If you’re not comfortable enough with writing CSS from scratch, simply describe your thinking about what you would do with the main text block, heading, and paragraph text.