Mobile app version of vmapp.org
Login or Join
Lengel450

: Is the spacing around my typographic elements correct? The image below is a more or less standard paragraph example for the website I'm trying to design. It's probably not much help for the

@Lengel450

Posted in: #Critique #Typography #WebsiteDesign

The image below is a more or less standard paragraph example for the website I'm trying to design. It's probably not much help for the question I'm asking, but I will try to further detail what I'm doing there.


font used is Roboto Black and Regular
the section has a margin top and bottom of 50px
the heading is 36px
the heading has 30px margin bottom starting from the underline (yellow line)
the paragraph is 18px with 27px leading (1.5 line-height)
the design is based on a 1170px grid (Bootstrap) if that's of any use




To expand a bit on my question, I would like to know if the space between the heading and the paragraph is sufficient or it should be at least the size of the gap between the two paragraphs (which is 42px)

P.S. I feel like a tone deaf person trying to sing when I'm doing typography, so any constructive criticism is much appreciated.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Lengel450

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sent7350415

This is always ultimately going to come down to the eye of the viewer. To my eye the vertical rhythm (and that's an important phrase, and one you can Google to learn lot more) looks fine in general, but I think the underline beneath the heading looks a little cramped. I'd open that up by about 5px. (ie, add 5px to whatever the padding on the heading is currently set to)

The line-lengths are a little long though. Aim for about 60 characters, whereas you have what looks at a glance to be about 100 (I haven't counted!), so either make your image larger in relation to the text column, or simnply reduce the text column and don't (ever) be afraid of white-space.

One tip to make typographic sites really sing, is to look into a jQuery based hyphenation plugin, and a relevant hyphenation dictionary. Just a random tip :)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme