Fungible Convictions

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

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/

Everyone in this class has a basic knowledge of CSS–cascading style sheets, which is the code, kept in a .css file, that, among other things, tells every bit of text on a website how it should look. An example CSS statement for text in a paragraph could look like this:

p {
font-family:"Times New Roman";
font-size: 20px;
line-height: 200%;
color: #333;
text-align: center;
}

Or in plain English:
For all paragraphs on this page, set…

• the typeface to Times New Roman
• the type size to 20 pixels
• the line spacing to double (so, 200% is the same as double-spacing)
• the text color to a medium gray
• and center the text

Choosing your measurement for text
But what many people don’t know is exactly why, in that statement, you would choose pixels as the measurement for your font-size when “em”, “pt”, a percentage, or even a keyword such as “xx-small” could also be used.

So when should you use pixels (px), points (pt), ems, percentages (%), or keywords in your CSS?

The answer has to do with context.

Pixels are absolute measurements, so that in a cascading stylesheet, pixels don’t “cascade”. If you set a parent element (p, for example) to be 12px and a child element (p > p.smalltext, for example) to be 10px, they will be 12px and 10px, respectively, on the nose.

But ems, percentages, and keywords are relative measurements. If p happens to be set in absolute terms like 12px but p.smalltext is set to .8em, p > p.smalltext will be .8 of the size of p (9.6 px). The same goes for percentages.

Why would you use relative measurements like em and %? Because it keeps all of the text in relative balance no matter how it gets resized by the user.

Choosing your measurement for block elements
Text is one thing. But these measurement types play a crucial design and usability role with block-level elements—divs mostly.

It would make lots of sense, and is a best practice on the typical blog design, to have the main-text div have a width that changes as the user resizes his or her screen. (We’ll talk about why this is a best practice in a future post.) You can’t do that with px, but you can with ems and %.

But for the sidebar, it does make sense to keep it a specific width—something you can only do with px.

And to touch briefly on points (pt), they should be used exclusively for your print stylesheet. It’s what tells the printer what size you want the text to be when a webpage is printed in hardcopy, and you don’t want the user to muck with how text is displayed in print.

So to sum up, when choosing pt, px, %, etc., each element of your webpage has its own needs, and you want to choose the right thing for that specific element.

Reference: http://css-tricks.com/css-font-size/

When I started this blog several years ago, it coincided with a professional study of print design—which meant I got more interested than the average geek in type-level CSS and options/standards for web typography. It’s to the point where I’ve now volunteered to teach a 2-hour course later this month during MIT’s Independent Activities Period (IAP) on typographic principles for the web.

Typography for the web: Principles and tools
Andrew Whitacre, Communications Manager, CMS/C4FCM
Tue Jan 26, 02-04:00pm, 2-142

Enrollment limited: advance sign up required (see contact below)
Signup by: 25-Jan-2010
Limited to 20 participants.
Single session event

There’s nothing better than good typography to make your website more readable, searchable, and beautiful. This class starts with the first principles of typography and applies them to the web. By the end of the class, you will know 1) how to choose the right font for the job, 2) how to design your text beautifully without sacrificing accessibility for the visually impaired, and 3) what tools are available to expand your skills and make your type-on-the-web life a whole lot easier. This class presumes basic knowledge of Cascading Style Sheets (CSS).
Contact: Andrew Whitacre, Communications Manager, CMS/C4FCM, awhit@MIT.EDU
Sponsor: Comparative Media Studies

When each person registered (it’s up to about a dozen folks now), I ask them to describe what they hope to get from the class and if there’s anything in their work they could especially benefit from learning about. (IAP courses are open to anyone at MIT—students, faculty, staff, anyone.) So I’m going to write up a set of blog posts here thrashing out my thoughts to their responses. One person wants to know about picking the right font for the job, another wants advice on marketing considerations, and everyone wants guidance on CSS.

I think they’ll be surprised to find out how much there is to know about accessibility—everything from proper contrast for older users to fluid widths to accommodate various screen sizes. I’ve budgeted twenty minutes for that section, but I can easily see it running over.

