{Carrer web log}

To Do List (A4 Paper – Grid Design)

Monday, November 30, 2009 { 8 Comments }

In the office we all have A4 format white paper for printing and almost always we print only on one side. Happens often we are not happy with the print and we threw away the paper or the blank side can be reused for re-printing.

Lately I’m having trouble getting organized, many ideas little time. For my long term projects my Moleskine works great, but I need something super simple to organize my week. I know that there are millions of other electronic or paper solutions (notebooks, organizers) but they didn’t work for me in the past.

So I decided to build A4 grid based To Do List. So I made simple A4 modular grid.

Invisible grid:

The final result:

Or:



So now I can use the non printed side of A4 paper for creating my weekly To Do List.

Like I did in the past I will share everything with you. Maybe someone also will find this thing useful and try to reuse A4 paper.

Here are the files: .PNG (300 dpi) and Photoshop .PSD

You noticed everything is essential there are not hours like 9.00, 10.00 … to provide maximum customization.

How you can use it?

Open the .png file and print it in landscape mode. And that is it. If you want also pocket size format take the A4 paper and curve in half and other half and other half. The grid lines should match the white space.

And you have your own pocket size or extendible A4 to do list.

Enjoy!

Note: Feel free to optimize everything for your needs inside Photoshop PSD file . For the font I used Helvetica but in the .PSD is Arial for multi-platform compatibility.
If you are paper prototype lover check my previous experiment Sketchbook for web designers

Azbuka - CSS Typographical Base Rendering Library

Monday, November 16, 2009 { 12 Comments }

Azbuka is CSS Typographical Base Rendering Library. It’s meant to make meaningful web typography based on the golden proportion.

I recently ask myself about the true meaning of web typography and on what base was first projected. I had many question but few answers.

My goal is to re-program current standards of web typography using The Golden Ratio and Fibonacci sequence (0,1,1,2,3,5,8,13,21,34,55….)

There is almost no typography book that is not talking about the golden proportion. I was very skeptical about this rule in the beginning , but now I truly believe that there is something magical about this number.

For me the golden proportion is mathematical search for beauty.

This is why I choose this rule to be main base for this project.

Other question that bother me recently is the question of 12px like main standard for web text. Why we are using 12px for the text? Probably from the book standards 12pt.

But internet is not a book! I wrote more in my previous article "How we read on web and how can we improve that".

Big text size is more readable, small text is more elegant and feats better in the grid.

So the compromise can be 13px font size, text for universal use.

For this project I choose Arial for the main text. Why Arial?

Negative: Arial is not so legible like serif fonts. Arial is cheap Helvetica.

Positive: Arial is everywhere. Arial looks good on screen. Arial is safe web font.

Actually we have only few sans-serif safe web fonts who can be seriously considered for the text: Arial, Verdana ,Trebuchet MS and Tahoma.

I tried all web safe sans-serif and serif 13px and one thing that always strokes me is how incredible Helvetica in my case Arial is. Unfortunately I can’t use Helvetica because is not web safe font and also I don’t want MAC users to see Helvetica and Windows Arial. So for the text Arial for everyone.

Golden leading

Line-height: 1.618 . I first time I discovered the power of this number with Better Readability Project.

When I build the typography for Emastic I have one big problem the line length.

I couldn’t adjust the typography to work well for the bigger and shorter lines. But, with the golden leading for the first time I don’t have this problem the text inside 400px container or 800px looks good.

I think that with this number I achieved elegance and readability in the same time, probably the leading Is the key feature of this project.

Georgia for Headings

Georgia is elegant. Georgia probably is only safe web font that looks good on screen .

Every number for the Headings is taken from Fibonacci spiral.

Elements:	Size
H1	34 px
H2	26 px
H3	21 px
H4	17 px
H5,H6	13 px

Leading for Headings.

When I started to build this project I started with the idea of complete baseline typography, realizing after that baseline typography is probably not the right solution for the Headings.

Headings are very readable and with 1,618 leading will drawn unnecessary attention . So the point we don’t need extra leading for the Headings.

I did one thing witch I call it floss line height distancing.

Imagine that Headings are the teeth and the perfect distance between two tooth is the probably the length of dental floss for functional and aesthetical reasons.

Quotes

For Quotes I use Arial italic. But one thing that disturbed me was the readability issue so I tried to slightly increment the letter spacing.

For the rest of HTML elements the standard features that I’m using in all my project like Emastic, The Golden Grid and Better readability project.

To conclude: My personal scope was to make a typographical web library that will work in almost every occasion and looking elegant and functional (readable) at the same time. I’m perfectly aware that is no such thing as perfect and universal typography that will work in every case but aiming for always better web typography is my obsession. I hope you will find this project useful.

Download & examples: http://code.google.com/p/azbuka/

That's all folks!

Disclaimer: This blog still uses the Emastic 12px typography and will remain that way until the next redesign. Hopefully, very soon :)