Weird sizing issues with h1 and span elements

Question

I have this code:

<h1><a href="">Windows Store<br /><span class="smallSubText">apps</span></a></h1>

and:

#windowsStoreApplications {
    float: right;
    width: 50%;

    font-size: 16pt;
    text-align: center;
    height: 182px;

    background-color: #9DCA87;
    border-top: 6px solid #AEDF66;
}


.smallSubText {
    font-size: 16pt;
}

As you can see, both the h1 and span are set to the same font-size - this is not how I want it but it's how I made it because I noticed that the font-sizes were not matching up to how they should be.

I made them both the same size to demonstrate that they are both the same size in code, but when you run the site and look at it - they're actually different sizes.

Is this due to some size weirdness with the h1 element?

score 4 · Answer 1 · answered Aug 09 '13 at 20:07

4

If #windowsStoreApplications is a div, then you need to delclare a #windowsStoreApplications h1{} markup in your css and style the element with font-size:16px; there. You are not selecting the h1 element otherwise.

answered Aug 09 '13 at 20:07

Phorden

994
4
19
43

You mean 16pt (the same size as for the `span`), not 16px, right? – Jukka K. Korpela Aug 09 '13 at 20:14
@JukkaK.Korpela You are correct. I am so used to px or em's that i didn't notice. Thanks. – Phorden Aug 09 '13 at 20:21

score 2 · Accepted Answer · answered Aug 09 '13 at 20:08

2

Well first, if you havn't declared a font-size for your h1's (and the rest) the browser defaults will be implemented which vary in size.

Second, you should not be using pt for your size, you should be using px, em or %.

#windowsStoreApplications h1 {
font-size:16pt; /* or preffered unit */
}

answered Aug 09 '13 at 20:08

Christopher Marshall

10,678
10
55
94

Why not use point? We've always used pt :( Sigh. Then what is pt for? – jay_t55 Aug 09 '13 at 20:10
"The final unit of measurement that it is possible to declare font sizes in is point values (pt). Point values are only for print CSS! A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution." ~ css-tricks.com - Thanks @Chris. – jay_t55 Aug 09 '13 at 20:12
1

Checkout http://stackoverflow.com/questions/348978/are-there-any-practical-reasons-to-use-em-instead-of-pt-font-size-units – Christopher Marshall Aug 09 '13 at 20:12
But what if we want out whole site printed? Then we should use pt? But then if we do it all in pt anyway - we achieve the same result. What's the _real_ difference then? – jay_t55 Aug 09 '13 at 20:14
1

Yes, you would typically have a print.css stylesheet that would do some general styling in a print-like format. I've never had to implement one as the newer browsers do a great job natively, but if your project has a reports/articles/products page or something, it's usefull. – Christopher Marshall Aug 09 '13 at 20:16
I just had a heart attack. I changed everything to em (forgetting that I would need to use points to adjust), and everything became like Hulk lol. – jay_t55 Aug 09 '13 at 20:20

Weird sizing issues with h1 and span elements

2 Answers2