Fungible Convictions

Shoulda taken photos as I went through each step, but here’s how it went down…

Time

3 hours (most if it in front of the TV while glue dries in step 3), plus 2 years (optional, step 6)

Materials

• 4′x2′ pegboard (multiple sheets if you have more wallspace, they’re made to fit alongside each other; just be sure to use heavy tape to keep them aligned while you build/attach the frames in steps 3 and 4)
• 1x3s for a backing frame, cut to two pieces at 2′ and two pieces at ~43″.
• Power drill (saw elsewhere that a hammer drill is strongly recommended for masonry)
• Masonry bit, 5/32″
• Wood bit, 3/16″
• Level
• Wood glue
• Wood clamps (or similar)
• Screws, “Tapper” style, 3/16″ x 1 3/4″
• Assorted pegboard holders

How To

Note: The way I’ve done this means you won’t be able to use the three holes around the perimeter of the board. Wood will be blocking them from behind.

1. Hold the bare pegboard flat against the wall and mark where to drill your holes in the masonry. I chose the second hole at each end of the pegboard.I happened to have 4x4s leftover from another project, and those were a big help — I placed them on the workbench, which gave me a surface exactly eight inches up with a chance to use the level.
2. Drill holes at the marks with a masonry bit, which, god, what a pain in the butt that is. It takes a long, long time, a lot of strength, and lots of stopping to let the bit cool.
3. Looking at the back of your pegboard, lay out your 1×3′s in a rectangle. This will be your frame — what you actually attach to the wall. Make sure you like how they fit, and then one by one, use your wood glue to adhere each piece to the board. Work one piece at a time; 1×3′s tend to bow, so clamp each end down and let dry however long your glue bottle says. (Mine is half an hour.)
4. With your wood bit and using your earlier pegboard holes as a guide, drill holes through the wood. You’ll use these to attach everything to the wall. You’ll see I drilled mine at the second pegboard holes.You’ll also notice in the materials list that the masonry bit and drill bit are slightly different sizes. If you’re a gifted measurer, by all means, use both at 5/32″. But I used a bigger wood bit to give myself some literal wiggle room…I knew the frame and masonry holes wouldn’t perfectly aligned, so I knew I’d be able to go in at a slight, safe, still-strong angle.
5. Assuming all your holes are lined up, carefully screw your screws through each hole in the pegboard/wood into the holes in the masonry. Go partway with each and then go back and tighten. Don’t go crazy tightening — you don’t want to rip out a chunk of masonry. Just go far enough that the board feels firmly in place.
6. Spend the next two years obsessing over the best way to arrange your pegboard holders and hardware (optional).
7. Place your holders and hardware.

Frame built, pieces nearly square. Imprecision in cuts and bore holes resulted in some torquing and gaps, but lag screws largely pulled pieces back to perpendicular.

Top at the moment is simply a loose piece of plywood to check for level. I’ll start building the tabletop this week (32 54″ 1×2′s, pulled tight by five threaded rods and nuts, then sanded flat and level). The tabletop will have four small recesses to clear the lag screw heads at the underside. It will be secured with 4 4½ lag screws up through the 2×4′s and into the tabletop.

I’ll probably add plywood cut to size atop the stretchers as a shelf, perhaps with backings for both that and the tabletop to keep anything from falling off the back. Ideally I’d craft and attach drawers on the underside of the tabletop, but that’s something entirely different to learn.

Full plans at Popular Mechanics.

In my job, I often create publications and posters. I often have too little time for from-scratch illustrations, but fair-use conventions give me a chance to adapt elements of existing works.

One example is a photorealistic subway map I just designed for the cover of my department’s newsletter.

The job was relatively easy…it took me several hours worth of work to figure out how to do it, but with these steps it’s something you can do in less than an hour, shuttling back and forth between Illustrator and Photoshop…

1. Get a transportation agency’s subway map as a PDF.

The Massachusetts Bay Transportation Authority (MBTA) makes a high-resolution PDF of its system map available.

PDFs, it often turns out, preserve layers. Open your PDF in Adobe Illustrator, and you should find the original layers are editable. (If yours aren’t, sadly you’ll have to consider hand-deleting the original text.)

From there, you can customize the map, replacing stop names with your own text — in my case, faculty and grad students’ names, research themes, etc. (The MBTA, like many transport authorities, uses Helvetica as its typeface.)

2. Apply brushes for a slightly worn look.

Save your file and open it in Photoshop. Use a large charcoal paper brush with the opacity set low. Important: anything that you want to appear on the “paper” of the map should be done before step 3. In my image above, you may be able to tell I incorrectly applied the brush after step 3, giving the appearance more of dirty glass than of worn paper.

3. Create the illusion of perspective.

Save the Photoshop file and open it in Illustrator. Experiment with Illustrator’s rotate tool (Effects > 3D > Rotate) to find a 3D perspective you like.

