Web Fontography Fun

With the rise of @font-face font linking in the all of the “big five” desktop browsers—Safari, Firefox, Opera, and Chrome—true web-specific typography is beginning to take shape.

In an excellent blog post from "A List Apart," Richard Fink looks at several events that have brought web typography to the forefront and addresses some of the issues it still faces. He covers the following in depth:

1. A Web Fonts Working Group was chartered at the W3C on March 18, 2010. Its first order of business was to establish the WOFF specification as the standard compressed “wrapper” format for delivering sfnt (OTF and TTF) fonts on the web.
2. Font rendering in IE9 using Windows’s DirectWrite has been unveiled via the see-for-yourself IE9 Platform Preview.
3. The first round of web font preparation tools like Font Squirrel’s @Font-FaceGenerator and EOTFAST have appeared.
4. A new wave of “font hosting and obfuscation” services (FHOS) have appeared alongside Typekit, Typotheque, and the free and open source Kernest.
5. The first “trusting” web font licenses from commercial font designers have appeared.
6. The CSS3 Fonts Module has evolved to include some of the advanced features of OpenType.
7. Adobe Flash, once a reliable cross-platform means of text replacement (sIFR), now appears permanently crippled.
8. Google has launched a free font-hosting service for a growing library of fonts. All of them available for self-hosting, too.

First of all, it's about time we found a way to use more fonts on the web. I'm really amazed it took this long!

Second, the new font formats for the web mentioned in the post including WOFF are a step in the right direction. WOFF is essentially a zipped font file that will soon be the standard “transport format” for fonts. It’s gaining support from Mozilla and Chrome right now and was sponsored by Microsoft and Opera in a submission to the W3C Fonts Working Group.

And finally (thankfully), Fink points out that he believes the Font Hosting And Obfuscation Services (FHOS) such as Typekit, Typotheque, Kernest and others are just a passing phase on the way to much better supported web typography solutions. We’re still in the growing pains of this new technology.

"You can view FHOS as a phase. Services are innovating. For example, the WebINK service from Extensis features a free installable “preview wizard” of sorts called Type Drawer that enables you, among other things, to instantly swap selected fonts on your page with drag and drop simplicity. This can be a huge time saver and it is certainly the kind of authoring tool designers need. Right now it’s proprietary to the WebINK service, but still it helps in shaping things to come."

Blindfolded Design 2.0 Peeking at CSS

I can't get away from the idea that coding CSS is a guessing game for beginners.
My process lately has digressed into:
1. Guess the best measures for different margins and colors.
2. Save the document.
3. Cross fingers.
4. Close one eye (somehow disappointment is better through one eye at a time).
5. Refresh browser or preview screen.
6. Sigh.
7. Guess again.

I am very thankful for layout generators, but that only gets you so far.

After our last project site, a site comprised of two to three pages, I've added one more criteria to my website design checklist: Check on another computer. I had checked the site in other browsers on my laptop, but it looked significantly different on my work computer. I think it had something to do with my  default browser font size because my text looked huge on the other computer.

Now, I'm not only guessing against what I can see in the five browsers I have on my computer, but also against what I can't see on other's screens. I'm having a hard time adjusting to that!

In other news, I'm excited about the added design properties available in CSS3 we've just started looking at in class. Hoorah for text-shadow!

I'm older than the World Wide Web

Above the abridged, international version of the history of the internet video we watched last week. I really enjoy the extra details about England and France because I had a sneaking suspicion it wasn't just us Americans who contributed to the internet's inception. The relative infancy of the internet and the it's more modern component the World Wide Web (WWW) surprised me.

I'm older than the web. If you were born before 1990, so are you. It's just mind-boggling to look back on how fast the technological changes happened once good old Tim Berners-Lee came up with HTML and coined the WWW we all use now. It's been only 20 years!

The number of sites has also grown exponentially.

According to a 2008 Google study, there are more than one trillion unique URLs on the internet today. We have come a long way since the first baby steps of the WWW. Back in January of 1996 there were 100,000 websites, and looking back even further to mid-1993 there were only a total of 130 websites. Not much need for Google in those days…

Here's a graphic outlining the growth of websites from 1990 to 2008. I'm sure at this point the graph line is pointing straight up due to the massive growth in more recent years.

Wonder about that one, single website back in December of 1990? That was info.cern.ch, the first-ever website and web server, created by Berners-Lee.

Historical perspective achieved. I can't believe I'm older than the web! From here it's just a hop, skip and a jump away from a, "I remember when" comment I can deliver to the next generation. Boy I feel old.

Paying attention to webpage layouts

