jcarpenter jcarpenter - 5 months ago 11
CSS Question

Text is widely spaced even though line-height is set to 1

Looking at the widely spaced text that's in the center of this site: http://www.sharonhadary.com/ .

I tried setting the

line-height
property to 1 in the web inspector (it was originally set to 1em), but this had little effect. This is surprising to me, because it looks like that text has a line height of 2 or 3.

Answer

Remove the giant font-size and it's fixed.

.banner-wrap .banner h2 {
    padding-bottom: 30px;
    color: #ffffff;
    word-spacing: .1em;
    text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif;
    /* font-size: 100px; */ /*REMOVE THIS */
    font-weight: normal;
    line-height: 1.1em;
}

enter image description here

Also <font> has been deprecated and should no longer be used