Length & units

A px is NOT a pixel 11 Pt1. Language Length & units Historically, a px is a single physical dot on the screen. But with modern high resolution displays, px becomes a logical unit! physical pixel Apple iPad 2:1 PC display 1:1 Google Pixel XL 3.5:1 1px Physical units are NOT physical 1 in = 96 px 1 pt = 1/72 in = 4/3 px 1 cm = 1/2.54 in ≈ 37.8 px Physical units in CSS are defined as fixed ratios of px! They do not match real world dimensions! CSS physical units are useless on screen . However, printing with 100% scale should (hopefully) produce the desired size. Units relative to font-size html { font-size: 16px; } .larger { font-size: 1.5em; } .half { font-size: .5rem; } <div> 16px = 1rem <div class=" larger "> 24px = 16px * 1.5 <div class=" larger "> 36px = 24px * 1.5 <div class=" half "> 8px = 16px * 0.5 </div> </div> </div> </div> em rem Relative to the current font-size . Relative to the font-size of the root element ( <html> ). define the rem based on the inherited size based on rem inherited from <html> NOTE : unrelated to the glyph M from the font. Which part of text = font-size ? Explained later! The illustration is not drawn to scale! Scale dimensions relative to font-size 12 Pt1. Language Length & units font-size: 16px; width: 8em ; width: 8em ; font-size: 24px; font-size: 8px; width: 8em ; Dimensions relative to the parent width: 100px; parent width: 60%; percentage based width: 50%; NOTE : Height by percentage may not work until you have learned layouts. Dimensions relative to the viewport Content 1 2 3 4 100vw 100vh Content 1 2 3 100vw 100dvh https://... 100vh 100dvh 1vw = 1% of the V iewport W idth 1vh = 1% of the V iewport H eight If you use em or rem for box sizes. dvw = D ynamic V iewport W idth dvh = D ynamic V iewport H eight dvh is dynamic retractable browser UI hidden Mixing units width: calc (10px + 20em / 3); Arithmetic expression with the calc() function. reduced space order doesn't matter vh is static What is a font? 13 Pt1. Language Length & units baseline ( y=0 ) x-height cap-height ascender descender units per em units per em: 1000 cap-height: 693 x-height: 520 font-size: 72pt uppercase: 72pt * 693 /1000 = 49.9pt lowercase: 72pt * 520 /1000 = 37.4pt units per em: 1000 cap-height: 625 x-height: 386 font-size: 72pt uppercase: 72pt * 625 /1000 = 45.0pt lowercase: 72pt * 386 /1000 = 27.8pt Font metrics Dimensions Ubuntu Condensed Cormorant Italic Font Help baseline x-height cap-height ascender descender units per em = 1000 y = 0 y = 520 y = 693 the scale of the coordinate system font metrics measured in units per em ● glyph data defined as bezier curves , ● metadata including font metrics . What is font-size? Table: two fonts in the same font size of 72pt scaled to font-size Ubuntu Condensed 72pt Cormorant Italic 72pt NOTE : x-height & cap-height are the height of lowcase, uppercase letters. NOTE : Line height is far more complicated and is explained later. Units relative to letter size 14 Pt1. Language Length & units Hax0r baseline x-height cap-height units per em 1ex 1cap 1em 1ch em ex cap ch font-size value x-height cap-height width of the 0 (zero) Font size Font metrics Glyph metrics Unit Description use use use use use use use ic width of the 水 (CJK) use use Table: comparison of units related to text NOTE : r em , r ex , r cap , r ch , r ic refers to the root element, which is <html> . Application: match icon size with letters Button Button Alignment issue caused by larger icon size. Icon size matches letter size; no alignment issue. button img { height: 1 cap ; } Problem: Alternative : Use flexbox if you don't want to match the size. <button><img src="..." /> Button</button> Application: width by the number of digits input.pin-code { padding: 8px; width: calc(2*8px + 6 ch ) ; } exactly 6 digits plus padding for fonts with monospaced numbers Solution: