Equivalent Font Sizes
Web browsers and websites display fonts in different sizes. However, using a simple formula you can determine the actual equivalent of a parent font size within Cascading Style Sheet code. Additionally, equivalent font size calculations require knowledge about the different units HyperText Markup Language uses for typography.
Other People Are Reading
-
CSS and Format
-
CSS dictates the appearance and formatting of text within a document. CSS also describes documents that use a markup language, such as HTML. While CSS is a common standard used to describe the presentation semantics of websites that use HTML and XHTML, CSS can also apply to SVG, XUL, and XML documents. Another important role of CSS is to distinguish between the content and the formatting — such as font, color and size — of a document.
Units in Typography
-
Typography uses basic units to describe size. An em is one relative unit of measurement in digital typography that represents the same unit for any given font or point size. Other common units include pixels, that represent absolute measurements; and points and percentages, both relative measurements. Translating from one unit to another in CSS allows you to find equivalent font sizes.
-
How to Get the Equivalent Size
-
One method for obtaining the equivalent font size in different browsers is to set the body font to 10px and set anything else, including the parent font, to the equivalent em. This avoids interference with the default settings of the browser. The basic formula to find the equivalent between units is to divide 1 by the parent font size and then multiply this number by the required pixels. The resulting number is the equivalent in ems.
Choice of Units
-
The most convenient unit depends on placement within the Web page. For example, a site heading or text body would commonly use a relative unit such as percentage or em that changes as the viewer alters the size of the window or screen. Absolute measurements, such as pixels, which do not change based on resizing, typically make more sense for sidebars or other sections that always maintain a standard size.
-
