Grow your CSS skills. Land your dream job.

Last updated on:

Font Shorthand


body {
   font: font-style font-variant font-weight font-size/line-height font-family;

In Use

body {
   font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

Reference URL


  1. Ah, so that’s why I wasn’t able to specify the size of fonts using font:! I’ve always just had to use font-size:.


  2. ysh
    Permalink to comment#

    thanks!! :D this really helps!! :3 woot wooot! :3

  3. Permalink to comment#

    In addition to the URL linked in the post, I have a cheat sheet for helping understand font shorthand:

  4. Casey Dennison
    Permalink to comment#

    Sorry, Louis. I cannot understand you’re cheat sheet.

  5. Permalink to comment#

    Thanks. very useful

  6. Why

    Why on earth would you have Arial before Helvetica

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".