When you first get a comp from the designer it is best to get the base typography set in your style sheet before you move onto creating the CSS for the rest of the site. The problem is that photoshop measures type in pt’s, and we build in Ems (never pixels). How do we make the transition?
Recently while cutting up the responsivedesign.is design that was done for me by Kate I had an issue with the current recommended conversion rates, even the conversion tool at pxtoem shows the same conversion rate.
When I got the photoshop files I started out with the typography and built the h1-h6, blockquote, lists items, paragraphs and article leads using the pt/12 equation outlined in those tools.
The result of which made the site look a little comically large. The widths of the containers were set fluidly based on the target/context = result and I even set a max-width of the on the containing div to the same width of the photoshop file, 1140px.
Things still looked comically large and out of place. The only thing I could put this down to was because the paragraph font size was set to 16pt in the photoshop files, meaning that using the standard conversion pt/12 the paragraph size became 1.333333em instead of what you would normally expect, 1em.
To get around this I’ve decided to use the conversion of pt/16 because that meant that the paragraph becomes 1em and the remaining typography can be based from that.
The purpose of typesetting is to create the perfect paragraph…
Am I doing it wrong? Probably. But this seems to be the best way to approach the problem I’m having.
I’d love to hear more suggestions about what I might be doing wrong and how I should be approaching this problem.