Typography

The Web Builder platform includes a comprehensive style guide in it's CSS files. For the most part, authors do not need to consider typography in their page designs. Clean HTML markup will be style appropriately.

For those few exceptions that need to define style, we provide the following.

Backgrounds

[Identity Main Colors]

Purple
Rust
Orange
Yellow
Green
Blue
Tan

[Monochromatic Set]

Black
Darkest Gray
Darker Gray
Dark Gray
Gray
Light Gray

[Identity Color Shade Variations]

Light Purple
Dark Purple
Light Rust
Dark Rust
Light Orange
Dark Orange
Light Yellow
Dark Yellow
Light Green
Dark Green
Light Blue
Dark Blue
Dark Tan

Identity Text Color 2011

[Identity Main Colors 2011]

Purple | Rust | Orange | Yellow | Green | Blue | Tan

[Monochromatic Set]

Darkest Gray | Darker Gray | Darker Gray | Gray | Light Gray | Black

[Shade Variations Set]

Light Purple | Dark Purple | Light Rust | Dark Rust | Light Orange | Dark Orange | Light Yellow | Dark Yellow | Light Green | Dark Green | Light Blue | Dark Blue | Dark Tan |

H1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean commodo ligula eget dolor

P Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

H2 Aenean massa cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus

Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

H3 Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem

P Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

H4 The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox

P Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

H5 The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox

P Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

H6 The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox The Quick Brown Fox

P Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items. Paragraph that goes below the heading items

Blockquote

Autas aut labore sectia sum ipsandit am non porenis aut utem ut verchic. Pello Omnim, Sum Ipsandit Am Non Porenis

Bullet List

  • Department of Physics Chair
  • Stephen Turcotte said this event
    • Is just one example of how physics
      • Under the law
      • For all the people in the system
        • Companion Study
        • Single Study
    • Students are going above and beyond
  • Their scholastic obligations
  • In past demonstrations

Number List

  1. Department of Physics Chair
  2. Stephen Turcotte said this event
    1. Is just one example of how physics
    2. Students are going above and beyond
      1. Under the Law
        1. Guiding Light
        2. By the understanding of Him
      2. For all people in the system
    3. Follow His commandments
  3. Is just one example of how physics
  4. Students are going above and beyond
  5. Their scholastic obligations in past demonstrations

Default TABLE style

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
span 4 columns
span 2 columns span 2 columns

SAMPLE TABLE FROM THE NEWSROOM

Date News Entity Headline
Nov. 21 Daily Universe BYU-Idaho offers eight online degrees in 2012
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students

SAMPLE TABLE WITH H3 HEADINGS

Date

News Entity

Headline

Nov. 21 Daily Universe BYU-Idaho offers eight online degrees in 2012
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho
Nov. 2 Channel 6 (KPVI) Rexburg: Recipe for Success – Part 1
Oct. 28 Channel 8 (KIFI) BYU-Idaho Gets New Major
Oct. 19 Channel 8 (KIFI) Car Rental Caters to Students
Nov. 18 Church News Enrollment nearly doubles in 10 years at BYU-Idaho

Shawn's HTML Type example

Header One

Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, abbreviated text sed do eiusmod tempor acronym text incididunt ut labore et dolore magna aliqua. Ut quoted text enim ad minim veniam, quis nostrud exercitation link text ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute deleted text inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote. Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

Cite author with link text, 2008

Header 2

Extended paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Ordered list
  2. Item 2 Consectetur adipisicing elit
  3. Item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  4. Item 4
  5. Item 5

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Unordered list
  • Consectetur adipisicing elit
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • Item
  • Item
  • Item

Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

pre and code pair{
					display:block;
					line-height:1.833em;
					border-top:0.083em solid #200;
					}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Header 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Table Caption
HeaderHeaderHeader
Content 1 a
Content 2 b
Content 3 c
Content 4 d
Content 5 e
Content 6 f
Author text