Blog Post #5: Web Typography

One of the big frustrations that designers have about designing for the Web is the historically poor state of web typography. As web designers strive for consistency across platforms, they have been forced to rely on only a small set of commonly installed fonts, knowing that their ideal choice of font may not be installed on the end-users system. As a result, designers would often turn to creating images for their headers and subheads (pictures of text instead of actual text), but this has never been a good choice for body copy as it has some draw backs in terms of file size, semantic markup, and accessibility. However, many people feel that typography on the web is finally beginning to mature. Why is that? What is the @font-face declaration and what are the implications of downloadable and/or hosted fonts? What is WOFF and why is it significant? What are your impressions about the current state (and future) of Web Typography?

I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:

"The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms."

I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!

I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.

I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!

I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!

Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.

Blog Post #1: "Erin's Challenge! I Can Speak Japanese" is cool!

Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?

The site I would like to feature for this post is Erin's Challenge! I Can Speak Japanese. I found this back in March while searching for Japanese language learning resources. It was created by the Japanese Foundation, an organization, that, according to their own website, "specializes in international cultural exchange in Japan," and is specifically sponsored by their Japanese-Language Institute in Urawa. Its purpose is to teach the Japanese language to foreigners through the use of 25 video skit "lessons" starring a young British girl named Erin who is studying abroad in Japan. Each lesson focuses on specific cultural situations which Erin encounters, such as introducing oneself, asking where something is, telling time, asking the price of a bus fare, and ordering food. Each lesson includes the video skit, a script of the skit, a manga rendition of the skit, and review questions. Text for the skit, script, and manga can be viewed in Japanese with kanji, Japanese without kanji, Romanji (Japanese written in Roman letters, like what we use), and English (or whatever foreign language you speak - I viewed the English site but you can also view the site in Japanese, Chinese, Spanish, Portuguese, or Korean). There are both basic and advanced versions of the skits available, allowing anyone of any level in the language to enjoy this resource. As the site's motto says, "Free Japanese learning website, even beginners can enjoy." You can also make an account on the website, which opens up more features, but the site is fully functional without one.

I find this site compelling because it provides an easy way for foreigners to learn Japanese. It has the script for those who learn best through writing as well as elements for visual learners such as the video and manga. The use of cultural situations to teach the lessons also introduces users to aspects of Japanese culture they might not otherwise learn about using other resources, as well as putting the learning into contexts that a visitor to Japan or study-abroad student might easily encounter.

I have not explored many Japanese language resources on the net, so I am not sure how Erin's Challenge differs from what else is out there. But its use of video and cultural situations is probably pretty unique. Plus the site seems very tailored to foreigners, especially as they feature a foreign character, which is cool. The site is also more interactive than most, with the features such as the videos and scripts, and features that help you understand what you learned, like the Key Phrases (which also includes a section showing how these key phrases can be used in situations other than the one Erin experienced) and the Let's Try area, which also introduces a situation similar to what Erin experienced but not the same (the one for the first lesson, for example, discusses exchanging business cards, even though the main lesson is on classroom introductions). They also provide a very useful FAQ that shows how to use each part of the site, as well as giving very specific technical specifications to help you get the most out of the site.

The video skits are a unique part of the site. Instead of just having a teacher teaching you Japanese, you get to follow a story, namely that of Erin's six months studying in Japan. Erin gives viewers somebody to relate to as they embark on their journey learning Japanese, which makes the experience that much more interactive!

As for how the site was made...clearly Flash was used for most, if not all, of it because the site is very dependent on Flash Player. The skits were taken from a DVD series, so some sort of video conversion software was used to put it on the internet. Since the site also allows you to make an account and features a "user ranking" sort of leaderboard, there is probably some sort of interface that manages that part. According to the FAQ, the site also uses JavaScript. The FAQ also suggests you have a large screen size (1024 x 768 or higher), which makes sense since the site takes up a large amount of screen space even on my laptop (which has a unusually wide screen and a resolution of 1280 x 800).

Anyway, I definitely recommend this site if you want an easy and creative way to learn the Japanese language! I now leave you with some screenshots of the site, taken by me in full-screen:

The site's homepage

The first Basic Skit in action.

The "Script" feature.

The "Manga" feature, with only English turned on.
Down in the corner, there is also a "Learn onomatopeia with manga" feature,
which helps you learn the Japanese words for different manga sound effects.

The "Review Questions" feature.

The first Advanced Skit in action. Though on the
same subject as the Basic Skit 1, the situation
is different.

The "Key Phrases" feature for Basic Skit 1 in action,
featuring an animated version of Erin along
with an animated "teacher."

The "Develop vocabulary" section for Basic Skit 1
(with a helpful reminder to get the latest
version of Flash Player on the bottom).

This trailer from the site's official YouTube channel also gives a very good overview of how the site works, including some stuff I forgot to mention: