Controlling tag line height in title tag?

Question

I have a heading ( <h1> ) that has a subcategory below it. (I used the <small> and set the font-size to a certain percentage, so it is perfect when I change the font-size title for smaller screens. I use em units if that matters.)

At first, the <small> was under the main heading, but I realized that I had forgotten the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the gap was wrong.

Here is my code:

HTML:

 <h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1> 

CSS

 h1.banner { text-align: center; display: block; font-family: 'arvil'; font-size: 6.5em; color: #94babd; } h1.banner > small { font-family: Helvetica, Arial, sans-serif; font-size: 27%; color: #888; letter-spacing: 1px; font-weight: 100; } 

And here before and after:

I searched on StackOverflow, but I'm not sure how to do this. I read that the <br /> tag just breaks the lines, but inherits the spacing between the lines, and line-spacing: (value) does not work, has no margins or indents.

I need a simple cross browser solution. I used Chrome for the screenshot. IE6-7 support is not needed, although IE8 support will be nice.

Answer 1

Ultimately, the answer that works as the best solution is here (third example):

http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head

@cimmanon posted a very useful solution, but to be safe, I will stick to what Steve Faulkner said about this, which is a more meaningful and SEO-optimized solution, using the <h1> tag and the <h2> for subheading or inline elements inside the title tag, regardless of style.

Here's the solution:

HTML:

  <header> <h1 class="banner">Justin Wilson</h1> <p>WEB + GRAPHIC DESIGNER</p> </header> 

CSS

  h1.banner { text-align: center; display: block; font-family: 'arvil'; font-size: 6.5em; color: #94babd; font-weight: normal; margin: 1em 0 0 0;/*purely for display purposes, really*/ } header > p {font-family: Helvetica, sans-serif; font-size: 1.75em; color: #888; letter-spacing: 1px; font-weight: 100; text-align: center; margin:0; } 

And a live demo (may not look very good for you without the free Arvil font from Lost Fonts).

http://cssdeck.com/labs/xysgkffs

Thanks for all the answers so far.

Answer 2

You need to control the line-height css property (see W3 Schools ) to make sure that all browsers set the same heights for each row.

In fact, it is recommended to do this in almost all elements containing text, so most people use CSS reset for production, which sets the default line height for all elements.

In this case, <span> and <h1> are likely to have different line heights.

I'm sure the <br /> tag does nothing unless you change its properties with CSS, which I would not recommend.

There is also an abridged version if you set other font properties for the same element (s):

 font: <font weight> <font size>/<line height> <font face>; 

For instance:

 font: bold 12px/18px sans-serif; 

Hope this helps.

Answer 3

The problem is caused by the default row height for the title element. The default value depends on the browser and the font, but it usually ranges from 1.1 to 1.3 font sizes. In any case, with a very large font size this poses a problem because the line height value also sets the height of the second line. According to CSS specifications, for a block element, line-height sets the minimum row height.

There are different ways to do this. Setting display: block on a small element is one way, because then its default line height will be determined according to its own font size. Another way is to set the line height, which is much smaller than the font size, for example.

 h1.banner { line-height: 0.5; } 

Answer 4

Drop <br /> and adjust the display of the <small> element to lock.

http://cssdeck.com/labs/uoqfo4xw

 <h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1> h1.banner { text-align: center; display: block; font-family: 'arvil'; font-size: 6.5em; color: #94babd; } h1.banner > small { font-family: Helvetica, Arial, sans-serif; font-size: 27%; color: #888; letter-spacing: 1px; font-weight: 100; display: block; } 

Answer 5

An alternative is to set the range to display: block; and then setting the line-height <h2> .

I would do this instead of using the <br /> tag.

Answer 6

I agree with @JEES - it really should be h1 and separate h2 , not small inside h1 with br to break the line. Semantic markup is always easier to work with.

Answer 7

UPDATED ....

Change <small> to <p> in HTML and CSS and add a line to h1.banner > p

 margin: 0 auto; 

Fiddle