WinJS CSS classes for typography

Applies to Windows and Windows Phone

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

 

Quickstart: Styling controls