Anyway, overall this should be a blast. The posts coming over the next couple weeks should be interesting as I teach myself what I need to teach on the 26th.

Today had two little highlights. First, Gatsby finally laid still while I had my camera in hand to get a shot of her pornographic belly rub position:

Second, I sat in on one of MIT’s dozens of IAP courses—informal classes held between the fall and spring semesters. The one I went to was on surveillance, mainly telephone wiretapping:

The Bugs in Mr. Bell’s Circuits: Telephone Bugging and Debugging
James M. Atkinson Granite Island Group
Tue Jan 27, 03-06:00pm, 1-190

No enrollment limit, no advance sign up
Single session event

The fine art of telephone surveillance and how to detect it, distilled into a two-hour lecture by one of the nation’s top technical counter-surveillance experts. Ever wonder if someone’s listening in on your calls? Maybe that phone on your desk has been turned into a bug that sends your enemies anything you say nearby — regardless of whether you’ve picked up the handset or not. Drawing on 20-odd years’ experience hunting bugs and finding security leaks for governments and major multi-national corporations, Mr. Atkinson will cover both highly rigorous and somewhat more practical ways of frustrating spies and thinking about physical security.

Basically the presentation scared the sh*t out of me, particularly with how easy it is for anyone—a spy, a local cop, a jealous ex, whomever—to tap anything that goes over a wire. James Atkinson was pretty familiar with the MIT campus and its hardware too, so he was able to show a slide with a photo of the very phone I use in my office and show how to bug it so it acts like a microphone, picking up conversations from the room even when the phone itself is hung up. The simplicity of bugging was fascinating though, yet a lot of its success depends on laziness, like phone company workers who don’t lock what they should.

The whole thing made me wish I had understood circuitry better in AP Physics. Circuitry killed my grade.

http://www.boingboing.net/2008/12/17/henry-jenkinss-neil.html

Reposted from Rekha Murthy’s blog:

Why We Need Comparative Media Studies
– an open, collaboratively written letter to the Massachusetts Institute of Technology

December 5, 2008

Dr. Susan Hockfield, President
Massachusetts Institute of Technology
77 Massachusetts Avenue
Cambridge, MA 02139-4307

Dr. Hockfield:

The Massachusetts Institute of Technology is known globally for bringing the best and the brightest together in a hotbed of intellectual energy, innovation, and applied study. Increasingly, its reputation for academic leadership is reaching beyond science, engineering, and economics and into the humanities. As graduates of MIT’s Comparative Media Studies (CMS) Masters program, we have seen firsthand the role this visionary program plays in the wider world. Recently, CMS co-director Henry Jenkins III announced his plans to leave the Institute for a post at the University of Southern California, leaving only one dedicated faculty member — co-director William Uricchio — and an uncertain future for both the graduate and undergraduate programs. This decision has inspired us, the CMS Class of 2005, to reflect on our program’s unique and important approach to the study of media and technology. We urge you, Dr. Hockfield, and others in the Institute’s leadership, to give the support Comparative Media Studies needs to truly succeed at MIT.

Every fall, Professors Jenkins and Uricchio welcome a small cohort of students and professionals to a two-year graduate experience that will transform them into the media experts that industry and academia increasingly seek. The co-directors, whose complementary experience and leadership styles have been key to the program’s success, practice a philosophy they call “applied humanities”. With so much of our time spent interacting through and with media, applied humanities calls for a greater understanding of its historical, cultural, economic, and global context. Everyone — business and government leaders, journalists, educators, and citizens — benefits from humanities learning, including the ability to read, write, and circulate information to diverse audiences, across distribution channels that vary in their form and content demands. Applied humanities blends traditional academic research with hands-on engagement in the public and private sectors. Comparative Media Studies creates the environment for such principles to flourish by bringing together students from a wide range of fields, including education, film and video preservation, journalism, advertising, software development, and venture capital. The program’s deeply collaborative environment turns out thinking-practitioners who can translate for a broader public and ask forward-looking questions. How is social networking changing politics? What are the ethics of video games? What happens when popular cultures move across national borders? What is the future of digital reading?

