Question

I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues.

.quote {
  font-size: 18pt;
  padding-top: 50px;
  padding-bottom: 15px;
  text-align: center;
  line-height: 0.25;
}

.speech_mark_large {
  color: #203D69;
  font-size: 120px;
  vertical-align: top;
}

<div class="quote">
  <span class="speech_mark_large">&ldquo;</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief.
  <span class="speech_mark_large">&rdquo;</span>
</div>

Also on JSFiddle.

I want the two lines of the quote to be closer together, but when I apply a line height, to solve this, it pushes the speech marks up into the previous line. How do I solve this?

Answer 1

You should set the line-height on the complete .quote element. Next you set vertical-align to top for the inner .speech_mark_large element. By changing the line-height of the .quote element you can tune the line spacing to what you think looks the best.

EDIT: I have added top and position to .speech_mark_large so you can change the vertical position of the quotes.

CSS

.quote {
    font-size:18pt;
    padding-top:15px;
    padding-bottom:15px;
    text-align: center;
    line-height: 30px;
}
.speech_mark_large {
    color:#203D69;
    font-size:50pt;
    vertical-align: top;
    top: 5px;
    position: relative;
}

See this updated JSFiddle