С»Æ贫ý

Web services

MyС»Æ贫ý typography

The fonts, text colors, and text sizes used in MyС»Æ贫ý were carefully chosen to maximize readability and accessibility, as well as maintain a fresh and modern look.

Look through the following pages to see all the typography options available for use.

Development info

  • Stylesheet location: /pcc/styles/helpers/_typography.scss
  • Learn how to change the font size, style, and weight at the top of the typography basics page in the web style guide.

Fonts

Just like the С»Æ贫ý website, MyС»Æ贫ý uses Open Sans for headings and body text. Learn about Open Sans, font colors, and accessible sizes in the web style guide under fonts.

Headings

Headings are very important for creating a content hierarchy on the page, both for visual differentiation and accessibility reasons. They must be nested properly, and not chosen based on visual sizing. For more information about using headings correctly, visit the in Spaces.

Heading usage

No classes or other styles are necessary, and there are no bold, italic, or bold-italic headings.

  • h1 – reserved for the site heading (С»Æ贫ý logo and MyС»Æ贫ý text)
    С»Æ贫ý logo and MyС»Æ贫ý text
  • h2 – reserved for channel titles (Quick links in the following example)
  • h3 – first-level headings in channels (MyС»Æ贫ý Resources in this example)
    Channel title (h2) and content heading (h3) example
  • h4 – second-level headings in channels
  • h5 – third-level headings in channels (rarely used)
  • h6 – fourth-level (final) headings in channels (rarely used)

Paragraphs

MyС»Æ贫ý uses the same basic paragraph styles as the С»Æ贫ý website. Learn more in the web style guide under paragraphs. All paragraphs are in channels, and no class or other styles are necessary.

Basic paragraphs

The channel below has a paragraph above the search box.

Channel with a paragraph example

Devnotes

Devnotes are a type of paragraph and are only used for development purposes. Use a devnote to highlight questions or unfinished tasks in a channel in MyС»Æ贫ý Test.

Devnote development info and styling
  • p class="devnote" or span class="devnote"
  • These paragraphs are smaller, red, and italicized.

Devnote example

Most channels have basic text links. For most links, MyС»Æ贫ý uses the same basic link styles as the С»Æ贫ý website. Learn more about links in the web style guide under links. Some of the custom channels have links that look different.

Basic links

Channel with a series of basic links, three in a list and one not.

Channel with links

“More” links

More links provide further information about a topic or help users understand the channel. They’re set apart from the main content with a horizontal line and right-aligned text.

More link in a channel

More link development info and styling
  • p class "more-link" with an a inside
  • More links are divided from the rest of the channel’s content by a horizontal line. They are dark gray instead of turquoise.

Buttons

Buttons look basically the same in MyС»Æ贫ý as on the С»Æ贫ý website. Learn more in the web style guide under buttons. All buttons are in channels.

Button development info and styling
  • MyС»Æ贫ý uses both HTML buttons and input type="submit" buttons.
  • Buttons are disabled when not all the required form elements are complete.

The code isn’t exactly like in MyС»Æ贫ý, but buttons look like this:

Button
Disabled button

Lists

MyС»Æ贫ý uses the same basic unordered list styles as the С»Æ贫ý website. Learn more in the web style guide under lists. All lists are in channels and don’t require any classes or additional styling.

Unordered lists
  • Unordered lists have bullet points
  • The bullet points have a solid fill
Ordered lists
  1. Ordered lists are numbered
  2. They use regular numbers rather than Roman numerals or letters

Quotes

One channel uses blockquote: the С»Æ贫ý Corner channel. If other channels need a blockquote in the future, they are set up to use. Quotes in MyС»Æ贫ý look the same as they do on the С»Æ贫ý website. Learn more in the web style guide under quotes.