In my last post, I talked about the power of a typeface and the impact it can have on your audience.

Today, I will discuss the role and proper usage of fonts in web design.

Let’s start with the basics. Fonts can be divided into two categories: serif and sans serif. To put it simply, serif fonts have little tails at each character’s points, while sans serif fonts do not have these extra marks (“sans” is the French word for “without”).

Here, you can see a serif font (Georgia) next to a sans serif font (Verdana):

Believe it or not, there has been much research and debate on the two type categories, but the general consensus seems to indicate:

1. When viewing the document on-screen, sans serif fonts are easier to read (especially in small sizes) due to the effects of anti-aliasing.
2. When viewing the document in print, serif fonts are better.
3. Serif fonts are preferred in large formats (print and online) or when emphasizing text because it visually breaks apart each character.

While I wholeheartedly agree with all three points, there’s a fourth I’d like to add, a point from my perspective:

4. Serif fonts tend to “look” more serious

So what does this mean?

If you want your content to have a serious, business-like tone, set it in a serif font…but make sure the type is large enough to read easily.

Many designers would scoff at this advice, as we are taught never to use serif fonts for the main copy of a website. However, in my personal opinion, serif fonts can have a great impact when used correctly.

Now, let’s move on to the use of fonts in web design.

I have a love-hate relationship with fonts when designing a web page because there are so many fonts I would love to use (and I would have a glorious time choosing each one!)…but I’m restricted by the rules garnering web-safe fonts. This means that if the user does not have that particular font installed on their computer, they will only see the text in the default font set by the web browser.

You can see the (sadly) short list of web-safe fonts here.

There are three primary ways to work around this problem.

The first: convert your text into images. See the “Geek in Heels” at the top of this page? The font I used is an obscure type that most viewers would not have on their computers…so I’ve converted it into an image.

The downside to this method is obvious: while this can be useful when creating headers, menus and such, it just isn’t practical for large copies of text. Or with site with dynamic content. Or content that is frequently updated, such as a blog.

The second method is to embed the typeface within the document via PDF or Flash. With either formats, the typeface is loaded with the document so the visual rendering of the font is not lost. However, this method can also be impractical for the same reasons as the first.

The third method isn’t so much of a solution as it is a workaround via the use of font family stacks in CSS.

Here is an example of font stacking in CSS:

font-family: StoneInformal, Palatino Linotype, Book Antiqua, Palatino, serif;

This gives the browser an order in which the fonts should be displayed. In other words, the browser will first check to see if the user’s computer has StoneInformal installed. If not, it will then go onto Palatino Linotype, then Book Antiqua, etc.

By stacking the fonts with similar-looking fonts that are more common, you can at least guarantee that what the user sees bears some resemblance to what you intended.

That’s it for my tutorial on fonts and how to use them in web design. I tried my best to KISS (keep it simple, stupid) but I’m sure I got a bit carried away as this is a topic I find fascinating. Please let me know if you have any questions or comments!

This week’s NYTimes had an interesting OpEd titled To the Letter Born, discussing the impact that branding, especially the typeface Gotham, may have on Barack Obama’s campaign for the presidency.

For this piece, Stephen Heller interviews a branding expert named Brian Collins who explains:

…there’s an oxymoronic quality to Gotham, which is why I think it’s become so popular. It has a blunt, geometric simplicity, which usually makes words feel cold and analytical (like Univers), but it also feels warm. It’s substantial yet friendly. Up-to-date yet familiar. That’s a tough hat trick.

Collins goes on to display the word “Change” in three different typefaces:

Put the word “change” in Comic Sans and the idea feels lightweight and silly. Place it in Times Roman and it feels self-important. In Gotham, it feels just right. Inspiring, not threatening. In the end, typography makes a real difference when it delivers words and ideas that are relevant to people.

This piece naturally intrigued my designer self for two reasons. The first was due to my job: one of my main responsibilities during the first year of my current position was to implement the company’s new, updated logo and carry out the branding and stylistic guidance associated with it. Thus I am quite familiar with the power of branding and the importance of a consistent typeface.

The second reason is because I’m a font freak.

I love the power and impact of typefaces. I love how different fonts evoke certain moods. I relish the visual impact they have on marketing. I am a lover of written words and to me, a typeface that matches the mood of the message brings the final polish and an extra finesse that cannot be conjured by words alone.

Naturally I have many, many different fonts on my computer and I treasure each and every one of them. I even typed them all out for easy viewing…here is page 1 of 6:

(Yes, you don’t have to tell me…I do have OCD tendencies and this is a prime example.)

Whenever I have a design project on hand I pour over these pages in search for the perfect font. My obsession with fonts has come to a point where I can identify certain typefaces used in advertisements, signs, etc.

However, this obsession does have its drawbacks if you are a web designer. In my next post, I will talk about using fonts for your website: the two main categories of fonts; choosing the best font for your needs; and the limitations on web-based fonts, and the best ways to get around this problem.

A few days ago, LifeClever posted an articled called Portfolio Day might make you cry, but it’s worth it. I suddenly had a flashback…

As mentioned in my “About” page, I once was a very serious artist who was hell-bent on attending a good art program at one of the nation’s top art schools (RISD, Cooper Union, UCLA, Art Institute of Chicago, and MICA were my top choices). During the summer between my junior and senior years in high school, I was a regular fixture at my art studio, attending portfolio class every weekday from 12pm-3pm. I would often stay overtime to finish up and discuss my work and options with my beloved instructor.

Most art programs require 10-20 pieces demonstrating a student’s technical and creative abilities. I’m not sure about others, but my pieces often took 20+ hours from inception to completion, and I had 17 pieces in my portfolio…you do the math. I still remember the moment when my art teacher handed me the slides of my completed work and I nearly cried from joy.

I was ready to start applying to the said schools. But first, I had to go woo the top dogs at a National Portfolio Day:

National Portfolio Day is an event specifically for visual artists and designers. It is an opportunity for those who wish to pursue an education in the visual and related arts to meet with representatives from colleges accredited by the National Association of Schools of Art and Design. Representatives will be available to review your artwork, discuss their programs and answer questions about professional careers in art. High school students, parents, teachers, guidance counselors and college transfer students are encouraged to attend.

Unlike the AIGA Portfolio Day mentioned by LifeClever, National Portfolio Day is sponsored by the NPDA and is targeted for high school students and college transfer students.

National portfolio day @CCA by kenichi.tanaka at Flickr

All high school students interested in attending an art school are HIGHLY encouraged to attend a National Portfolio Day.

I talked to some older friends who gave me tips:

1. Get there early!
2. Scope out the list of schools attending beforehand and choose 3-5. You will most likely only have time to attend 3, since the lines for the more popular schools can get VERY long.
3. Bring food, drinks, and a friend or two who can keep you entertained and hold your place in line when you have to pee.
4. Never, EVER leave your portfolio unattended.

I was not able to attend the portfolio day held in NY due to scheduling reasons, so my parents and I woke up at 5am one Sunday morning to drive down to Philadelphia.

Unfortunately, Cooper Union and UCLA were not attending this particular portfolio day. So I narrowed my list down to RISD, Art Institute of Chicago, MICA, and Carnegie Mellon. My friends were correct – the lines were ridiculous! I think my parents and I waited 2-3 hours for each school.

I remember being a big miffed that RISD had only sent one associate professor and some students. Being the top art school in the nation, they were a bit snobby and frankly, treated me as if I were just a number.

I also remember how the rep for Carnegie Mellon was very patient and extremely nice…and even made me blush a few times by the comments he made on some of my pieces.

My overall impression of National Portfolio Day was a bit overwhelming. I had never quite realized how popular and competitive the art world is…and I was discouraged by the blasé response I’d gotten from some of my top choice schools.

However, the experience was not without benefits because few weeks later, I received a letter from Carnegie Mellon. I had made such a great impression on Portfolio Day that if I could provide an official transcript confirming a GPA of 3.0 or higher, I would be admitted with no questions. No essay on my application or anything like that! They even offered a very handsome scholarship.

In the end, I was accepted to some of the top art programs in the country…but I decided to go another direction. This decision will be the topic of a future post.

