: 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
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?
More posts by @Jessie844
1 Comments
Sorted by latest first Latest Oldest Best
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
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.