1

Typically a back-end engineer, I'm venturing into the world of vector design, trying not to hurt myself on the way.

I'm aware that I'm struggling to size things, with my home brewed typography style guide:

home brewed typography style guide

I am trying to combine these fonts with a graphic style which should be rather precise, see below:

reconcile sizing conflicts

It seems no matter how I size my icons, the line weighting, corner radius, the line heights, font sizes within those line heights, or similar. I never come up with a suitable "vertical rhythm", here pictured with 14px bold weighted text, within a 19px line height, I can't come up with good looking alighment and spacing next to a 40px high icon, with a 4px weigh line, with 8px weighted rounded corners.

I don't want absolutes "make your text X heigh" kind of answers, but is there a place to start, with the structural elements, such as the icons and lines, and then work backwards to a suitable line height and font size?

Line height of 30, with a font-size of ~20/22, for example, to match the size of the icons?

Improve this question
2
  • Can you clarify what specifically you want to achieve -- what the "vertical rhythm" should be? Is it just a matter of getting text and icons nicely aligned, or are you also trying to match the visual weight of the icon? P.S. While editing the Question, you might also want to edit the title to make it clear that you're looking for a process of selecting text weight & height to complement an icon.
    – AmeliaBR
    Sep 1, 2014 at 3:43
  • set your line-height equal to the icon height for dead center text; if you want to post your icons on jsfiddle i'll be happy to show you what i mean.
    – albert
    Oct 31, 2014 at 6:03

1 Answer 1

Reset to default
2

This may depend on what you're trying to create. If you're looking to have text next to an icon–You may consider using list items with the icons as custom bullets. This would center the image automatically with the text no matter the font size. In this example you can edit the line height by adjusting the margin-bottom of each 'li' element. There are many other ways to do this as well. If you want to just edit the line height create a css rule for 'line-height'. I agree with @AmeliaBR, maybe you can restate our exact question to make it more clear what exactly you want to achieve here.

That being said. You may get better answers about front-end development coding over at stackoverflow.com

Improve this answer
1
  • Nailed it, could have said it better. If your looking to learn more about web typography here's a good source: webtypography.net.
    – Kukka
    Nov 1, 2014 at 2:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.