Text Styling, Part 1

font-family Property

• The font-family property specifies what fonts should be applied to content.
• Think of these as suggested fonts, because if the user's computer / smartphone / etc. does not have the specified font, or the font fails to load for some reason, then they will see the browser's default serif font instead.
• Font names are separated by commas.
• Fonts with multiple space-separated words in their name should be surrounded by either single or double quotes (e.g., 'times new roman')
• The font selection process:
  • The device reading the CSS starts with the first font in the sequence and tries to find a match.
  • If that fails, it goes to the next font and tries to find a match.
  • If that fails, on to the next font and the process is repeated until there is a match (in which case that font is used and the process stops) or none of the fonts match (at which point the browser default is used, which is usually a serif font of some sort).
• If I am not using a web font (which is usually loaded from a third party website), and I am relying on fonts installed on the user's computer, I use this sequence:

  font-family: verdana, geneva, lucida, arial, sans-serif;
  

• All of these are sans-serif fonts, which are easier to read on computer screens given the lower ppi of most computer displays, compared to print documents.
  • verdana: Listed first, because this is the easiest to read (letterforms are large and the font was designed to be easy to read on computers).

    This is part of the Core Fonts that Microsoft installs with Windows, so the vast majority of your users should have it installed.

    Mac OS X users will also have it installed.

  • geneva: Also has larger letterforms. Found fairly often on Mac and Windows.
  • lucida: This font can be found on some Linux installations, so those users will benefit.
  • arial: This font is available on a wide variety of platforms, so it serves as a nice fallback.
  • sans-serif: This is a generic font-family, which tells the browser to use whatever default font the user has selected for that family.

    It is always best to specify a generic font-family last, as a truly last-ditch effort at getting some semblance of the desired rendering.

• If you are looking for an easy-to-read serif font I recommend georgia, which has large letterforms and is a Microsoft Core Font, so it should be installed across a variety of operating systems.
• The generic font-family for serif fonts is, appropriately enough, serif.

  font-family: georgia, serif;
  

• I recommend against choosing a rare font that only you and 5 other people in the world have installed. Sure, it looks great on your six computers, but for everyone else it just doesn't quite have the look you want!
• There are also monospace, fantasy, and cursive font-families, in case those need to be used. They are all generic font-families, like sans-serif and serif.
• Spelling counts; you must match spelling exactly. Matching on capitalization is not necessary.
• If the font name involves multiple words surround the entire name with either double or single quotes. If you don't, then the font name is very unlikely to be matched to another font because only the first word would be used. So "times new roman" matches that font, while times new roman (no quotes around it) looks for a font named times, which is probably not installed.

font-family Example

See the Pen Font Family by Jason Withrow (@jwithrow) on CodePen.

Sizing Units

• Compared to HTML, which is limited to generic sizes (1 to 7) for text and pixels or percentages for tables, CSS has a plethora of sizing options.
• Some of them (such as inches and picas) are not practical for text (or even for layout), so we will not be considering those sizing units.
• For the majority of CSS properties it is invalid to specify a number (e.g., 3) without specifying a unit along with it (e.g., px) and there is never a space between the number and the sizing unit.
• The number 0, however, can always be supplied without a unit.

Keywords Text Sizing Example

See the Pen Font Sizing: Keywords by Jason Withrow (@jwithrow) on CodePen.

em Text Sizing Example

See the Pen Font Sizing: em by Jason Withrow (@jwithrow) on CodePen.

Percentages Text Sizing Example

See the Pen Font Sizing: Percentage by Jason Withrow (@jwithrow) on CodePen.

rem (root em) Text Sizing Example

See the Pen Font Size: rem by Jason Withrow (@jwithrow) on CodePen.

font-weight Property

• When setting amount of font-weight the keywords (lighter / normal / bold / bolder) work as expected and are easiest and most consistent cross-browser and cross-platform.
• If using the numbers, 400 or less is a normal font weight, while 700 or 800 is bold and 900 becomes very boldface in some browsers (in others it is just a regular amount of boldface).
• If you are using a web font, carefully check what weights are available for that font and which ones you are loading. If you fail to load the weight you are specifying, or if that weight doesn't exist for that font, the browser will be doing what it can to get the font to look that way. The results can be underwhelming.

font-weight Example

See the Pen Font Weight by Jason Withrow (@jwithrow) on CodePen.

font-style Property

• Italicizing text alters the letterforms, which makes the text appearance unique but also slows down reading.
• Making the text oblique tilts the letters without altering the letterform, so reading should be a bit faster compared to italicized text.

font-style Example

See the Pen Font Style by Jason Withrow (@jwithrow) on CodePen.

font-variant Property

font-variant Example

See the Pen Font Variant by Jason Withrow (@jwithrow) on CodePen.

line-height Property

