WinJS CSS classes for typography

Windows Library for JavaScript provides a set of typographic classes that you can use to style your text.

Using WinJS typography classes

To use a typographic class, set the element's class attribute to the name of the class. This example applies the win-type-small class to a div element.

<div class="win-type-small">Some small text</div>

You can assign multiple classes to an element; just separate class names with a space. The next example applies the win-type-small and the win-type-ellipsis classes to the same element.

<div class="win-type-small win-type-ellipsis">Some small text</div>

You can customize these typographic styles by creating your own CSS. Just be sure to include your CSS after you include the WinJS style sheets, or the WinJS style sheets will overwrite your customizations. This example adds a border to the win-type-small class.

/* Add a border to the win-type-small style. */
.win-type-small {
    border: 1px solid gray; 
}

Class list

Here's a list of the typographic CSS classes that WinJS provides.

CSS class	Description
win-type-ellipsis	Defines a style that uses ellipses ("...") to indicate when text content has overflowed its layout area.
win-type-interactive	Adds hover and active states to an element so that it mimics a link.
win-type-xx-large	Makes text very large, the largest size available. This style is useful for first-level headings (h1).
win-type-x-large	Makes text extra-large. This style is useful for second-level heading (h2).
win-type-large	Makes text large. This style is useful for third-level headings (h3).
win-type-medium	Makes text medium-sized. This style is useful for fourth-level headings (h4).
win-type-small	Makes text small. This style is useful for body text, fifth-level headings (h5), and legends.
win-type-x-small	Makes text extra-small. This style is useful for captions and sixth-level headings (h6).

 

Related topics

Quickstart: Styling controls