The default isn’t just about size, it’s about face. I also think it’s why some folks favor verdana – they don’t realize that the other sans-serif fonts would be just as legible if you increased their size 15-20% they get tricked into thinking it’s got better glyphs just because it’s larger at the same declared size… which is why many sites designed with Verdana are useless without zooming in on systems that don’t have said font available.īottom line, I want arial at the same approximate size as times new roman is at the default size, I need to declare it at 85% of that default. It’s why you can’t predict font size across platforms and typically should plan for 15-20% growth of an area even when using %/em… or even pixels for that matter! It’s another reason why fixed width layouts and fixed width/height containers on elements are a miserable /FAIL/ at web design and development! I’m declaring 10EM… its’ a monospace font… that means the fourteen character long “this is a test” shouldn’t even fit.

It’s also where EM can be annoying in browser, as the fonts don’t report the actual width of a letter M – so saying “10 em”… well, all of the spans making the column above are 10em – does it look like those fonts would have the same width caps M? It can be REALLY annoying when dealing with monospace fonts.

You change the face, want the same size, you have to adjust – which is why when using serif fonts I typically leave it at 100%, while on sans-serif I go smaller… how much smaller depends on what font family and stack I’m using. See how Arial is so much larger than the default/times? Get a load of DejaVu, Courier new and Verdana, some of the worst offenders in that department. The default size is typically for a serif font like Times New Roman - you put 16px times next to 16px arial and…Īctually, let’s make this clear as a bell as to the ‘why’…Īt the same font size, different font faces don’t render the same size… I think that’s part of what you’re missing. It’s not strange when, as I mentioned, different font faces are NOT the same size or have the same legibility needs.

Font family for segoe ui css html