1. Technology

CSS Sizes

Sizing Fonts Web Page Elements with CSS

By

There Are Many CSS Size Properties

CSS offers many properties to define the size of fonts and elements on your web pages.

  • font-size
    This is a very popular CSS style property. Use it to define the size of your fonts. You can also define the font size using the font shorthand property.
  • line-height
    Line height is the size of the space between lines in your text. This is also in the font shorthand property.
  • size
    This is a CSS 3 style property that defines the size of paged media. While you won't use this on your web pages, you might use it in your print style sheet.
  • background-size
    The background-size property is also known as the background stretch property. It allows you to set the size of your background images to better fit your web pages.
  • font-size-adjust
    When you use a font stack you put your preferred font first, followed in order of preference by other fonts. But one drawback is that if your preferred font isn't available, the second (or third) choice font may be larger or smaller than the first choice font. The font-size-adjust CSS 3 property allows you to set an aspect value to scale the subsequent fonts so they display around the same size as the first choice font.
  • height
    This property sets the height of a block-level element.
  • width
    This property sets the width of a block-level element. And don't forget, width in CSS is just the contents of the element, not the padding, margins or border.
  • padding
    Padding is the space around an element inside the border. Take a look at the CSS box model to see exactly where the padding is.
  • border-width
    This property defines how wide a border should be around an element. It can also be defined in the border shorthand property.
  • margin
    The margin is the space around an element, outside the border.
  • max-width
    This property sets the maximum width that an element should be. Use this property in conjunction with relative sized elements.
  • min-width
    Like max-width, min-width sets the minimum width an element should be. This will make sure that relatively sized elements don't get too small to read.

CSS Size Units

There are many CSS size units you can use to define the measurement of your elements on your pages.

  • Relative Sizes
    Relative sizes are sizes that are defined in relation to something else in the document. For fonts this would usually be the default font size. Relative size units include: em (originally relative to the width of the uppercase M character in the font, now a proportional value of the width and height of the font), ex (relative to the height of the lowercase x character of a font), px (relative to the viewing device), larger and smaller (relative to the parent element), and percentage (%) which is relative to the size of the parent element.
  • Absolute Sizes
    Absolute sizes are units that have an exact size in some context. They include: inches (in), centimeters (cm), millimeters (mm), points (pt), picas (pc), and the browser size keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.

Choosing between absolute and relative size measures is more than just a matter of personal preference. Sizes of fonts on the screen do best with a relative size so that the fonts flex with the browser size accordingly. But use points or picas for print style sheets so that your pages print correctly. And for layout elements, there are benefits to both fixed width and liquid layouts. Personally, for layouts I prefer to create a mixed approach with relatively sized containers that have min- and max-widths assigned to them.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Beginning CSS
  6. CSS Sizes - Sizing Fonts and Web Page Elements with CSS - CSS font-size - CSS Sizes - px - em - % - pt - ex

©2014 About.com. All rights reserved.