{Carrer web log}

Serif vs. sans-serif legibility

Tuesday, October 27, 2009 { 8 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!

CSS Specificity - Cheat Sheet

Tuesday, September 29, 2009 { 11 Comments }

One of most common difficulties with CSS is determining what CSS rule will be applied on the page. That was my nightmare when I started with CSS.

But actually is not so hard to understand how these rules are applied and the order of CSS Specificity.

I created CSS Cheat Sheet that I hope it can help you understand CSS Specificity better.



Download:

CSS Specificity - Cheat Sheet(.png)

CSS Specificity - Cheat Sheet(.pdf)

CSS Specificity - Cheat Sheet(.xls)

CSS Specificity - Cheat Sheet(.ods)


There are many articles talking about this issue, here are some:

• Calculating a selector's specificity


• CSS Specificity: Things You Should Know


• CSS: Specificity Wars


• Everything You Need To Know About CSS Selector Specificity


• Link Specificity


• Specificity | HTML Dog


• Understanding Specificity

Cheers!

Blog prototyping with Emastic using the Golden Proportion

Tuesday, September 22, 2009 { 0 Comments }

Our goal is to build blog web layout using the Golden Proportion and Emastic – CSS Framework.

More details on the Golden Proportion you can find at:

• Golden ratio - Wikipedia


• Golden Ratio in modern CSS - CSS Globe


• Design and the Divine Proportion - Mark Boulton

I build 6 CSS Libraries(Frameworks) but Emastic is probably my favorite, because it is most likely one of the most complete CSS Frameworks.

Few things about Emastic.

• Emastic is built with ems to improve usability.


• There are three layout systems inside Emastic the basic built width em, one based on % and one based on positioning.


• Emastic supports fixed and fluid columns.


• The typography is based on baseline grid.

Let’s start prototyping!

First we need some measurements in order to start. We can take some modern layout 955 to 980 px . We know that the golden ratio is 1 : 1.618.

How can the golden ratio fit in Emastic?

If we take that the default width is 980px than will have: 606px and 374px columns. Closest to 606px in emastic is 600px(or 50em) and we add 600px to 371px which is equal to 971px(GP).

Ok,so we have one 50em(600px) column. What about the other 371px column?

No problem, we can always use the fluid column and the problem is solved.

So we need main column(container) with 971px or (917/12 = 80.916em). One column of 600px = (600/12 = 50em) in emastic is dl60 meaning div left 60em and for 371px column we need to use the fluid class.

<div class="main">

<div class="dl50"></div>

<div class="fluid"></div>

</div>

And this is it. We have blog template respecting the golden proportion.



Download the template (.zip)

4 useful Bookmarklet for Twitter, Google, CSS, SEO

Tuesday, August 04, 2009 { 3 Comments }

What is bookmarklet?

Bookmarklets.com:

Bookmarklet is a tiny program (a JavaScript application) contained in a bookmark (the URL is a "javascript:" URL) which can be saved and used the same way you use normal bookmarks.

Wikipedia:

A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.

Techniacly speaking bookmarklet look like this:

<a href="javascript:alert('put some javascript after javascript:');"> bookmarklet </a>

The cool thing is bookmarklet is not a plug in and you don’t need to install it and works in every browser.

This week I was playing around with javascript and bookmarklets and I created some bookmarklet for my personal use. I think they can be useful for everyone.

FastTweet. I generally use the web interface for twitter posting. When I find some cool link on the web I normally do copy paste of the title and url. With this bookmarklet the process is automatic, inserting the url and title inside twitter. And you don’t need to give your twitter username and password.

AutoTranslate. Often happens some of my work to be translated or posted on some blog written on some language that I don’t understand. So I use Google Translate doing copy paste of the url and parameters setup. Now this bookmarklet will autotranslate any language(supported by GoogleTranslate) to English.

RedDIV. One of first things I do when I visit some new web site is to check up the site structure and CSS. Specially interesting for me is the DIV structure. So I build this "primitive" bookmarklet for fast DIV profiling, it will just put red border around the DIV. It also works in IE6 who has no fancy tools like Firebug. This tool is inspired from Jens Meiert post Diagnostic Styling Reloaded.

NoFollow is for SEO geeks. It simply colors nofollow links to yellow.

You can >> see and downlad bookmarklets here << .

Useful links:

How To Make a Bookmarklet For Your Web Application
Make a User Style Bookmarklet (I used for RedDIV and NoFollow)

Note:Like often happens I find out that "The Simpsons Already Did It" 5 minutes before the post.

Twitter Unofficial Redesign

Tuesday, June 23, 2009 { 10 Comments }

I often ask myself why twitter software clients have so big success. Is it something wrong with Twitter management system or is it just trendy to use twitter clients (Api).

So I decided to try to improve Twitter’s management page. The problem with the Twitter management page is that it’s almost exactly the same as the twitter profile page. But the goals of these two pages are completely different.

Let’s start

The first thing that bothers me the most is the number of tweets per page on the visual screen. I use 1240px monitor and now I can see 7-8 tweets without scrolling. Twitter is all about the tweets. So the main point of my redesign will be to give more vertical space and importance to twitter messages.

I usually start with the typography and then build everything else. Currently in the twitters CSS we have something like "font-family: 'Lucida Grande', sans-serif and the line-height is: 1.1em " meaning that MAC users will see Lucida Grande and Win users will see browser default font (probably Arial). So, two completely different fonts for two OS. I love Lucida font and I will continue to use it for this redesign. But now with something like "lucida grande", "lucida sans unicode", sans-serif; so both Win and Mac users can see Lucida.

One other thing: line-height(leading) or the space between the lines now is 1.1em. Normally on the web we have 1.5em leading but probably for symbolic reasons (text compression) on twitter it’s 1.1em, but here readability suffers so I decided to increase it to point 1.3em for better readability.

The 1.3em for leading was not causal number but it was taken in base of twitter profile photo dimension. Now profile photos on twitter are 48x48px and that is great dimension. We have exactly 140 characters or three lines with about 50 characters per line. 40 – 60 characters per line is considered perfect line length in typography. There are some new theories that we read faster with longer lines but I think that 40-60 is most pleasant line length for reading. That is why I took 320px or 50-55 characters per line and to make sure that can be max three lines or (140 characters). So we have 48x48px profile image and three lines.

If we have 12px as default and 1.3em leading 12 x 1,3 = 15,6 per line, 15,6 x 3 = 46,8 or 47px. So three line of text with 1.3 leading will be perfect for 48x48px profile image and we will have better readability.

In order to gain more vertical space first I moved twitter logo to left and canceled the vertical menu merging it with right sidebar. Then I realized that having the twitter logo on left was bed decision and asked myself why I need the twitter logo on my management page? I know that I’m using twitter, the twitter logo will always be on my profile page but I don’t need any logo on my management page. So I eliminated the logo.

I wanted to implement partial grid design in order to distinguish profiles from the messages and giving more white space to accomplish harmony. And finally I had chance to try my new "O" theory of gutter size giving 14px for the gutter.

I started this redesign around February this year but I give more importance to other projects. Other thing was to reorganize the many and cancel mini profile images (to reduce HTTP requests) and insert direct search on the page, but Twitter in the meantime fix it.

But I did little re-organization of the menu (I can write another post only for that :) ) , for the number 140 I used Monospace font I wanted to simulate the numbers of old gas station. Also I think the message "What are you doing?" can be disturbing for some people. Why someone wants to know what I’m doing? Someone can fill he is being interrogated and turn on his protective mode. Why should I share? But one big Hi or Howdy or Hola can open many doors. So now is something like Hi Vlado! What are you doing?

And that’s it. From 7-8 tweets now we have 10-11 tweets without scrolling. There are still many things and details to be considered. But I read somewhere something like: "The result is when we are tired of experimenting… I’m tired :)"

Here is the page and you can download the page with CSS and some early versions of the redesign.



Link

Download project files

Please fell free to comment and suggest, twitter is all about the community :)

Note: This is just the prototype of the page. The people inside this page are some folks that I follow and respect on twitter I hope that they have no problem with this.