{Carrer web log} ←

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 :)

12 Responses to “Azbuka - CSS Typographical Base Rendering Library”

1. //  Paul Irish // 11/18/2009

   Really really good looking. I hope to use this in a base html/css/js template I'm releasing soon.
   
   Questions though. It looks super sharp in gecko and webkit, but do we have 100% visual parity in IE6 and IE7?
   I noticed you have a child selector (blockquote > p) which kills ie6 compat. Also I think there's a few ways in which IE handles font-sizes, so I'm skeptical everything is identical right now.
   
   I've used the YUI fonts css for ages and had a great experience. I wonder if there are any IE compat tricks you can steal from them:
   http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts.css
   http://developer.yahoo.com/yui/fonts/
   
   Thanks again. This is solid work.  

2. //  Paul Irish // 11/18/2009

   Oh and give the minified css a run through the YUI compressor:
   http://refresh-sf.com/yui/
   
   It uses a few techniques you're not doing and will bring down the size a bit more.
   
   Cheers  

3. //  Vladimir // 11/18/2009

   @Paul: Thank you for your comments. Mainly the point of this project was to encourage people to think out of the box. We all use things like 12px for text and 1.5 for leading even this blog still uses this standard. So with the help of Golden proportion i tried to change the standard just for 1px into 13px and use 1.618 for leading.
   
   I also started with the idea that the type will never look the same in various browsers. Example Firefox and Chrome render type poorly, in Vista we have true type by default and in XP is not. So in every browser we have different visual experience.
   
   About (blockquote > p) in the IE6 the line near the quote will be longer but will not hurt the visual experience. So probably I will leave it that way.
   I working on some minor bugs in IE6/7. And I will publish everything in the next couple of days.
   
   One thing I don't like about YUI compressor there is no personalization. I don't like all CSS to be in one line, I want to preserve the readability so that is why I use http://www.cleancss.com/ based on csstidy.
   
   Thank you again for your feedback  

4. //  Sam // 11/23/2009

   You sure are the master of frameworks. I am planning to use Azbuka & formy with some of Stubbornella's OOCSS so far all seems great
   
   all mixed together with compass
   
   
   might try some new stuff with @font-face - but I am quite happy with how it all presents in various browsers  

5. //  Vladimir // 11/24/2009

   @sam: Thanks. Fell free to use them and If you have any technical question please email me.
   
   About @font-face there is enormous potential in the future. But to truly use this potential we have to wait the next generation of browsers.
   
   This doesn't mean that we shouldn't experiment with CSS 3 and new stuff :)  

6. //  BlueKDesign // 11/26/2009

   Can you explain the "Floss line height" ? I'm afraid I'm not getting it, but I'm very curious about your intent.
   
   Also, having the list numbers & bullets outdented looks odd to my eyes.  

7. //  Vladimir // 11/26/2009

   @BlueKDesign: Yes I know it is a strange name "Floss line height distancing". If you go to http://www.allapis.com/Azbuka-CSS-Typographical-Base-Rendering-Library/Headings.htm preferably with Firefox and select all text (CTRL + A) you will note there is around 1px line( the floss symbolic) between the text lines. There is also the image on this blog post indicating the line.
   
   The point is minimum distance between the lines. Headings are super readable because are big text. If we increase the Leading (line height) we will force our user to focus on the headings.
   
   So I wanted to avoid that and the balance the headings and the main text.  

8. //  Auré // 11/29/2009

   Hi man,
   first I want to congratulate you for the quality of your work.
   It's always a pleasure to read each of your article.
   Once again this typographic researches show how high are your skills.
   Thanks a lot for let us learning from your work and share its for free.
   I have a little question : Could you explain me why have you chosen a padding-left of 0.8125em for the paragraphs ?
   Thanks for all man.
   Regards  

9. //  Vladimir // 11/29/2009

   @Auré: Thank you for your kind words.
   
   About your question it is :
   p { padding:0 0 0.8125em 0; } or padding-bottom:13px;
   So the distance between the paragraphs is 13px, almost everything is build with the numbers of the Fibonacci sequence (0,1,1,2,3,5,8,13,21,34,55….).
   
   Yes, now I'm thinking that maybe is better to use margin instead of padding.
   So the result will be:
   p { margin:0 0 0.8125em 0; }  

10. //  All for Design // 11/30/2009

    Thanks for your answer I have made a little mistake... I have seen a left-padding because firebug delete the last fourth "0" value on my version of Firefox.
    Anyway, thanks for your answer.
    
    I came back to your post "How we read on web and how can we improve that" (http://www.vcarrer.com/2009/05/how-we-read-on-web-and-how-can-we.html)in order to better understand the conversion which gives 0.8125em for 13px.
    Now, I have understood that it's just 26px/2 > 1.625em/2 = 0.8125em.
    
    "...maybe is better to use margin instead of padding" Could you explain me why do you prefer using padding instead of margins ?
    
    Padding and Line-height are sometimes conflictual maybe ?  

11. //  Vladimir // 12/01/2009

    @All for Design: No it's nothing conflictual, is just my preference to implement styling only to the paragraph not paragraph + the empty line below the paragraph.So there is not wrong and right just personal preference.  

12. //  fred design // 12/12/2009

    This is a fantastic tutorial. Typography is all about detail and you have this to a tee. Thanks for sharing.  

Post a Comment

<< Home