• The line-height is, as its name suggests, the height of a line of text.
• Note: If the font-size of the text is less than its line-height the text becomes centered vertically.
• The line-height property is fairly unique in that it can accept numbers without units (e.g., 1.0) as well as numbers with units (e.g., 1em).
• The choice of whether to include a unit has very important ramifications:
  • Inherited Multiplier: When you specify a number without a unit (e.g., 1.4), that becomes a multiplier for every element nested inside the one where the line-height is applied.

    So if you apply a line-height of 1.0 to a <div> that has a font-size of 14px, then that div's content will have a line-height of 14px. Lets assume that there is a <span> tag nested inside with a font-size of 12px. That span tag gets a 1.0x multiplier, so its content has a line-height of 12px (rather than the 14px line-height of content around it).

  • Inherited Computed Value: When you specify a number with a unit (let's assume 1em), the browser calculates the line-height for that element and all the nested tags inside of it inherit that same line-height.

    In the previous example of the div and the span, the div would set a computed line-height of 14px, which then inherits down to the span tag inside of it. The span tag now has line-height of 14px, even though its font-size is 12px.

• Typically I omit the unit, because I want the multiplier effect rather than a computed line-height that inherits down into children and descendants. I want to avoid situations where the line-height is less than the font-size, and an inherited computed value runs that risk.

Example Using Inherited Multiplier

See the Pen Line Height: Inherited Multiplier by Jason Withrow (@jwithrow) on CodePen.

Example Using Computed Line-Height From <body>

See the Pen Line Height: Computed by Jason Withrow (@jwithrow) on CodePen.

font Shorthand Property

• The font shorthand is used to combine all the font-related values and line-height into one sequence, which greatly streamlines your code.
• The sequence of values (and you must follow this sequence) is:

  font-style font-variant font-weight font-size/line-height font-family(ies)

• Important: Values not specified are assigned to their defaults automatically.
• These two rules are equivalent:

  h1 {font-weight: normal;
      font-variant: small-caps;
      font-style: italic;
      font-size: 18px;
      font-family: verdana,geneva,lucida,arial,sans-serif;
      line-height: 1.5;}
  
  h1 {font: italic small-caps 18px/1.5 verdana,geneva,lucida,arial,sans-serif;}
  

• A great deal of the time, the shorthand is what you should use; it is the most streamlined approach.

Shorthand Guidelines

• At a minimum you need font-size and a font-family specified for this to work.
• Gecko-based browsers, such as Firefox, are the most sensitive to any deviations from the indicated sequence of values. You will notice right away that Firefox is rendering differently because it ignored the entire font instruction.
• Remember that values left out are assigned to their defaults, which tend to be normal, so if you don't want italics, boldface, or small-caps just leave those out!

Web Fonts

• Historically, the challenge with typography on the web has been a reliance on the fonts that the user has installed on their computer.
• Unless an image was created that showed a different typeface there was not much that could be done. Techniques involving JavaScript and other technologies were developed, but they introduced complexity into the development process.
• Web Fonts is a CSS approach that loads font files (just like an image or video would be loaded) and the browser then uses that typeface where indicated.
• Web Fonts use the @font-face directive and specify font-family, src, and typically font-weight and font-style:

  @font-face {
    font-family: 'Abel';
    font-style: normal;
    font-weight: 400;
    src: url('Abel.otf');
  }
  
  @font-face {
    font-family: 'Abel';
    font-style: normal;
    font-weight: bold;
    src: url('Abel-Bold.otf');
  }
  
  /* uses the non-bold version given first */
  h1 {font: 150% Abel, sans-serif;}
  
  /* uses the bold version given second */
  h2 {font: bold 120% Abel, sans-serif;}
  

Free Web Font Services

• While hosting your own web fonts is possible, you may find that it is easier to load them from a third party instead.
• There are also concerns about having permission to use a particular typeface and taking steps to block others from calling the fonts on your server (especially if they do not have the rights to use them). The third party websites alleviate this concern.
• The free services:
  • Google Web Fonts
  • Adobe Fonts
• These services will provide you with the code to use for their fonts, so that you don't need to write the @font-face CSS like what is shown in the previous code example.
• I prefer Google's Web Fonts, but keep in mind that reliance on any third-party service brings risks.
  • An outage for them will slow down your site because the calls to their domain will fail and those failures take time to resolve.
  • Your text will not look the way you want it to look.
• It is also important not to go overboard. Typically 1-2 typefaces are plenty and the more style variations you download (e.g, 400, 400italic, 600, 600italic, 700, 900) the longer it will take for your pages to load. Only load what you need!
• If you force the browser to render a style variation that you do not have then it will try to approximate that appearance and the quality of the results will vary. For example, you only download the normal weight and then you use CSS to output the text as bold. The rendering will be the browser's approximation of what that should look like, and that is generally not a desirable result.

Best Practices for Web Font Implementation

1. Use the link tag approach: As you select fonts using Google's website, they will provide you with a link tag to add to your code. Tweak that link tag so it self-terminates and then add it to the head region of your code.
2. Put the link tag code for the Web Fonts before your own stylesheets: We want that font downloading as soon as possible and we want to avoid / minimize any moments where text is unstyled.
3. Always include the code to download the Web Font: Some Web Fonts (such as Roboto) are relatively popular and you may have them already installed on your computer, especially if you work a lot with Photoshop or similar software.

   Never assume that other people have them installed. Sometimes (perhaps most of the time) you will be wrong. It's called a Web Font for a reason - it is intended to be downloaded over the Web!

   It doesn't matter that you have it installed - include the link tag regardless, because other people will view your page as well.

Continue to Text Styling, Part 2