{Carrer web log}

O rule + golden proportion for calculating the gutter in the grid

Wednesday, May 27, 2009 { 12 Comments }

What is Gutter in Grid Design?

Gutter is the blank space that separates rows and columns in screen. Almost every web site is made of more than one column. The space between those columns is called “the gutter”.



So why is the size of the gutter important in web design or design in general?

I think that the space between the columns is extremely important and it can contribute for better reading, more elegant design and the harmony between grids (columns).

We (me included) almost every time ignore the gutter size. Usually we put 10px without thinking or if you have more designer “taste” you will try to adjust it manually and stop when “looks good”.

There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.

So I tried to resolve this problem.

First logical thing is that the size of the gutter should be bigger than one blank space of one letter. So the eye won’t jump to the next column.
But this space shouldn’t be too large to create the sensation of “empty hole” between grids.

I often ask myself why the site The Grid System looks so damn good. I keep turning back just to enjoy the view. I also love BBC and NY Times.

Every time when I tried to find the formula for the perfect gutter I finished with dead end. But last week when I made some experiments with the leading for Better Web Readability Project I find out that the perfect leading for my 16px gridlines was 1.625 very close to the golden proportion 1.618. I must say in the past I was very skeptic about this number.

Now I think inside that number is hidden the mathematical formula for beauty.

So I wanted to take the horizontal size of one letter and multiply the golden proportion. So what lowercase letter can we take that can represent all the letters? I think that the letter ”o” has the optimal form and is the best letter for this experiment.

Attention! Not all fonts have the same letter “o”. Different fonts have different horizontal size. Let’s try with Arial and calculate how many horizontal pixels it has.

This is the letter “o” 12px Arial zoomed 3200% so if you count the colored pixels you can see that are 8. So the horizontal size is 8px multiplied with 1,618 equals 12,944 or 13px.




So if you have 12px Arial the best size for the gutter is 13px. But this is just for Arial. For Lucida sans Unicode the size of the o is 9px so the gutter is 9 X 1,618 = 14,562 so you can choose between 14 or 15 px.

If you have bigger font you will have more pixel and bigger gutter.

All the sites I named before almost perfectly match this calculation. They all have beautiful grid system.

I called this rule O-rule.

Nota: The image of gutter is taken from Mark Boulton book "Designing
for the Web"

How we read on web and how can we improve that

Monday, May 18, 2009 { 17 Comments }

We don’t read! We scan!

80% scanning and 20% reading

We scan almost every time we are on search engine, blogs, news papers, various sites. And we read only when something is extremely interesting or useful.

When we scan no supercomputer is mach for us, we jump around the text, paragraphs, pictures with super speed.

Example from Google Search

I think we can consume entire chunk of text.

We scan a lot but we hate to read. Why?

Why the reading a book is so different from screen reading?

We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!

Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.

You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

Last week one of my students who was facing internet for first time sad that he had hated internet reading experience, so he is going back to paper.
So what can we do to improve internet reading?

First give more importance to the main content.

80% good reading content 20% noise

Make the sure that content is easy scanable and readable.

I was thinking to resolve this problem by some CSS Typographical solutions.

I made this open project Better Web Readability Project

I want to explain my solutions:

I started with the paragraphs - the main component of any text.

16px default font size. Oliver Reichenstein and Wilson Miner noticed before me and asked for bigger font.

I think we should wait for the big majority to pass to big monitors and then we can use bigger font for any site.

"lucida grande","lucida sans unicode", sans-serif are my personal choice for the paragraphs.

Other problem is: what should the leading or line-height be. I always use 1.5 line-height but bigger font needs bigger leading so I changed to 1.6em and ultimate correction was 1.625 in order to fit in 26px grid line. I was really happy with the leading - I tried bigger and smaller but 1.625 was perfect. Then I realized that I saw that number before, ahh, bang?! 1:1.618 is the Golden Proportion! First I saw the beauty then the number so I called the Golden Leading. 1.625em <> 1.618, but it’s OK for me.

I also wanted paragraphs to be super distinguished one from another for better scanning so I broke the typography rule - new line or indenting for new paragraph. I use both new line and indenting. 26 px or 1.625em was very big jump from one to another paragraph so I broke the perfect grid line and I reduced that jump to half 1.625em/2 = 0.8125em.

The color of the paragraph is #111111 and background-color #FFFEF0 in order to lower very big contrast monitor letters and to give worm book welcoming.

And the last thing Line Length work best with 480px column around 60 characters per line. Try to be near this number and not to pass 580(600px).

I used Serif (Georgia) for the Heading.

I took and recycled almost everything else: lists, tables, images, comments etc. from typography component of my The Golden Grid and Emastic.

And result: Better Web Readability Project - CSS Library

I’m waiting your comments and suggestion

Geo Twitter (#ll)

Thursday, May 07, 2009 { 7 Comments }

For days I was trying to figure out how to connect Twitter to Google Maps. Trust me is not an easy task because Twitter Apis can give very limited info. And that info is not very precise, for example you can tweet from New York. But New York is very bigggg. I wanted much more precision were exactly from New York you are tweeting or from any other place on earth?

Then I figured out that it’s “mission impossible”. No detailed Twitter API info means no project. And I quit my idea. When I was writing one of my previous posts: “Twitter is not about you, it’s about the community” - Bang! It all came to me. Twitter is community and community is twitter. The idea was born!

Why not just write the Geo coordinates inside your tweet!? It was so fuck*** simple!
After little work and thinking the result:

#ll 0.000000,0.000000

#ll tag stands for Latitude and Longitude. Every space is precious on twitter (that is why I’m using only two letters plus # for the search query) and the geo coordinates separated with coma with no spaces between them.

I think that this tag can revolutionize the way we Tweet. Imagine there are endless possibilities how to use this tag! You can tweet exactly from your office, coffee shop, restaurant, park. You can find who or where is the closest twitter.

Here are some possible scenarios(tweets):

I’m drinking delicious coffee at #ll 40.590362104893345,-73.96055102348328

A lot of traffic at #ll 34.079038136047444,-118.41562271118164

Who wants to join me at: #ll 40.7284295591591,-73.99197578430176

Don’t go there! Aliens just landed #ll 37.240332,-115.816032

For now I have built Twitter Geo that takes the last 20 tweets and inserts them inside Google Map.

The application Geo Twitter #ll

If this project has more community support I will build an application for iphone and other mobile devices that can support Google Maps.
For now you might have around 20 min delay, I'm working on twitter approval for faster apis.

But now everything is in your hands, folks.

If you like this idea you can help by ReTweeting!


P.S Special thanks to my friends Branko & Michele for their support and consulting