Font size 16 looks so small?


#1

<!DOCTYPE html>
<html>
    <head>
        <title>Changing the colors!</title>
    </head>
    <body>
        <h1 style="color: green; font-size: 16px"> Big Heading</h1>
            <p style="color:violet">A giant bear and a little duck were friends.</p>
            <p style="color: red; font-size: 10px"> But the bear got hungry and ate the duck.</p>
    </body>
</html>

The colours seem to be ok but the size of the text on the white window seems to be quite small. Of course the lowest sentence is clearly the smallest, but shouldn't the size of the letters of the first sentence be bigger? I thought that < and h1 > should create sentences/headings with big letters?


#2

You don't have an error message? Just checking

Yea, h1 is normally pretty big, but this is done by using font-size ( i believe the font-size for an h1 is 32px), but now your overwrite it with font-size: 16px, so it makes sense it is small


#3

No, it did not show an error message.


#4
-webkit-text-size-adjust: none | auto | <percentage>;

So, twice as big would be: -webkit-text-size-adjust: 200%;


#5

I find it strange (but maybe that is just me) that you one browser prefix, but not all and not a non browser prefix (aka text-size-adjust)


#6

@rocksmethew Unfortunately, even with browser prefixes, that's currently only supported in iOS Safari: http://caniuse.com/#feat=text-size-adjust, so probably not worth using it just yet unless you're dealing only with iOS users.

(@stetim94 that explains only the -webkit prefix; if nothing else supports it with or without prefixes, it's not worth including them :) )


#7

that explains a lot. What a pointless property by the way, if you want the text to be twice the size you could use em or 200% as values for the font-size property. It is also completely unrelavant to the question