Font Size Jump 71-72% / Small - X-Small

HTML & CSS
1

I seem to be experiencing a huge jump in text sizes between the above font sizes. Obviously there is a gap between small and x small but it seems too big a jump. I verified this through the percentages and between 71 and 72% font-size there is large jump in size. The weird thing is that other percentages seem fine. I also noticed XXX-small seems to result in the text becoming large for some reason!? Below is the simple CSS, I can’t find any other rules that would alter the general font-size:

body {
background: #9AB6CA;
color: #666666;
font-size: 71.82%;
font-family: Verdana, Helvetica, Arial, Sans-Serif;
margin: 0px;
}

Anything over 71.82% turns the text much larger. Any idea why this happening and how I can get text size more specific?:confused:

2

Hi, Welcome to Sitepoint :slight_smile:

I’m not sure what you are seeing but the text goes up by 1px for me. (The result will always be a whole pixel and not a fraction of a pixel).

The computed size for 71% in my Firefox is 11.3667px. That will get rounded down to 11px as only whole pixels can be displayed.

The computed size for 72% is 11.5167px which gets rounded to 12px.

Browsers may vary depending on what they set their base font size to by default.

There is no CSS value xxx-small so the browser reverts to default.

3

Thanks very much for your help.
I didn’t think there was xxx-small until I read about it on a website yesterday! Clearly it doesn’t exist though.

Is there no interim that can be achieved between 11px and 12px then?
Also is 11px a suitable web design text size? I always thought it was fine but I’ve had a couple of problems with Google lately and thought Google may think the text size is too small (unreadable) and penalised me as a result.

4

No I;m afraid not, font size can only go up a pixel at a a time as the smallest unit on your monitor is 1 pixel. You could play around with different font-families which may appear to be of an intermediate size.

Also is 11px a suitable web design text size? I always thought it was fine but I’ve had a couple of problems with Google lately and thought Google may think the text size is too small (unreadable) and penalised me as a result.

11px is a bit small for most users but I severely doubt that google will penalise you for using 11px. I guess that Google would be looking for font-size:0 in your text content in order to ascertain if you were hiding stuff. However, Google will not penalise you for doing something that is correct and necessary for the layout. Its only when you abuse things for SEO that you would likely run into trouble.

16px is most browsers default and accepted as an easily readable size but of course doesn’t always fit in with the layout. If you have large chunks of content to read then I wouldn’t go below 13px.

Smaller text is ok for small pieces of non essential content but for the actual content the bigger the better.

5

Great advice, changing the font type can have a big affect on how large the text looks, and your thoughts on Google echo mine, I find it hard to believe it would penalise me for 11px.

Once again thanks for the informative advice.