Comments on Carrer Blog: Azbuka - CSS Typographical Base Rendering Library

This is a fantastic tutorial. Typography is all ab...

2009-12-12T13:11:25.387+01:00

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

@All for Design: No it's nothing conflictual, is j...

2009-12-01T02:18:29.719+01:00

@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.

Thanks for your answer I have made a little mistak...

2009-11-30T22:02:28.065+01:00

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 ?

@Auré: Thank you for your kind words. About your ...

2009-11-29T19:26:51.323+01:00

@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; }

Hi man, first I want to congratulate you for the q...

2009-11-29T17:56:06.897+01:00

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

@BlueKDesign: Yes I know it is a strange name "Flo...

2009-11-26T05:15:08.212+01:00

@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.

Can you explain the "Floss line height" ? I'm afra...

2009-11-26T03:25:46.475+01:00

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.

@sam: Thanks. Fell free to use them and If you hav...

2009-11-24T02:25:59.071+01:00

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

You sure are the master of frameworks. I am plann...

2009-11-23T22:23:02.936+01:00

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

@Paul: Thank you for your comments. Mainly the poi...

2009-11-18T14:22:40.503+01:00

@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

Oh and give the minified css a run through the YUI...

2009-11-18T05:49:51.027+01:00

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

Really really good looking. I hope to use this in ...

2009-11-18T05:47:43.963+01:00

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.