1

Possible Duplicate:
CSS Font Size Specifics

I have been wondering what exactly is the font size when it comes to web design.
I mean if I set the font size to 25px, will my text have a height of 25px ?
Because I tried that with photoshop and if I set the font size to 30px, a regular capital letter (ex: "B") will be 24px tall, a regular letter (ex: "a") will be 19px tall and a "j" will be 27px tall.
So what exactly means the font size ?
EDIT: My question may not be clear so, how can you compute the height of a letter based on the font-size ?

Community
  • 1
  • 1
arthurquerou
  • 250
  • 1
  • 3
  • 10
  • It depends on the size of the pixel ;) – Tchoupi Sep 11 '12 at 15:47
  • 1
    Possible duplicates: [Best unit for font-sizes in CSS](http://stackoverflow.com/questions/7948480/best-unit-for-font-sizes-in-css), [http://stackoverflow.com/questions/10093688/css-font-size-5-increments](http://stackoverflow.com/questions/10093688/css-font-size-5-increments), [CSS Font Size Specifics](http://stackoverflow.com/questions/11073602/css-font-size-specifics) – Kermit Sep 11 '12 at 15:47
  • I think the OP wants to know what part of a font is the standard part that is measured for height. - the top of a capital, the top of a lower-case letter etc. – Diodeus - James MacFarlane Sep 11 '12 at 15:48
  • 1
    The size of the pixel ? Well I'm pretty sure a pixel is ... 1 pixel tall ! But I may be wrong :p – arthurquerou Sep 11 '12 at 15:48
  • Why do you want to know this information? – Šime Vidas Sep 11 '12 at 15:49
  • you have to take into account letters like: 'j','q','g','y','p'... notice they all go lower than letters like 'B','M','W' – tybro0103 Sep 11 '12 at 15:49
  • @ŠimeVidas : trying stuff in js and need to know that – arthurquerou Sep 11 '12 at 15:53
  • @tybro0103 : look at my example, the 'j' goes as high as a capital letter as lower than regular letters ;) – arthurquerou Sep 11 '12 at 15:54

3 Answers3

6

It represents the size taking as reference the top of the highest letter like a 'I' and the bottom of a descender character like a 'p'

You can find more information on this page

Regards.

Aymeric
  • 1,089
  • 7
  • 10
0

If you want to calculate the height of a certain text maybe this helps:

http://daipratt.co.uk/calculate-text-width-and-height-with-javascript/

Rockbot
  • 935
  • 1
  • 6
  • 24
-2

If you set font size in em, it will shows same size in all browsers and also in zoom function.

Serif Serif fonts have small lines at the ends on some characters (Times New Roman) Sans-serif "Sans" means without - these fonts do not have the lines at the ends of characters (Arial, Verdana) Monospace All monospace characters have the same width (Courier New, Lucida Console)

Web Designer cum Promoter
  • 1,334
  • 14
  • 26