4. Apply the “tilt-shift” trick.

Save the Illustrator file once more and open it in Photoshop. Follow this separate tutorial on creating the illusion of tilt-shift photography, which gives images with good depth of field the illusion of miniturization, or more precisely that your eyes are just inches away from a set of objects. The tutorial above walks you through making a central swath of the image in-focus and the rest out-of-focus, just as things appear when you look at them up close.

And that’s it! Did that work for you? Leave questions in the comments.

I read with my wife’s Amazon Kindle for the first time tonight, and I have to be honest, I didn’t like it very much. These are the things I don’t understand about it:

• Why did Amazon choose a slab serif font as its universal typeface? While Caecilia is a lovely typeface, slab serifs are about as pleasant for long-session reading as sans serifs, that is, not very.
• Why didn’t they style the subheads or, quite confusingly, the pullquotes?
• Why didn’t they use “keep” settings so that there aren’t widow or orphan lines?
• Was there no other way to represent progress through a book other than that meter at the bottom of the screen?

These are aesthetic concerns, yes, but they have a lot to do with how I read, process, and remember stories and information. I have no confidence in my ability to remember something I’ve read on a Kindle, because there are no design cues to help me collate what I read. Turning letters into narrative or knowledge needs a storyteller or a teacher, functions good design have traditionally served…that is, functions books have traditionally served.

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

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 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. 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 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. So, 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.

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

There are two drawbacks 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:

A huge website linked to one of my posts, and I’ve 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

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 not her father, who says he skims web content because he thinks the type is always too small.

Your task is to reassure Donna by filling out these CSS statements so 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.

Now we’ll look at some of the basic typographical issues for the three main CSS “levels”: pages and paragraphs, headers, and individual words

Page/paragraph level

As mentioned in the previous post, page- and paragraph-level typography mainly has to do with width considerations. You’ll want to obsess about how wide your lines of text run: too narrow and you may push a lot of text below the fold, resulting in a lot of scrolling; too wide, and your readers’ eyes get tired.

In print typography, it’s called “choosing a comfortable measure”. Traditionally, you want to keep lines limited to no more than 75 characters, with 66 characters being considered optimum. But on the web, it can and should be up to the user.

Therefore, take advantage of adjustable widths. You can set your text box width to be 50%, meaning no matter how wide the user sets their screen, the box will always fill 50% of it, with measures adjusting accordingly. Or you can set your text box to, say, 33em, meaning the box will always accommodate approximately 66 characters, with the box itself changing in size as the user makes adjustments.

Next, for the same reasons, obsess over your line-height. (In print typography, leading.) Each line needs a little space between the lines above and below, but too much or too little strains the eyes, especially for longer texts. It should suit the typeface, text level (body, heading, etc.), and measure. This CSS for example…

p {
font-size: 12pt;
line-height: 1.25;
}

…results in type that is 12pt with a breathable, comfortable line-height, 1.25 times the font-size, and stays 1.25 times the size no matter how the user resizes the type.

Having a stable line-height also gives you the chance to square up lines of body text with lines of sidebar text, no matter the font-size.

Header level

Similar in thinking to using a good measure, establish a good rhythm with your headers.

Book designers will tell you, “Don’t compose without a scale,” meaning everything—everything—has to be in rational proportion, especially headers. For example, if the default body text happens to be 16px, you should set your headings and paragraph text to sizes in proportion to 16px:

body { font-size:100%; }
h1 { font-size:2.25em; /* 16x2.25=36 */ }
h2 { font-size:1.5em; /* 16x1.5=24 */ }
h3 { font-size:1.125em; /* 16x1.125=18 */ }
h4 { font-size:0.875em; /* 16x0.875=14 */ }
p { font-size:0.75em; /* 16x0.75=12 */ }

Word level

At the word level, there’s actually very little agreement on best practices.

Historically, web designers argued that sans serif typefaces were all you should use for main text. This was because screen resolutions couldn’t quite render serifs cleanly enough—they were blurry or pixelated and generally looked worse than cleaner sans serif typefaces.

But with higher resolution screens, this isn’t as much an issue. It’s up to you and your readers’ needs.

However, there are some lesser-known CSS properties that you’ll want to take advantage of, especially for your headers. Pre-installed typefaces like Times New Roman, Arial, and Verdana are versatile but not perfect and can often benefit from tweaks at larger or very small sizes.

For example…

p {
word-spacing:0.25em;
}

h1 {
word-spacing:-0.125em;
}

…will result in words in a paragraph that are proportionally spaced out slightly more than default, while it will pull words in top-level headings slightly closer together.

The same can also be done with letter-spacing CSS property but should only be applied to large headings or with special combinations of letters such as an upper-case T preceding a lower-case o.

Last, there is the text-transform property. It should be used to define text that you always want to be uppercase, always lowercase, or always have their first letters capitalized.

Reference:
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/
http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.1/
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.8/