Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Typography

Typefaces

PEGASUS uses two typefaces to keep the site clear and legible.

Open Sans

Aa Bb Cc

Open Sans is the primary font for the site and should always be used for body copy and text 16px and smaller.

Open Sans is provided by Google Fonts and we are specifically using the font weights of: 300 (light), 400 (regular), 600 (semi-bold) and 700 (bold).

Note: While the Dallas College brand calls for use of Roboto in body copy, we have opted to continue using Open Sans for enhanced legibility in digital formats.

font-family:'Open Sans', arial, helvetica, sans-serif;

Fallbacks

The fallback typefaces (used in instances where Open Sans is unavailable) are:

  • Arial
  • Helvetica

Montserrat

Aa Bb Cc

Montserrat should be limited to headers, main navigation bars, testimonial components or certain content areas that need special attention.

Montserrat is provided by Google Fonts and we are specifically using the font weights of: 700 (bold) and 800 (extra-bold).

Note: Montserrat is the cost-effective and scalable alternative to Mont, the official Dallas College brand typeface.

font-family: Montserrat, 'Open Sans', arial, helvetica, sans-serif;

Fallbacks

The fallback typefaces (used in instances where Lucida Bright is unavailable) are:

  • Open Sans
  • Arial
  • Helvetica

Deprecated: Serif

Because the new Dallas College brand does not include or make use of serif typefaces, serif will be discontinued. Please do not include serifs in any designs or layouts going forward. All use of this style will be phased out completely by January 1, 2021.

Helper Class!

You can apply the .mont class to any HTML element to transform the font-family to Montserrat.

Back to the top

Headings

Default Heading Styles

These are the default heading styles for: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>:

This is an H1 which has a font-size of 32px. This is an H1 link

Accessibility Note: <h1> elements should only appear once on the page (as the page title). These heading elements should also be nested properly and not be used to style text. Proper use of headings is a way to establish order and structure to page content that helps not only those with screen readers, but all users.

This is H2 which has a font-size of 24px. This is an H2 link

This is H3 which has a font-size of 20px. This is an H3 link

This is H4 which has a font-size of 18px. This is an H4 link

This is H5 which has a font-size of 16px. This is an H5 link
This is H6 which has a font-size of 14px. This is an H6 link

Accessibility Note: Avoid applying any font color styles to headings and stick with the default color styles to maintain adequate contrast.

Helper Class!

There will be times when you would like to style other blocks of text to appear as a heading without inputting incorrect, non-semantic HTML code. For this, we have built-in the ability to apply any of the above styles without having to code text as an <h2>, <h3>, etc.

To apply the same size/weight styles (without inputting incorrect HTML code) you can apply any of the following classes to any text element (including other heading elements):

  • .h1
  • .h2
  • .h3
  • .h4
  • .h5
  • .h6

Heading + Small

You can apply the .small class to headings to create subheading text:

You can have a regular header And wrap it with the .small class for a subhead

Additional Heading Style: Page Header

To create added emphasis or hierarchy on a page, PEGASUS includes a style to add a thin full-width underline to the heading: .page-header.

This is an example page header with an H2

Proper Use: Page Header

When designing a page with lots of headers and header levels, you will find a need to have additional styles to help differentiate between <h2> and <h3>. Applying .page-header to these heading elements is appropriate.

Additional Heading Style: Image Header

Add an image to your header using the .img-header class. This class works with <h1>-<h6> headers.

Academic and Transfer Courses

 
<div class="img-header">
    <a href="#">
      <img class="img-circle width-75" src="images/student-464x464.jpg" alt=""/><h3 class="inline">Academic and Transfer Courses</h3>
    </a>
</div>

Additional Heading Style: CB Titles

Rather than depending on headers to increase the size of your font, the USE Design Framework has built-in CSS classes that allow you to semantically change your font styles for a number of situations.

CB Titles on Non-Heading Elements

Simply wrap your <p>, <div> or <span> element with these CSS classes to change your font style and size.

This title uses .cb-title

This title uses .cb-title-lg

This title uses .cb-title-xl

