Meaning of Font Size
Let's say you use CSS to specify
font-size:16px
Ok, it's 16 pixels. But what does it mean exactly? is it height of M? or width of M? Neither!

What Does Font Size Mean Exactly?
The CSS font size of a font is the “em height”.
“em height” is the height of a imaginary design box around the font that includes space for ascender and descender plus a little padding.
“em height” is not the bounding box. (“bounding box” is not a concept in typography.)
The actual height of letter M, differs depending on the font used.
Some character, such as Ü , may extend beyond this design box.
Actual Letter Height
Different font with same CSS size spec may have very different size, because the ratio of CAPS height to “font size” is not standardized.
For example, compare:
Typically, serif font are smaller.
CSS Basics
Color
Font
Box Model
Layout
- Layout Tutorial
- Display Property
- Position: static, relative, fixed, absolute
- Pure CSS Table
- Tabbed Menu
- 3 Columns Page Layout
- Multi-Column Layout for Text Flow
- Fix Element to Window
- Centering
- Flowing List
- z-index
- Text Over Image
- Text Flow Around Image
- OverFlow, Scrollbar
Transform/Animation
Line Wrap, Justification
- Line Wrap
- Text Alignment, Justification
- Match first-letter and first-line
- “:before”, “:after”
- Text Decoration: Underline, Overline, Line-Through
- Letter Spacing, Word Spacing
Box Decoration
Misc
- Computed Style
- Pseudo Class vs Pseudo Element
- Media Query
- Variable
- calc
- Reset
- user-select
- Data URI Scheme
- protocol-relative URL
- Default Unit
- Declaring Character Set in CSS File
- Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
- Display Table on Small Screen
- Fixed Aspect Ratio
- Add Icon to Links
- Progress Bar Example
If you have a question, put $5 at patreon and message me.