Skip to main content

Text formatting and Typography

A lot of experience has gone into the design of MWF's standard typography. From the standardized font, glyphs, type ramp, text element pairings and type sets, MWF uses text as an active element in both the look-and-feel and the usability of Microsoft websites. The following is a detailed overview of Typography in MWF.

Fonts

The typeface used in MWF is based on the Segoe font family. There are 2 standard fonts used in MWF. Both are included in the MWF distribution.

Our text font is Segoe UI. It is used throughout MWF and is part of the CSS distribution for each MWF release. There are non-latin font variations available, but only in the many regionalized versions of the CSS distributions. You can find more information about Segoe UI in the Styles section of this website.

Our glyph symbol font is MWF-MDL2. This font has been optimized for presentation and performance in MWF. It is the only acceptable resource for icons or glyph symbols in MWF. You can learn more about MWF glyphs on the Using glyphs page.

Type ramp

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 viewport sizes those differences are reduced and at extra large viewportsizes they are expanded. This allows us to effectively leverage the amount of vertical space in the viewport. The type components automatically include information from the ramp. Ramp values are not available as options or for manual overrides. However, you can usually chose where to enter the ramp on a given page and this provide some flexibility for page design.

Pairings and type sets

To promote a consistent hierarchy, MWF uses sets for pairing type across a limited range of sizes. These pairing do not cover all pairing possibilities. Instead, they are meant to address a range of practical scenarios where there are several blocks of type as the main pieces of content on the page. For example, consider the following HTML markup.

HTML

    <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>
     
    

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

 

Formatting text

MWF conforms to the HTML 5 standard. But we do apply MWF styling to certain HTML text elements. The most important of these is heading, paragraph, and subheading. Of course, HTML 5 doesn't have a subheading element. But MWF does have a subheading component and you can see an example of it in the code example above. MWF treats all of these as components and they should be used in place of the HTML heading and paragraph elements. Find out more about headings, sub headings, and paragraphs.

There are also other standard HTML text elements in HTML 5 that can be used in MWF. Most of these have special MWF styling applied. The following table illustrates examples of their use.

Useful HTML 5 text elements
Text element MWF example Notes
Voice
Emphasis <em> Showing emphasis inline.
Bold <strong> Showing bold inline. The old <b> tag should be used as a LAST resort when no other tag is more appropriate.
Marked <mark> Showing marked inline.
Alternate voice <i> Showing alternate voice inline. Use the <i> element only when there is not a more appropriate semantic element.
Reference & definition
Abbreviation <abbr> Showing abbr inline.
Annotation <u> Showing annotation inline. The <u> element was deprecated as the underline element in HTML 4.01 and redefined in HTML5 to represent text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese.
Citation <cite> Showing a citation inline.
Definition <dfn> Showing a definition inline.
Quotation <q> Showing a quotation inline.
Small <small> Showing small inline. Most browsers will display the <small> element with the CSS value font-size: smaller;
Subscript <sub> Showing subscript inline.
Superscript <sup> Showing superscript inline.
Modification
Deleted <del> Showing deleted text inline.
Insert <ins> Showing inserted text inline.
Strikethrough <s> Showing strikethrough inline.
Code and I/O
Code <code> Showing code inline.
Sample output <samp> Showing a sample inline.
Showing a block sample output.
User input <kbd> Showing user input inline.
Variable <var> Showing a variable inline.
Internationalization
Bi-directional override <bdo> Showing a bi-directional override inline. The <bdo> tag is used to override the current text direction. Its dir attribute is required to define the text direction (ltr=left to right, rtl=right to left).
Other
Time <time> example The <time> tag defines date/time in a human-readable format. It can also be used to encode dates and times in a machine-readable way (using its datetime attribute) so that user agents can easily process the data. See this reference for more information.

Grammar rules

Grammar is sometimes arbitrary and more than a bit fluid. The following guidelines should be applied to all websites that use MWF.

Composition

  • Use a comma before the 'and' in sentences. Also known as an Oxford Comma.
  • Use a single space after the end of each sentence's terminal punctuation.
  • Capitalize the first word in titles. Use lowercase for all other words unless it is a proper noun, like a name.

All caps and case sensitivity

Content strings should be transformed (upper, lower, etc) only in content and specific to the lang-locale, not in CSS. For example, experience on MSN and Bing has shown that it will cause changes to the meanings of words used for regional designations (i.e. zh-cn, ru-ru, el-gr, etc.) and this must be avoided.

Character entities

Certain characters are reserved characters in HTML, such as ampersands and less than or greater than characters. These are considered character entities and must be rendered as &entity_name; or &#entity_number; or &#xentity_hex_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 you use the proper entity of &ldquo; and &rdquo;, respectively.

Character entity table
Result Description Entity Name Entity Number
  non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark (apostrophe) &apos; &#39;
Trademark &trade; &#8482;
Leftwards arrow &larr; &#8592;
Upwards arrow &uarr; &#8593;
Rightwards arrow &rarr; &#8594;
Downwards arrow &darr; &#8595;
Black spade suit &spades; &#9824;
Black club suit &clubs; &#9827;
Black heart suit &hearts; &#9829;
Black diamond suit &diams; &#9830;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
lozenge &loz; &#9674;

There are many other character entities available for use in HTML 5. See this reference for a downloadable cheat sheet of HTML character entities.