حاسبة مقياس النوع

A modular type scale is a sequence of font sizes generated by repeatedly multiplying a base size by a fixed ratio. The concept, popularised by Tim Brown's Modular Scale tool, adapts the mathematical ratios found in musical intervals to visual rhythm. A Perfect Fourth scale (ratio 1.333) starting at 16 px produces sizes of approximately 11 px, 16 px, 21 px, 28 px, 37 px, and 50 px—intervals that feel harmonically related because our visual system detects proportional differences, not absolute ones.

CSS clamp(minimum, preferred, maximum) defines a value that scales between a minimum and maximum based on the viewport width. For fluid type, the preferred value is typically a viewport-width unit (vw) or a calc() expression that interpolates linearly between a minimum size at a small viewport (e.g. 375 px) and a maximum size at a large viewport (e.g. 1280 px). This eliminates brittle media-query breakpoints for typography and ensures smooth scaling across all screen widths.

The W3C recommends rem units for font sizes in most contexts because rem is relative to the root element's font size (typically 16 px by browser default) and respects user-level font size preferences set in the browser's accessibility settings. Using px locks the font to a fixed size and ignores user preferences, which WCAG 2.1 Success Criterion 1.4.4 requires to be scalable up to 200 % without loss of content or functionality. em units are useful inside components that need to scale relative to their local context, such as a button that should always display text at 0.875× its parent size.

Leading is the traditional typographic term for the space between lines of text, named after the lead strips compositors inserted between lines of metal type. In CSS, line-height controls the same measurement but is specified as a multiplier of the current font size (unitless 1.5) or an absolute value (24 px). Unitless values are preferred because they scale proportionally when font size changes; an absolute px value can produce crowded lines at large sizes. Most style guides recommend line-height 1.4–1.6 for body text and 1.1–1.2 for headings.

Not necessarily. Using the same family for both headings and body is called a single-font pairing and works well with families that have extensive weight ranges—a 700 or 800 weight heading at large size feels distinct from 400-weight body text. However, mixing a display or serif font for headings with a humanist sans-serif for body creates more typographic interest and is the classical approach in editorial design. The key constraint is that heading sizes must create a clear visual hierarchy: each level should be meaningfully larger (at least 1.25×) than the level below it.