The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Simple question on nice fonts and sizes

  • # August 24, 2013 at 7:39 am

    Well, first of all, let me say this, CSS-tricks is awesome but its recent update or whatever has made it impossible for me to post to CSS Combat forum, hence posting to this forum instead.

    Question, is body { line-height: 1.2; } the correct way to control vertical space /height between lines?

    I did, however, my text blocks inside a TD still have double spacing for the vertical.


    # August 24, 2013 at 9:03 am

    When you log in on main forum page and navigate to other forum categories and you’ll see on top right asking you to log in again just press F5. Repeat it every time that happens and you should be ok.

    Now to your question. Line height of 1.2 at body level is pretty small. 1.5 or higher is preferable. What do you mean by having double spacing in your table cell text? That 1.2 line height will cascade to every other element so it will be applied to your TD text also.

    # August 24, 2013 at 9:28 am

    This reply has been reported for inappropriate content.

    Ahe, the press F5 key is a magic key! Log in manually at a forum level own’t cut it while the F5 is beautiful.

    By “double spacing” vertically I meant, too much line spacing… Ok, I’ll go with 1.5 then.

    Many thanks.

    # August 25, 2013 at 10:58 am

    This reply has been reported for inappropriate content.

    Try this:

    # August 25, 2013 at 1:55 pm

    This reply has been reported for inappropriate content.



    # August 27, 2013 at 2:18 pm

    This reply has been reported for inappropriate content.

    Line-height: 15px Will put exactly 15px between each line, so if you change the font-size, this won’t change (and will break on any font above say… 15px (which will look mega cramped))

    line-height: 1.2 and line-height: 120% are essentially the same, If your font-size is 15px your line height will be 18px (15 * 1.2) but if you changed your font-size to 20px for example, the line height would be 24px (20 * 1.2). 120% is also the same (20*120%=24)

    You could also set your line heights with ems if you wanted which would scale with the font-size but seeing as an em is the height of the letter ‘m’ (hence em’s) its probably about 60% of the font-size depending on the font family and just makes working things out a little harder

    I personally use unit-less measurements for line-height eg 1.2 and personal preference is 1.3 or 1.5 for body copy.

    # August 27, 2013 at 7:07 pm

    This reply has been reported for inappropriate content.

    Thanks basement31, please check out my new CSS question with thread URL,

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed