I've created a comp in Inkscape using an svg grid overlayed over top of it.

Grid-Based Comp

I've been trying to implement a grid layout from the comp based on fluid grids. So far implementing the horizontal placement using the grids vertical bars has been really easy, it's just some simple math, and the font / grid resizes as needed in any browser I've tried it in:

$targetFromCompinpx / $contextFromComp__inpx = fluid percentage

But now I'm focusing on the line-height and the padding above and bellow the text, and things have gotten a bit trickier. I can no longer use the width of the page as my context (or the element happens to be the parent of the target element), and the grid overlayed on the comp doesn't have any bars that go horizontally.

Is there any way to calculate a relative fluid percentage of the line-height and padding-top and padding-bottom so that it matches my comp?

I've come across two things that I think might have something to do with it, but I'm not certain how they relate. I imagine they relate in some way using an equation similar to the one I've used for CSS element placement on the fluid grid (show above).

The first is from the w3c, a diagram explaining line-height, and font-size, and how it relates to a desktop publishing concept called leading: leading, fontsize, and line-height

The second is from the comp in inkscape, and it involves a spinner box that is displayed when any text is edited. The tooltip for this spinner box reads "Spacing Between Lines (times font size)" spinner box reading Spacing Between Lines (times font size)

How are these two things related (if at all), and how can they be used to calculate a relative fluid percentage that I can transfer from my comp to my fluid grid design?

1 answer


The web is not print.

No matter how hard you try, some browser, or someone's settings will screw up your design.

Unitless line heights and Composing to a vertical rhythm might help you get closer to your goal, but don't expect to get perfection cross browser or cross device as you'll go insane trying.

see also: http://www.alistapart.com/articles/settingtypeontheweb/

Answered almost 6 years ago by Tony Crockford
  • Thanks for the articles, I'll check them out and see if they "help" to fix the problem. Andrew J. Leer almost 6 years ago