Proportional Line Spacing

• 

  rjbinney · Member · Sep 28, 2016 at 10:53 pm

  • Copy link
  • Add topic to favorites

  I would like to mix font sizes on a single post.

  I am changing sizes by using
  <span style=”font-size:x-small;”>
  in the text editor.

  What I’ve noticed is the line spacing – that is, between *lines* not *paragraphs* (what we in the old days of print called “leading”!) seems to stay the same regardless of font size. In other words, there is a normal gap between two lines of text in the Normal size (my default) but when I go to small or x-small it becomes a relatively HUGE gap between lines.

  An example page is here:
  http://wp.me/p7GDeK-1C

  Help!!!

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Sep 29, 2016 at 6:22 pm

  • Copy link

  You can use line-height to adjust that. Some example code:

  <p style="font-size:0.8em; line-height: 1;">...</p>

  If you have a paid plan which lets you edit the CSS globally you could also set the styles in one place using classes. Your HTML might look something like this:

  <p class="supertiny">This is miniscule text</p>
  <p class="abitsmall">This is small text</p>
  <p>This is normal text</p>
  <p class="ridiculouslybig">This is too big to be useful</p>

  And then set the styles in your CSS code on the relevant page of the customiser:

  .supertiny {
    line-height: 1;
    font-size: 0.5em;
  }
  .abitsmall {
    line-height: 1;
    font-size: 0.8em;
  }
  .ridiculouslybig {
    line-height: 2;
    font-size: 20em;
  }

  The best thing about doing it this way is if you ever want to change the size (or anything else about those bits of text) you can change it in one place in your CSS instead of going through every post and page and making the edits one by one.