You may find it surprising that I was in a sorority in college. I was not only a member of this sorority, but I was very involved, having held three VP positions, a pledge mom one semester, and chapter president for two consecutive semesters. I can go on and on about my sorority days, but I’ll save that for another day.

One of the many things that the general public knows about the greek system is that when a member stars pledging, he/she is given a nickname. This nickname may be based on the pledge’s personality, looks, hobbies…almost anything!

My nickname was Mona Lisa. I will not divulge the exact meaning behind this name on the world wide web, but if you really want to know, ask and I’ll tell you.

Although I have studied art history extensively and is an avid art lover, I have never really liked da Vinci’s masterpiece. When I visited the Louvre in Paris, I found the painting underwhelming and could not understand why it was so popular. However, after gaining this new nickname, I naturally became more interested in the lady with the mysterious smile.

I knew that art historians and critics have varying, sometimes outrageous theories on the portrait and its model but the one thing that everyone seemed to focus on was her smile. Why is the Mona Lisa‘s smile so intriguing?

And today, I discovered that there may be a scientific explanation: because da Vinci painted her in colors that play tricks on the eye.

Margaret S. Livingstone is a professor of neurobiology at Harvard who studies how cells in the visual system process information: form, color, depth, and movement. She explains that the Mona Lisa‘s smile is almost entirely in low spatial frequencies, and so is best seen by your peripheral vision.

The three images above show the Mona Lisa‘s face filtered to show selectively lowest (left) low (middle) and high (right) spatial frequencies.

So what does this mean? When you look at the Mona Lisa‘s eyes or the background, you will associate the painting with a smile like the left or middle panels and think she is smiling. However, if you look directly at her smile, you will see the smile depicted in the right panel, where her smile has vanished.

In other words, she always seems to be smiling but doesn’t when you look directly at her. All due to an optical illusion.

How awesome is that?!?

Via Collision Detection.

Yesterday, New York’s MoMA began an exhibition called Design and the Elastic Mind, which, according to their website, “focuses on designers’ ability to grasp momentous changes in technology, science, and social mores, changes that will demand or reflect major adjustments in human behavior, and convert them into objects and systems that people understand and use.”

In other words, geek art. Right up my alley.

Here are three works from the online gallery that particularly caught my eyes:

“Attracted to Light,” from the Long Exposure series, by Geoffrey Mann

“Attracted to Light narrates the erratic behavior of a moth upon the stimulus of light,” explains the designer. The trajectory is captured through cinematic technology and the echo of the path, materialized through rapid prototyping, forms a delicately poetic hanging lamp. The Long Exposure series, which features the trace of a bird in flight and the echo of another taking off and landing, captures the transient beauty of time and motion.

I usually cannot stand moths, but this piece is so fluid and beautiful. I love the fact that it resembles a high-end designer lamp, because the piece itself is centered around light: the moth swirling around a light source, and imagining the scene as captured through a long exposure camera.

“Newton Virus,” Troika

The Newton Virus applies the laws of gravity to computer interfaces, causing desktop icons to fall down as if subject to the earth’s gravitational pull. Troika is developing other computing viruses as “an under-exploited art form,” using them for poetic purposes far from their traditional destructive and obstructive goals. The designers invite anyone with programming skills and imagination to participate in this challenge through their Web site.

Totally geekalicious. Need I say more?

“Lily Impeller,” Jayden D. Harman

The Lily Impeller is a mixer “designed using the elegant and effective geometries found in natural fluid flow,” explains its designer. Its shape, based on the logarithmic curve known as the Fibonacci spiral found in nautilus shells and whirlpools, accommodates a centripetal flow of liquid with a little friction. As a result the device is capable of circulating millions of gallons of water with a minimal amount of energy. Used in municipal reservoir tanks, the mixer prevents drinking water from stagnating, reducing the need for disinfectant additives.

I’ve been fascinated with the Fibonacci spiral ever since reading about it in a textbook back in elementary school. And to use the spiral to streamline and make better a simple process, using crude metals nonetheless…genius!

Design and the Elastic Mind will run through May 12, 2008. Go check it out!