Perfect typographic vertical rhythm in CSS

2 years ago from , Founder of http://functionandform.co.uk

http://codepen.io/toddpadwick/full/KzLBrW/

I use this system quite often in my web development. So i thought i'd share it with you all. After trial and error I have personally found 28px is the most appropriate multiple to be using for all dimensions in my web design. (it can be halved when used in pairs such as left and right margins etc)

8 comments

  • Pedro Pimenta, 2 years ago

    Some fixes:

    • "Lorum" should be "Lorem"
    • "Dolar" should be "Dolor"

    :)

    4 points
  • Mikael StaerMikael Staer, 2 years ago

    How would you handle this using a system based on ems? Like the previous question, with a framework like Bass or similar?

    1 point
    • , 2 years ago (edited 2 years ago )

      There are em based solutions that i've noticed online, but as have actually stopped using them myself. I prefer to have more control over the pixel dimensions. Also my font-sizes dont change too much on smaller screens as i like the text to be quite large and legible. I'm sure there are many people out there that are shocked to hear this, but it's just what I have become more comfortable with. But here is a tool that provides em based solutions. https://drewish.com/tools/vertical-rhythm/

      0 points
  • Alejandro CamaraAlejandro Camara, 2 years ago (edited 2 years ago )

    In my case, I found that my magic number is 24px. So, line-height is 24px, base-font 16px.

    And for margin, paddings, I use multiples/divisions of 24px.

    Multiplications are easier because everything is an even number.

    1 point
    • , 2 years ago

      24px is one of the more common ones. However, my base font-size is usually 18px, and 18px with a 24px line height is too tight i reckon. What size do you tend to use?

      0 points
  • Vila G, 2 years ago

    This is beautiful!

    Any thoughts on

    • How to integrate this into an existing framework like BassCSS?
    • The best way to implement responsive font sizes (mobile, tablet, desktop) into this while maintaining the rhythm?
    1 point
    • Todd Padwick, 2 years ago

      Thank you Vila...

      My font-sizes do not change as much as you might think on mobile devices.

      paragraph text drops down to 18px but retains the line-height. h3's sometimes drop down to 21/28px, allowing just their boldness to define them as subtitles. h2's drop down their font-size, but retain the same line-height. h1s then drop down to what was previously the h2 size.

      Another alternative is to drop down the magic number from 28 to 24 on mobile, but this isn't something I have done myself.

      I may try and add in some media queries to demonstrate a responsive solution for this over the next few weeks.

      In terms of frameworks, I have always avoided things like bootstrap. I also do not know much about BassCSS so unfortunately I cannot comment i'm afraid.

      0 points