Perfect typographic vertical rhythm in CSS

over 1 year 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, over 1 year ago

    Some fixes:

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

    :)

    4 points
  • Mikael StaerMikael Staer, over 1 year 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
    • , over 1 year ago (edited over 1 year 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, over 1 year ago (edited over 1 year 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
    • , over 1 year 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, over 1 year 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
    • , over 1 year 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