Mobile app version of vmapp.org
Login or Join
Jessie844

: Choosing an appropriate font weight and line height 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

@Jessie844

Posted in: #Dimensions #Fonts #FontSize #LineHeight

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:



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



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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Jessie844

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sue6373160

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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme