html - css: How to horizontal align fonts with different sizes -

html - css: How to horizontal align fonts with different sizes -

first question on !

im trying "pixel perfect" horizontal align 2 lines of text , each line different font-size.

<style type="text/css"> * { font-family: sans-serif;} div { float: left;} h1 { font-size: 150px; margin-bottom:-30px; } </style> <div> <h1> b </h1> <h6> b-l.align </h6> </div> <div> <h1> l </h1> <h6> l.align </h6> </div>

sample here: http://jsfiddle.net/jgybd/1/

if @ sample , notice larger font has more "?padding?" smaller font. making them misaligned few pixels.

im looking way or formula left align them ,without using trial , error on margin-left!

all ideas appreciated , thanks.

what seeing not padding, kind of "kerning" of font. not that, sort of. big big problem is different every font, , every letter. seek replacing

<h1>b</h1>

by

<h1>j</h1>

now space much smaller !

this space depends of font, size , letter. so, don't think can command that

html css font-size alignment