Changing Fonts

Altering text via CSS is often easy and intuitive, but sometimes will throw you a curveball here and there. For instance while there may be an easy way to align your text to the horizontal center of an element, there is no one-property value that can be set to enable that.

Text Size

In CSS the size of a text will typically always be defined by the "font-size" property. The values we can give this property on the other hand are quite varied. Many of them are the same that you can apply to any CSS element, which are outlined in the basic CSS sections, so lets look at the ones which should specifically refer to text.

  • px
    Sizes are measured in pixels. This means that a display with more pixels per inch will display the shape / font as smaller than a display with fewer pixels per inch.
  • em
    A single "em" value is equivilent to the default size of the system displayed font. The origin of the actual value "em" is complicated and under great disagreement. Best guess is that it is an ancient Aramaic word used in magical conjuring of demons. It may have also been brought about by an Irish web developer who had a fear of public speaking.
  • ex
    1 "ex" is the x-height of a font. An "x-height" refers to the height of lower case letters and is usually defined by the letter "x".
  • pt
    A "point". One point is equivilent to 1/72 of an inch.
  • pc
    A "pica". One pica is equivilent to 12 points.
  • in, cm, mm
    Size will be measured in inches, centimeters, or milimeters. The displayed size will be dependent on your system display settings.
  • vh & vw
    These two are based on the viewport height and width and measure that distance from 0 to 100 (so 50vh is essentially 50% of the screen height).
  • Let's look at examples of these measurements when applied specifically to fonts. Keep in mind these examples will look different depending on your browser and system settings.

    Text with each type value set to "1". In order the types are "px", "em", "ex", "pt", "pc", and "in".
    Font Size: 1px
    Font Size: 1em
    Font Size: 1ex
    Font Size: 1pt
    Font Size: 1pc
    Font Size: 1in
    Text with each value type changed to produce similar sizes (on the author's monitor).
    Font Size: 30px
    Font Size: 2em
    Font Size: 4ex
    Font Size: 24pt
    Font Size: 2pc
    Font Size: 0.30in

    There is no one "right" choice when it comes to selecting a size type for your fonts. What is probably most important is to choose one system and stick with it. Switching size types in the middle of a project or document can easily lead to confusion.

    There is one reason that you may want to use scaling measurements like "em" however and that is that it can be used to scale entire elements and not just text.

    Here we have two squares. The square to the left has a value of "2em" for the width and height properties. The square to the right has a value of "4em" for the width and height properties. While it makes the shape a little more difficult to gauge the size of it does allow you to change the scale of not only this shape but the scale of the shapes children, should it have some, at the same time.

    Text Position

    Changing the position of text within an element is perfectly logical in some ways and infuriating in others. First let's assure ourselves that the normal positioning properties work the same with text as with any oher element.

    Line Height
    (and centering vertically)

    The idea of "line height" is important to understand because while it does not define the size of the visible text, it does define the area that the text will take up.

    This is helpful when trying to center text vertically. The line-height simply needs to be the same size as the height of the element. This may not work for all font famililes, but can be made to work with minimal adjustment.

    We need to do this because the "text-align" property that you might think centers text vertically actually only centers text horizontally.

    For instance the squares to the right have various size associated with them. Note how the most centered text is the one where the height of the box and the value of the line-height property are the same.

    Each of these cuboids is
    200px wide by 100px high.
    Line height: 50px.
    Line height: 100px.
    Line height: 150px.

    Fitting an element to the text within

    The most basic way to go about resizing an element to match the text within would be to change the display property of the element to "table". In most browsers tables are programmed to fit their contents unless told otherwise.

    Keep in mind this will entail all other table behaviors and may be hard to use with variable size content. Text that is made up of several lines may not always wrap correctly.

    Content goes here. The "p" elements on this page have a max-width property set of about 400 pixels. This blue box enclosing it does not need it as, after being set to a display value of "table" is automatically sizing to it.

    Changing Fonts

    To change a font one can use the "font-family" property. It is a single property that can take a list of desired fonts.

    The way that "font-famaily" takes multiple values is not the same way as other properties. In the case of this property the first value is your most desired font. Every font after that is the "fallback" font in order of most to least desired. So if you were to enter "Arial, Georgia" for the value then the browser will attempt to find and display the font "Arial" first. If it fails to find the font then it will attempt to load and display "Georgia" next. If it runs out of possibilites it will simply use the browser's default font.

    Because of this examples pertaining to the "font-family" property will typically show very similar fonts. For instance "Times New Roman" and "Georgia" are similar in that they are both formal, serif, fonts fairly similar in appearnce. Therefore they may be considered to be interchangeable in their use.

    Each needs to be separated by a comma, and font names made up of multiple words need to be encased in single quotation marks (unless they are the only font listed). So a full font-family entry with multiple fallbacks might be written as so...

    
    font-family:'Palatino Linotype',
                'Book Antiqua',
                 Palatino;
    

    In this case the associated style will attempt to use "Palatino Linotype" for the selected element or text. If this is not found in the system then "Book Antiqua", and then normal "Palatino" will be used.

    Some have recommneded against using custom fonts like this because which fonts a viewer might have on their machine is a large unknown. At the very least it is advised that anyone making use of the "font-family" property test their page without the property to make sure that the font size and proportions do not break the flow or readability of the page in any way should they fail to be loaded.

    Link Styles

    Changing the styles of links specifically is done through use of conditional selectors. The style selectors below would be applied to all "a" tags unless you define an id or class selector for that particular link.

    • a:link – The default style.
    • a:visited – A visited link (already in browser history).
    • a:hover – A change just when moused over.
    • a:active – The style invoked only while clicking the link.

    Please Note: There is a required order for these styles!

    "a:hover"

    Must come after...

    "a:link" and/or "a:visited"

    And...

    "a:active "

    Must come after...

    "a:hover "

    List Styles

    The lists discussed in the HTML section can be styled just like any element on the page. In fact most browsers support preset styles for unordered lists that allow you to mark each list entry with something other than the default black bullet point. Let's start there.

    It's even possible to style your lists with images in place of the bullet points.

    
    ul {
        list-style-image: url('image.gif');
    }