{Carrer web log}

Serif vs. sans-serif legibility

Tuesday, October 27, 2009 { 9 Comments }

Probably one of everlasting discussion is legibility issue of serif and sans-serif fonts.

So I made some experiments in order to clarify the issue.

First thing I tried Jost Hochuli theory that we need only upper half of the letter in order to understand the text.

What is this?

Can you recognize this four letters?

What about now?

Left to right ( C Arial, C Georgia, O Arial, C Georgia)

So we have the upper part of the letter C and O (sans-serif Arial) and there are looking exactly the same.

C and O(sans-serif Arial) have exactly the same shape.



Our eye will try to close the missing part of the letter C and make O or circle.

There is one beautiful article about this: Gestalt Principles of Perception - 5: Closure.

In the case of C serif the barb will prevent our eye for closing the full circle or O.

Conclusion: Our eye can read faster serif because the logical line stops and we can faster "close" and determine the shape.

Serif and sans-serif on monitor

There is general opinion that sans-serif work better on screen.

That is probably because the monitors are displaying px so sans-serif look much cleaner. Serif fonts, specialy on low resolution monitors can look "noisy".

Can you notice the pixels in the right I letter?

In my opinion sans-serif give sense of order and clearness and display better on monitor, but clear and beautiful is not necessary readable.

Maybe the real question is do we prefer beautiful or readable.

Other interesting study( theory) was that we are fast reading Times New Roman because Times New Roman is everywhere specially in the newspapers and books.
In other words we are use to read Times New Roman and with time we get better and faster.

And probably the most important thing is the quality of the font. No matter if it is serif or sans-serif poorly designed font will give poor results.

Summary: A priori probably well designed serif fonts are more legible then well deigned sans-serif fonts. Then comes the experience factor, how often we read that particular type of font and how much we are use to it.

What do you think?

CSS Specificity Coding Method

Monday, October 12, 2009 { 3 Comments }

Few days ago I was reading the interesting Four Bubbles Model that inspired to think some alternative ways to organize CSS code.

One of the first thing you learn is the lower is better or:

.name {color:blue;}
.name {color:red;} /* the winner */

The class .name with red color overwrites .name with blue color.
So our logical assumption is the lower the objects are in the CSS they are more specific.

In the age before firebug I was spending a lot of time determining why "the color is red" and what part of CSS determines why should be red.

So if I order my CSS by their Specificity the search should be very easy, I should start from the bottom to the top. If you don’t understand how CSS Specificity here is CSS Specificity Cheat Sheet and some useful links.

Example:

Elements
p{}
a{}
ul li {}

Classes
.name{}
div.name{}

ID’s
#header{}
#sidebar{}

#footer{}
#sidebar li {}

Maybe most popular method now of CSS organization is thematic approach or we have something like:

• CSS Reset


• CSS Layout


• CSS Typography


• CSS Other

There is nothing wrong with this model and we can improve it by adding CSS Specificity.

Elements

Reset + Typography other elements

Classes

Layout Classes, Typography Classes other classes

ID’s

Layout ID and other ...

Here is practical demo .css file: CSS-Specificity-Model.css

Also live "lorem ipsum" working example: CSS-Specificity-Model.html

or you can download .zip of the example.

Note: The code used for this example is mainly taken from The Golden Grid - CSS Framework

In my opinion there is no perfect model for organizing your CSS, this model is just one way of approaching CSS.

Some other useful link and coding models:

Practical, maintainable CSS
Progressive Enhancement with CSS

What you think about this model?

Designing typographical wallpapers for iPhone

Tuesday, October 06, 2009 { 2 Comments }

I recently discovered http://typenuts.com site about iphone & desktop wallpapers for font freaks.

I couldn’t resist and right away started to design typographical wallpaper for iPhone.
I what to share the design process with you.

First I discovered the size and resolution of the iPhone(480-by-320-pixel resolution at 163 ppi).

The second question what to display on the wallpaper?

Why not just simply "iPhone".

Lately I’m obsessed with the golden proportion and search of perfect proportion. So you can understand why I choose Helvetica for the first experiment.

Also I wanted to try Jost Hochuli theory that we need only upper half of the letter in order to understand the text.

The letter "i" is 89mm and "Phone" is 13mm who are part of Fibonacci numbers sequence .

Prototype:



and result:



The second is wallpaper is dedicated to Georgia and that beautiful ""g".



And the third is Ampersand from Palatino. I used 5mm for palatino and 55mm for amp sign.



You can view and download all at Flickr iPhone typographical wallpapers

or download everything .PSD(source) and .jpg

You can play with photoshop file and personalize everything.

Enjoy!