Skip to main content

Typography

Overview

  • Our type ramp follows Microsoft's Design Language ramp and is the same ramp used by Windows.
  • The type ramp is responsive in terms of the levels of difference in the type hierarchy. At smaller viewports those differences are reduced and at extra large viewports they are expanded. This allows us to best leverage the amount of vertical space in the viewport.
  • Type components automatically include information from the ramp. Ramp values are not available as options or manual overrides.

Pairing and type sets

To promote a consistent hierarchy, MWF offers sets for pairing type across a few size ranges. These pairing do not cover all pairing possibilities, rather, they are meant to address a range of scenarios where there are several blocks of type as the main pieces of content on the page.

<h3 class="c-heading-1">Heading size 1</h3>
<div class="c-subheading-1">Subheading size 1</div>
<p class="c-paragraph-1">Paragraph size 1</p>
<h3 class="c-heading-2">Heading size 2</h3>
<div class="c-subheading-2">Subheading size 2</div>
<p class="c-paragraph-2">Paragraph size 2</p>
<h3 class="c-heading-3">Heading size 3</h3>
<div class="c-subheading-3">Subheading size 3</div>
<p class="c-paragraph-3">Paragraph size 3</p>
<h3 class="c-heading-4">Heading size 4</h3>
<div class="c-subheading-4">Subheading size 4</div>
<p class="c-paragraph-4">Paragraph size 4</p>

These pairings would appear like this (using example text):

Perfect together

Office 2016 and Windows 10

Create polished documents with the Office applications you know and trust. Sign on once, your settings and documents follow you across Windows devices. Boost your on-the-go productivity with touch-friendly apps for Windows phones and tablets. Create and collaborate on documents with others and keep everyone organized and up-to-date with shared notebooks.


Example where heading, subheading and paragraph all use size 1

Perfect together

Office 2016 and Windows 10

Create polished documents with the Office applications you know and trust. Sign on once, your settings and documents follow you across Windows devices. Boost your on-the-go productivity with touch-friendly apps for Windows phones and tablets. Create and collaborate on documents with others and keep everyone organized and up-to-date with shared notebooks.


Example where heading, subheading and paragraph all use size 2

Perfect together

Office 2016 and Windows 10

Create polished documents with the Office applications you know and trust. Sign on once, your settings and documents follow you across Windows devices. Boost your on-the-go productivity with touch-friendly apps for Windows phones and tablets. Create and collaborate on documents with others and keep everyone organized and up-to-date with shared notebooks.


Example where heading, subheading and paragraph all use size 3

Perfect together

Office 2016 and Windows 10

Create polished documents with the Office applications you know and trust. Sign on once, your settings and documents follow you across Windows devices. Boost your on-the-go productivity with touch-friendly apps for Windows phones and tablets. Create and collaborate on documents with others and keep everyone organized and up-to-date with shared notebooks.


Example where heading, subheading and paragraph all use size 4

All caps and case sensitivity

Caution: Avoid the use of CSS text-transform in code!

Content strings should be transformed (upper, lower, etc) only in content and specific to the lang-locale not in CSS. As evidenced on MSN and Bing, it will cause changes to the meanings of words in zh-cn, ru-ru, el-gr, etc. and this we should prevent.

Character entities

Certain characters are reserved characters in HTML, such as ampersands and less than or greater than signs. These are considered character entities and must be rendered as &entity_name; or &entity_number; to prevent problems with the page rendering.

Straight quotes such as "" are preferred for universal rendering on the web. Curved quotes such as “” may be used as long as they use the proper entity of &ldquo; and &rdquo;, respectively.

Grammar

  • Use a comma before the 'and' in sentences. Also known as, an Oxford Comma.
  • Use a single space after the end of each sentence punctuation.
  • Capitalize the first word in titles.