Understanding relative vs. absolute font sizes on Web pages
There are two ways that a Web site can set font sizes: relative and absolute. The use of these in various locations on a page will determine not only how fonts and font sizes are computed for the page but also how some browser settings may handle them.
We recently covered a few approaches to fixing abnormally small or large text on Web pages, including the use of the zoom function, removing cookies, and managing system fonts. In addition to these approaches for fixing or adjusting font problems on Web pages, another thing to keep in mind is how Safari and other browsers manage the default font settings for a Web page.
While most Web sites will set a specific typeface (such as Arial or Georgia instead of Times), there are two ways that a site can handle font sizes: relative and absolute, and the use of these in various locations on a page will determine how fonts and font sizes are computed for the page.
In HTML a page is laid out with various sections that are defined by separate "tags." For instance, there is the main <HTML> tag that defines the whole HTML document, and within it there is a <BODY> tag that will hold much of the content that is seen on the page. Within the BODY tag can be numerous other tags for organizing content on the page, such as <DIV> tags for "divisions," <P> tags for paragraphs, <TABLE%gt; tags for laying out items in grids, and <OL> or <UL> tags for listing items in numbered or bulleted lists.
In many instances these tags are nested so a page can have a table that holds couple of paragraphs, or maybe a paragraph that contains a list. This is the convenience of HTML and allows for quick formatting of a page.
Inherited styles
Each tag in HTML has a style set associated with it, for which its default properties are inherited from its parent tag. Therefore, the reason that a basic HTML page with no special styling attributes will display text in Times 16-point is that these font properties are passed from the browser's preferences to the main HTML tag, and from there to the body tag, and on through to various nested paragraph, table, and list tags that might be on the page.
At any point in this tree of inherited styles, the developer can make either absolute or relative adjustments to a tag's styles and thereby alter the properties of all nested tags from that point on.
In terms of font size, a developer can either set an absolute font style such as "Helvetica 12pt" to be used in a specific tag, or that developer can use a relative font size such as "Helvetica 75%." With the relative approach, instead of setting the font to a set size, the browser will use the inherited font size and set the displayed one to be 75 percent of that font size. In this case, if we pass the default "Times 16pt" setting to a tag for which fonts have been defined as "Helvetica 75%", then the final computed font size will be "Helvetica 12pt".
This is commonly how font sizes on a Web page are determined, and is a reason why some Web pages may show different font sizes if you change Safari's Appearance preferences and others will not. On many of the pages on CNET's sites, for instance, the 12-point font is calculated by being 75 percent of the default font and nowhere in the inheritance tree are the font sizes set to an absolute size. In contrast, other Web sites may take the approach of setting an absolute font size, such as defining the 12-point size directly.
Overall this will not make much of a difference, and font-adjustment methods such as zooming should still work; however, having relative font sizes on a page will allow the whole page's fonts to be adjusted by changing the default fonts for the browser.
Convention or error?
The use of an absolute or relative approach to defining font properties on a page is up to the developer. Technically there are fewer possibilities for quirks if the developer uses absolute font definitions, but having relative font definitions can make managing site styles much easier.
Unfortunately there is no easy way to determine if a site is coded with relative or absolute font sizes, but you can use Safari's "Inspector" feature to view the style properties for specific tags on a page, and follow the inheritance through for each setting to see if the font sizes are absolute or relative. However, while convenient, the inspector can be confusing to people who are not familiar with HTML and CSS styles. Therefore, the easiest way to determine if a site's fonts are set relative to the default font is to adjust the default font in the Safari preference and see if this changes anything on the page (you may have to clear the browser cache and reload the page for changes to take effect).
Troubleshooting
What this means in terms of troubleshooting is basically that beyond the standard content size adjustments such as site-specific cookie settings and Safari's "Zoom" feature, some Web pages may respond differently based on the way elements of the page inherit font size properties. Therefore, if you adjust the default fonts for a browser some pages will reflect a change and others will not.
If for some reason Web page font sizes appear incorrect or illegible, then one possibility beyond using zoom features, removing cookies, and perhaps troubleshooting system font conflicts is to try adjusting the default font sizes in the browser. In addition, since the default sizes are set in the preferences, corruption of the preferences file may result in the incorrect font size being used. Therefore, along with adjusting the browser's zoom levels and other settings you might have to remove your browser's preferences file so it can be replaced with a fresh and working copy.
Questions? Comments? Have a fix? Post them below or e-mail us!
Be sure to check us out on Twitter and the CNET Mac forums.