.cb-title {
    font-size: 20px;
    font-weight: 600; /* Semibold */
}
.cb-title-lg {
    font-size: 24px;
    font-weight: 600; /* Semibold */
}
.cb-title-xl {
    font-size: 40px;
    font-weight: 300; /* Light */
}

CB Titles on Heading Elements

Applying .cb-title to actual heading elements will only alter the font-size. font-family and font-weight will remain unaffected and defaults to the heading style:

This is the default H2

This H2 uses .cb-title

This H2 uses .cb-title-lg

This H2 uses .cb-title-xl

.cb-title {
    font-size: 20px;
}
.cb-title-lg {
    font-size: 24px;
}
.cb-title-xl {
    font-size: 40px;
}

Back to the top

Body Copy

Lead Paragraph Text

This is lead paragraph text used by applying .lead class to a <p> and should be used to emphasize the first sentence(s) of an intro to a page or section.

<p class="lead">This is lead paragraph text and should be used to emphasize the first sentence(s) of an intro to a page or section.</p>

Proper Use: Lead Paragraph

Lead paragraph text is sized and spaced to attract the user's eye. It is intended to be used at the top of all landing pages, and the top of some interior pages. The importance of the topic (and its relevance to the student audiences) will dictate whether lead paragraph should be used. But it is up to the discretion of the web editor.

Lead paragraph text should take no more than 3-4 lines. If the full paragraph is longer than that, it should be broken up to where the first sentence or two are in lead paragraph style, while the remaining sentences are in standard paragraph style.

Regular Paragraph Text

This is regular paragraph text which is displayed at 16px using Open Sans. This is how a hyperlink appears in a regular paragraph.

<p>This is regular paragraph text which is displayed at 16px using Open Sans.</p>

This is paragraph with .small text and should be used when styling a note, footnote, annotation or aside.

<p class="small">This is paragraph with small text and should be used when styling a note, footer, annotation or aside to any other blocks of text or content.</p>

Proper Use: Small Paragraph

Small paragraph style can be used for footnotes, asides, captions or any piece of copy that is supplementary or secondary to any other blocks of content.

Helper Class!

To easily use the small paragraph style, apply .small to any HTML element (including headings).

Back to the top

Lists

Unordered Lists

  • Item One
  • Item Two
  • Item Three

Used when listing a number of items that are in no particular order.

Ordered List

  1. Item One
  2. Item Two
  3. Item Three

Used when listing a number of items that need to be presented in a specific order.

Unstyled Lists

  • Item One
  • Item Two
  • Item Three

To display a list unstyled (with no bullets or numbers) apply the .list-unstyled class to the ul or ol.

<ul class="list-unstyled">

List with Bottom Border

  • Item One
  • Item Two
  • Item Three

To display a list with a bottom border apply the .li-border class to each <li>.

<li class="li-border">

Striped list

  1. Item One
  2. Item Two
  3. Item Three

To display a list with an alternating stripe .list-striped class the list.

<ul class="list-striped">

Inline Lists

  • Item 1
  • Item 2
  • Item 3

To display unstyled lists inline apply the .list-inline class to the ul or ol.

<ul class="list-inline">

List Combinations

Here are some examples to show how some of these classes can be combined:

Combine .list-striped. and .list-unstyled for formatting without bullets.

  • Item One
  • Item Two
  • Item Three
<ul class="list-striped list-unstyled">

Use an <ol> with .li-border applied to each line item for an ordered list with a bottom border.

  1. Item One
  2. Item Two
  3. Item Three
<ol>
<li class="li-border">

Back to the top

Blockquote and Indent

Blockquotes

You should only use <blockquote> when quoting text from another person or source. It should not be used only to style any kind of text.

You all are an integral part of Dallas College, regardless of what your role is all about. Regardless of title. Regardless of position. You are Dallas College. You connect people and ideas. You are the solution to solving the problems of those in need. You are hope. Dallas College cannot function without you. I hope you will stand with us as we transform lives and communities, creating hope and futures, bridging what divides us through education.

Indents

If you simply need to indent content, use the .indent class instead of <blockquote>.

PEGASUS uses two typefaces to keep the site clear and legible. For most body text, we use Open Sans and for headings we use Montserrat..

<p class="indent">PEGASUS uses two fonts ... we use Montserrat.</p>

Back to the top