<div class="container">
  <p>
    The following paragraph's font characteristics are set using the <code>font</code> shorthand property.
  </p>
  <p class="element shorthand">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, sequi, magnam, dolor odio et esse iste expedita minima facilis voluptatibus amet pariatur accusamus ipsum consequuntur omnis dolorum fugiat. Nemo, odio!
  </p>
  <p>The following paragraph has the same font as the one used in your operating system for menus.</p>
  <p>
    Try changing the font size, style, weight etc. of the system font using the individual properties.
  </p>
  <p class="element system">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aut, omnis quod voluptatem deserunt nemo repudiandae alias dicta cum ullam ab maiores eius provident repellat architecto aspernatur dolores totam amet.
  </p>
</div>
* {
  box-sizing: border-box;
}

body {
  background-color: #f7eef8;
  color: #555;
  font-size: 1.1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 20px;
  background-color: #565455;
  color: white;
}

.shorthand {
  font: normal bold 20px/1.4 "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}

.system {
  font: menu;
  /* try changing the font size, style, weight etc. of the system font using the individual properties */
}