When trying to match the web fonts for other designs, here are some recommendations. You can try downloading them from Google Fonts. Or you can use Adobe Fonts (with a valid Adobe CC subscription). 

• Roboto (for use in headers, accents, etc)
  • Roboto in use here
• Roboto-Condensed (Titles, navigation elements, and secondary option for headers)
  • Roboto-Condensed in use here
• Circe Slab B bold (accent font for quotes and sparing use)
  • Circe Slab B in use here
• Veranda (generic web font)

View Northwest's brand guidelines, including logos, for use on the web.

The WYSIWYG editor has many default formats you can quickly apply like bold, underline and strike through. These are all available in the toolbar or the format menu.  You can also quickly and consistently adjust the format of your text with our predefined styles using the Cascade editor. while in a WYSIWYG editor, select the text to stylize navigate to the 'Format' tab, and choose from the preset font styles or use custom styles 'Format' > 'Formats' and select from, heading options, the system default "Blocks" options, or the Northwest "Custom" options. Note that a shortcut to these presets is also available in the WYSIWYG toolbar.

Paragraph (14pt Verdana)

Bold

Italics

Underline

Strike-through

p-large - Paragraph Large (intro sections)

PARAGRAPH (ALTHEADING CLASS)

Block Quote + paragraph - this is fill copy to illustrate use of the block quote format. This is fill copy to illustrate use of the block quote format.

HEADING 1

Heading 2

HEADING 2 (WITH .H1 CLASS)

Heading 2 (with .h2 class)

Heading 3

Heading 4

Heading 5

Heading 6

Northwest "Bearcat" Green is hex code #006747

Some other common colors to use as needed:

• Accent Colors
  • Accent Bright Blue #00B2E2
  • Accent Bright Green #A1CE5F
  • Accent Light Blue #D6EFF8 (background)
  • Accent Dark Blue #003B70
  • Northwest Red #ee0000
    • When a high contrast color is needed to highlight something. This has been selected for web use to meet accessibility and contrast standards. Use the custom format to quickly apply this color.
    • In a WYSIWYG editor selec 'Formats' > 'Custom' > 'Northwest Red'

Example buTTON

To create a button stylized link, this will apply a preset CSS class to the link to achieve the effect: while in a page editor, in a WYSIWYG click "insert/edit link" and  apply the appropriate link (internal or external) then select "btn" or "btn light" from styling options on click 'ok'.

IMPORTANT! Leave table width undefined (enter nothing in properties) or place 100% in the width to allow tables to be responsive.

Define a table head (THEAD) to create column headers. These headers serve as labels when viewing the table in a responsive format. You can hide said label by using the class "nolabel" on a specific cell.

Table Styles (can be set under Cell »  Table Cell Properties)

By default all tables have a light grey border around it and all cells. This can be disabled by adding using the class "noborder".

Striped Table

You can create a whole table with alternating row colors by using the class "striped".

* Alternatively, you can go to Row » Table Row Properties. Select Alt as the class and in the bottom left corner menu, choose to apply changes to either the even or odd rows.

Table Spacing

If you spacing is uneven in a table, some cells may be in paragraph format and others may not. Paragraph format adds some extra white space before and after the text. You can add and remove this formatting in the "Formats" drop-down box (in the toolbar). If paragraph is already selected, selecting paragraph again will remove that formatting.

View our uploading images guide for help with how to upload.

Here are some image recommendations:

• Consider file type.
  • For best results and reduced load times, WEBP or JPGs files are preferred,
  • PNGs are not recommended for most applications as they result in large files size and diminished SEO results and user experiences.
• Be sure to size your file appropriately.
  • Files should never be over 1 mb (1024 kb) and rarely should they be over about 400 kb.
  • small images in large designs will pixelate and look bad
  • large files in small spaces use an unnecessary amount of space and slow down web load times. 
• Photos for web should always be in RGB mode, CMYK or grey scale greatly increases file size.

Check out our tools and resources recommendations for help finding options for sizing and editing photos. 

"Left" and "Right" text wrapping options displayed below. 

This is fill copy to display the float left and float right options for text wrapping images. This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images.This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images. This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images.This is fill copy to display the float left and float right options for text wrap.

This is fill copy to display the float left and float right options for text wrapping images. This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images.This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images. This is fill copy to display the float left and float right options for text wrap. This is fill copy to display the float left and float right options for text wrapping images.This is fill copy to display the float left and float right options for text wrap.