Our rapidly changing times also call for the remembrance of technological and media history, lest we remain caught up in our societal fascination with newness. CMS reminds us that early radio in the 1920s and comics in the 1950s triggered moral panics over our “impressionable” youth — fears which we look back on as reactionary and simple-minded, even as the same turns of phrase are employed over certain video games and social networking sites today. Meanwhile, the asynchronous debates of Current TV and Twitter are pulling the political town hall meetings of the past into the 21st century, and Obama’s weekly online video address is bringing F.D.R.’s fireside chats to YouTube. From Herodotus, to the printing press, opera, and silent film, the CMS program’s deep grounding in history has taught us to apply an active historical frame in our professional roles shaping media business and policy.

We have had three years since graduation to test what Jenkins, Uricchio, and a supporting team of non-CMS faculty have imparted: in industry, academia, non-profits, and beyond. We’ve brought our talents for reflective communication to books, blogs, video games, and top Ph.D. programs. Many of us have created our own job descriptions. As Jenkins explains, the CMS program prepares students for jobs that may not have existed just a few years ago, yet are becoming vital to public and private sectors in flux.

Comparative Media Studies is not the only top-notch media program out there, but it is one of very few in the United States. As a field, media studies is often ensconced within humanities and social sciences departments, with limited exposure beyond pre-existing disciplines such as sociology, film studies, art history, or education. Forging a new paradigm for intellectual accomplishment means breaking down barriers between academic disciplines in non-tokenistic, durable ways. In the seemingly unlikely setting of MIT, applied humanities has flourished, with students drawing from urban studies, architecture, history, anthropology, and computer science to formulate and express their ideas. The program’s weekly public colloquia have brought leading media scholars and professionals to MIT, creating a rare opportunity for cross-disciplinary dialogue. Over the past decade, the program has also hosted several international scholars-in-residence, who have shared their expertise on topics as diverse as mobile phone culture in Japan and the history of military games in Germany. The program has also led to the formation of several major research initiatives, including the Convergence Culture Consortium (media convergence and its business ramifications), Center for Future Civic Media (social bonds in local communities), Project New Media Literacies (participatory culture) and the Singapore-MIT GAMBIT Lab (problem solving through video games).

With CMS, Jenkins and Uricchio created a new paradigm, yet they were never fully supported financially, physically, or emotionally by the Institute. Unfortunately, this is part of a more widespread reluctance of policymakers and academic institutions from K-12 onward to fully integrate media studies as an essential discipline of study in the 21st century. We applaud the work of programs at the Georgia Institute of Technology, Carnegie Mellon, the University of Michigan, and USC, where students and faculty are innovating the field. As these and other universities begin to recognize the value of applied humanities, we urge MIT to continue its leadership role in this field. Jenkins’ departure will be a huge loss for the MIT community. Let’s not compound his loss with the greater one of the entire program. Comparative Media Studies can continue into its second decade, but only with the full support — both moral and financial — of the Institute behind it. We hope that you and other decision-makers will see this time of change as an opportunity to demonstrate that the principles established by the founders are big enough to endure. We appeal to MIT to continue the Comparative Media Studies program, and we encourage other such programs to take form at colleges, universities, and K-12 schools around the world.

Yours sincerely,

The Comparative Media Studies Class of 2005
-Brett Camper
-Joellen Easton
-Brian R. Jacobson
-Andrea McCarty
-Rekha Murthy
-Karen Schrier
-Parmesh Shahani

cmsalum05 [at] gmail

I’m sitting at the back of Bartos Theater at MIT, listening to a panel talk about “Consumption, Value and Worth” during the third annual Futures of Entertainment (FOE) conference. But the panel is half the focus, because so many people in the room are sending tweets from their laptops with the “#foe” hashtag and uploading questions to the FOE backchan.nl: http://foe3.backchan.nl/meetings/view/6. Those questions are projected on a screen next to the panelists, and everyone with a computer can vote on which ones get asked.

Despite the neatness of it all, I can’t help but think of the last time I was in Bartos, when a woman walked up to a mic and asked a really offensive question about a presidential candidate. With backchan.nl, crappy questions get voted down before they’re put to the panel.