Those examples are all coded for either embedded or external style sheets. Writing 16 px instead of 16px is incorrect syntax. Notice that in all examples, there is no space between the number and the unit of measurement. Size values for pixels are set in whole numbers while size values for points, picas, inches, centimeters, and millimeters can be set as whole numbers or in decimals. I won't kick you out of the Geeks R Us Club if you don't use pixels as I do. Having a background in graphics, where using pixels and dpi are standard operational units, I prefer using pixels to set my font sizes. That will get you close enough to reality to work.
Most computers display at either 72 dpi (dots per inch) or 96 dpi, so there are usually either 72 or 96 pixels per inch. I know that’s a little hard to wrap your head around, so for practical purposes, let’s just say a single pixel is the smallest unit of measurement a computer can render. In other words, a pixel will use more than one dot. If the resolution is set to less than the maximum resolution, a pixel will be larger than the physical size of the screen's dot pitch. If the display is set to its maximum resolution, a pixel will equal the size of the dot pitch. The actual size of a pixel depends on the resolution of the display screen. Pixels, points, and picas may not be as familiar to you as an inch, centimeter, or millimeter, so let me give you an idea of how they compare to an inch. There are several units of measurement you can use. Now that those methods are out of the way, we come to my preferred method of setting the font size-by unit of measurement. In the second example, the text would be half the size of the font size in the containing element. In the first example, the text would be changed to twice the size of the font size in the containing element. Here are two examples using an inline style with a division tag: Rather than having specific bumps in sizes, you can use any percentage (other than a negative value) to change the font size. Using a percentage to change the font size is similar to the using a keyword relative to the containing element, only it gives you more control. Here’s an example of that using an inline style with a paragraph element: If you coded your font size by keyword to be small in size, using the keyword larger would change the size to medium, or one size bigger than it was previously set for (see the previous table of keyword font sizes for reference). This could be a font size you’ve already coded into your page via style sheets, or the default font size of the user agent if you haven't set a font size.īy using either the keyword smaller or larger, you can change the font size relative to the containing element or default size. The containing element is whatever currently controls the current font size at the place in the page where you want to make a change.
If you’re familiar with setting the font size using the deprecated size attribute with the deprecated HTML font tag, here’s a chart showing how this coding closely compares to the old:įont size can also be changed by relative keyword as it pertains to the containing element or default size. Xx-small | x-small | small | medium | large | x-large | xx-large Here are the possible values for setting a font using the keyword method:
Here’s an example of how to code the font size by keyword using an external style sheet:
Setting the font size according to keyword is probably the easiest method for most people, but it also offers less control.