As we move into CSS layouts, I’ve started to pay more attention to the layouts of some of my favorite web pages. Over the years, I’ve found that layout is a learned art form. When I first began doing layout art, I was working for my college newspaper on the sports page. My first page design was a disaster! After working for hours on arranging several boxes to fill the space on the standard broadsheet, my editor came by and told me two things:

1.         Scrap your design
2.         Go out, buy a newspaper and really look at the layouts. Break them down into the boxes they are and get some ideas for making your page better.

She was absolutely right, my layout was horrible! But, after years of looking at newspapers and emulating layout designs, I’ve really improved my design capabilities. Now in web design, I’m back to the basics. I realize that I’ve been as oblivious to the underlying structure of web layouts as I was years ago with newspapers.

As designers, that’s what we really want from a layout. We don’t want the users to actively notice the columns and rows. The layout itself should make the page’s content clearly understandably, easy to navigate and intuitively elegant. I’ve learned over the years that good layouts aren’t particularly complex. The content itself should delineate how the layout works. NEVER let your layout define your content! That’s a big no-no I learned working on the newspaper. Another is when all else fails, just remember “KISS.” Keep it simple, stupid.

Before I can move on with my web layout skills, I think I’ll take my former editor’s advice and start paying more attention to the layout of sites I go to all the time. There’s a lot I’ve been missing.

Web Content Really is King

In and around the entreaties to use clear, concise coding techniques, our textbook writer John Allsopp mentions again and again the importance of good content. Before we dive into the design-intensive side of this course, I think it’s time to expound on that point. What is good web content? How do you know it when you’re looking at it?

The best and normal content test happens when we (the users) are searching for information. For instance, this evening I went looking for details on an event happening in town that I had seen on an electronic billboard. Following a normal course of action, I googled the business to find get more information about the event from their website. Talk about a disaster!  The site was disjointed with links pointing here and there and product information in oddly spaced columns. I clicked on the “In the News” link expecting a press release site/blog or event detail list, but it took me to an article on the company in Texas Monthly. There was nothing else on the site I could find that looked like it would have event details.

Next, I searched for the company on Facebook, often the place where the most up-to-date details are posted. I finally found their page, but the link they posted about the event took me back to their site where I learned even less about the event. It contained only a bio of the person who was coming and no specific time/place/date details. DEAD END!

In my world bad web content happens when a user searches for something and cannot find it on your site. Or, they find it but it doesn’t give full details, contains incorrect or misleading information or just flat out doesn’t make sense to them. Content like code should be clear, concise and intuitive. It reinforces the entire purpose of the page itself. Why would you create a page without content or with bad content?

As a writer, I’ve learned how to identify bad writing, but what should good writing/content include?

• Information users can’t get anywhere else
• Details on a particular subject that have been aggregated and distilled into what’s most important
• Specifics on event information or statistics or news in a clear, concise, easy-to-read format
• A purpose; a reason for existing and taking up valuable pixels on your screen

Not only should sites focus on the importance of good content, but the coding and design should flow out of the purpose of the content as well. That’s because users are after the content. According to an excellent article in Smashing Magazine by Michael Aleo, design should make content better, but it cannot totally make up for bad content.

“The user is after content, not your gradient-laden design and CSS3 hover effects. Your job is to get them there as painlessly as possible. At the same time, great design can enhance content and take a website to the next level. Great design not only gives a website credibility, but it can lead to a better experience. Mediocre design and great content lose out every time to great design and great content. It just makes for a better overall experience, where content and design both play a role.”

Just as Allsopp says we should make our code as easy for browsers to read as possible, the content on our web pages should have the same goal. For designer/developers, that means not allowing design to get in the way of the message that needs to be conveyed, and for content producers and writers, that means creating clean, important copy and leaving out everything else.

Past these revelations is the even more intriguing work of strategic web content (anticipating what users are looking for and making it easier for them to get), which I will not expound on here. There are some great blogs devoted to strategic content including: http://blog.braintraffic.com/, http://lucidplot.com/ and Content Strategy Week on http://johnnyholland.org to name a very few.

How to Convince Someone That Web Accessibility is Important

So we've talked about web accessibility in our development class. We read the excellent chapter on accessibility in "Developing with Web Standards" by John Allsopp and looked at different ways to validate code for accessibility. I get it. Web accessibility is important and there are a lot of great tools to get you there. But how do you convince a non-interested party (NIP) of the importance of web accessibility (WA)?


1. Hit them with the facts.
Your NIP is probably a normal functioning person who's never thought about WA. They've never wondered about how a blind or deaf person uses the web. They don't know that many normal people can't distinguish between colors like red and green. To give some scope to the amount of people that WA can help, it all begins with the facts.

