Typography

Examples of typographic styles and modules availible in this template are viewable below. Before using the available styles, it is recommended to review Western Brand Central to understand the developed identity.

Type

Western Washington University implements the web-based Google typeface family Muli for this template.

Muli Normal

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ^ ( ) [ ]

Headings

Heading 1

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.

Heading 2

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.

Heading 3

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.

Heading 4

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.


Heading 5

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.


Heading 6

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.


Links

The following link guides the user to another webpage.

The following link style allows you to directly send an email.

The following link leads to a PDF that contains information.

This heading contains a link.

Lists

The list below is denoted using bullet points which are assigned to the <ul> tag.

  • Design
  • Develop
  • Advise
  • Maintain

The list below is denoted using ascending numerals which are assigned to the <ol> tag.

  1. Design
  2. Develop
  3. Advise
  4. Maintain

Tables

Data tables can be used to easily display statistical information. Avoid using tables to create page layouts.

WA Resident Tuition Mandatory Fees Housing/Meals Books/Supplies Transportation Miscellaneous
Yes $7,503 $1,359 $9,656 $1,080 $1,266 $1,806
No $18,392 $1,359 $9,656 $1,080 $1,266 $1,806
No $18,392 $1,359 $9,656 $1,080 $1,266 $1,806
No $18,392 $1,359 $9,656 $1,080 $1,266 $1,806

Quotes

Quotes can be displayed easily by containing them within the "quoted" class. To do this, place your quote between <div class="quoted"> and </div> in your HTML.

Working for [WebTech] has been a great step up from the service jobs I've worked in previously. My work is typically self-directed and collaborative. I feel like a have a great dialogue with Marie, my boss, and with my coworkers. Good communication is critical to our mission, and it goes both ways here. Constructive input is always valued and taken seriously.

Call-Out Boxes

Vivamus sed pretium arcu. Vestibulum a aliquet augue. Quisque tincidunt aliquet sagittis. Sed tellus purus, posuere nec purus a, auctor feugiat neque. Maecenas vitae fringilla dui. Sed feugiat, mauris in volutpat venenatis, massa sapien pellentesque metus, quis feugiat sapien ante at enim. Donec varius diam vitae justo aliquet, quis lacinia lectus imperdiet.

"Alea iacta est." (The die has been thrown)

Julius Caesar

Image Captions

Below are examples of captions used to accompany images. Image captions (also called figures) may be set to appear on the left or right of your page by utilizing the figure classes <figure class="fig-right"> or <figure class="fig-left">.

A photo of Old Main (OM), an Administration and Campus Services building. Old Main and other buildings on WWU's campus can be viewed on the campus map.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper accumsan mattis. Aenean suscipit, tortor vitae porttitor consectetur, orci nulla fermentum mi, vel pretium lectus mi ac tortor. Vestibulum odio neque, hendrerit eget lectus et, ultricies posuere risus. Etiam at sollicitudin velit, et convallis neque.

Ut malesuada est id turpis facilisis luctus at sit amet arcu. Vivamus leo urna, ultricies ut pretium ut, ullamcorper vel sapien. Nunc consequat dapibus purus ut gravida. Integer ac massa vitae quam ornare lacinia in quis urna. Suspendisse molestie quam et tellus elementum euismod. Mauris eget dictum nisl, lobortis cursus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non tortor elit. Ut malesuada est id turpis facilisis luctus at sit amet arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit at sit amet arcu.

"Skyviewing Sculpture," created in 1969 by Isamu Noguchi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper accumsan mattis. Aenean suscipit, tortor vitae porttitor consectetur, orci nulla fermentum mi, vel pretium lectus mi ac tortor. Vestibulum odio neque, hendrerit eget lectus et, ultricies posuere risus. Etiam at sollicitudin velit, et convallis neque.

Ut malesuada est id turpis facilisis luctus at sit amet arcu. Vivamus leo urna, ultricies ut pretium ut, ullamcorper vel sapien. Nunc consequat dapibus purus ut gravida. Integer ac massa vitae quam ornare lacinia in quis urna. Suspendisse molestie quam et tellus elementum euismod. Mauris eget dictum nisl, lobortis cursus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non tortor elit. Ut malesuada est id turpis facilisis luctus at sit amet arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non tortor elit. Ut malesuada est id turpis facilisis luctus at sit amet arcu.

Code

Computer code may be easily displayed in this template. The example below shows the prettyprint code display module. This module supports syntax highlighting for over 30 popular programming languages.

    // This Dart script will calculate the nth Fibonacci number:

    int fib(int n) => (n > 1) ? (fib(n - 1) + fib(n - 2)) : n;
    main() {
        print('fib(20) = ${fib(20)}');

The example above was displayed by placing code inside the prettyprint class refered to as: <pre class="prettyprint">. The area below shows the HTML that was used to display the prior example.

    <pre class="prettyprint">
    // This Dart script will calculate the nth Fibonacci number:

    int fib(int n) => (n > 1) ? (fib(n - 1) + fib(n - 2)) : n;
    main() {
        print('fib(20) = ${fib(20)}');</pre>