Text size

There are three font size groups in Voyager: Display, Heading, and Base sizes.

<p class="qw-text-display-1">Display text 1</p>
<p class="qw-text-display-2">Display text 2</p>
<p class="qw-text-display-3">Display text 3</p>
                    

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
                

<p class="fs-large">Large Text</p>
<p class="fs-small">Small Text</p>
<p class="fs-micro">Micro Text</p>
                

Font-weight

Voyager uses 4 weights to set the boldness of text: Light, Normal, Bold, and Black.

<p class="fw-light">Light weight text</p>
<p class="fw-regular">Regular weight text</p>
<p class="fw-bold">bold weight text</p>
<p class="fw-black">Black weight text</p>
                

• The use of .fw-light use should be limited to large text due to the thinness of the characters reducing readability at smaller sizes
• All regular text should be in the Normal weight, especially long-form writing, with the exception of text that needs emphasis. If a text string needs to be set at the normal weight, add .font-weight-regular.
• To emphasize text via its weight, add .fw-bold.
• Used rarely, but made available, .fw-black can be used to increase the weight in a text string that is already bold.

Text Alignment

This is left aligned.

This text is center aligned.

This text is right aligned.

<p class="text-center">Center-aligned text</p>
<p class="text-right">Right-aligned text</p>
                

Text-transform

Set the capitalization of text using the text transform utilities.

uppercase text

capitalized text

<p class="qw-text-uppercase">uppercase text</p>
<p class="qw-text-capitalize">capitalized text</p>
                

Line-height

Line height affects readability. When set too low it causes difficulty in tracking lines of text.

Normal

Line-height is set on the body element and cascades throught the document to all children.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Tight

If shorter line-lengths are used, smaller line-heights can be used for content by adding .line-height-tight.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Loose

For longer line-lengths, a larger line-height should be used for content, by adding .line-height-loose.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Line-length

Line length, also called 'Measure' is an important part of readability. Our eyes need constant pauses which are provided by line breaks. Voyager has 4 line-length options to control reading length.

Base

Long-form content should use the base line-length, .line-length-base. It is at the upper bounds of the range for ideal readability, 75 characters in length.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Tight

If the content needs to be constrained, a shorter line-length can be used. .line-length-tight is at the lower end of the reange for ideal readability, 45 characters in length.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Loose

If there is a need to really stretch out the line length, and the content is not long-form, .line-length-loose can be used to set the width to 100 characters.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Reset

On the rare occasion a page's content needs to completely fill the available space, regardless of width, use .line-length-reset.

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.