According to the U.S. Census brief, Disability Status: 2000 (.pdf):

• 49.7 million (19%) of people ages 5 and over have disabilities
• 5.2 million are between 5-20 years of age
• 30.6 million are between 21-64 years of age
• Of the total number, only 57% are employed (average income $33,109 vs. $43,269 for the general population)
• 7.7 million have difficulty seeing newspaper print (even with correction)
• 8.0 million have difficulty hearing conversation (even with correction)
• Disabilities include visual, hearing, cognitive and mobility impairments

49.7 million people! That's a lot by any standard and I'm sure the 2010 Census numbers will be even larger.

2. Show them what it's like to use the web with a disability. 

• Use the neat, free screen reader Web Anywhere to let them listen to a website. 
• Show them what it's like to try and access everything on a site using only the keyboard.
• Let them see a site through the eyes of a color blind person with a filter site like this one.

The Web Accessibility Initiative (WAI) has a great listing of scenarios of people with disabilities using the web that can give you some good stories of disabled individuals attempting normal tasks online and the difficulties they run into.


3. Bring on the guilt trip.
Here's an older video of students with disabilities describing what it's like to use the internet. (Of course, the captions haven't been edited by whoever uploaded it, so the video itself is inaccessible. Oh irony!)




4. Tell them why you care.
Explain what you've learned about WA in addition to the information above. Make it personal. The web should be made available to everyone. It is increasingly an essential resource for many aspects of life: education, employment, government, commerce, health care, recreation, social interaction, and more. The web is used not only for receiving information, but also for providing information and interacting with society. Even the UN Convention on the Rights of Persons with Disabilities (2006) recognizes Web accessibility as a basic human right. I imagine it's a right your NIP wouldn't want to lose either.

5. If all else fails, WA is win-win.
Give your NIP a list of the ways WA benefits users who aren't disabled.

It also benefits...
older users, mobile phone users, users with low literacy, users with older technology or low bandwith connections, students with different learning styles and users not fluent in English

and it...

• helps with search engine optimization or SEO
• demonstrates corporate social responsibility
• increases customer loyalty
• reduces law suit risks

...and much more! The WAI has a great list of different motivations for moving toward WA that is broken down by type of business or organization.

Good luck getting your NIP on board with the WA wagon. The more non web developers we make aware of the importance of WA, the more we move toward changing the way the web works for the better of ALL users!

Typography & the Web

Go to: 6 Ways To Improve Your Web Typography

I’ve been reading a lot lately on web typography thanks to this great article from A List Apart on soft hyphenation, a blog post with tips on improving web typography and the web typography adaptation of Robert Bringhurst's "The Elements of Typographic Style." Since I came from the print world of strict word and line spacing and typographic manipulation, these resources have been very handy in figuring out how to override the basic browser settings for typography.

The soft hyphenation problem comes up with text that is justified. Justified text is both flush left and flush right so all lines of text except the last lines of paragraphs are stretched out to the same length. Hyphens are used to break words at the end of lines to help prevent gaps in word spacing. The hyphens that break up words in justified text are called soft hyphens. Generally, they aren't used on the web as the default alignment is left align, which leaves a ragged right edge on paragraphs.

However, this practice does not created the most readable text, especially when it comes to eBooks. Unfortunately, (as illustrated by the iPad and Kindle, ebook readers) though text can be justified, the soft hyphenation still gets ignored. They require readers put up with justified text withough natural breaking hyphens which causes odd spaces to show up.

Example of justification without hyphens:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

Example of left align:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

There is a way to hard code soft hyphens into text, but according to "A List Apart," using javascript to create hyphenated, justified text is a smarter way to achieve this end:

"Hard coding soft hyphens is a good path to understanding how they work, but a bad thing to do in practice. Soft hyphens make the HTML text hard to read and edit. Additionally, they may create difficulties for search engines. Users can’t turn soft hyphenation on and off with a simple UI widget. Using JavaScript to apply soft hyphens makes a lot more sense and works quite well."

The blog recommends the script, Sweet Justice, that can run English words through a hyphenation dictionary to break up words at the correct place to wrap to the next line. This looks like a very handy script!

Also, I found out how to insert en and em dashes this week as well! According the A List Apart blog, I can use en dash (–) or em dash (—). This is very exciting since we use a lot of em dashes in our writing to denote dramatic pauses and lists.

The Typographic Guide has really been a helpful resource for all my type-related questions including leading, kerning and more. So with great guides like these and scripts, I can continue to modify text and typography to my heart's content!