Albuquerque Public Schools
Typography and Style Overview
There are several different options for typography available. Remember to keep your headings in order.
About Text in All Caps
Text in all capital letters make it difficult to read page content. APS Web Styles for page graphics and content support upper and lower case lettering, and not all capital letters. For more reading on this:
This is a paragraph above the heading with a "lead2" style. Sometimes these are used so that the main point of the page stands out.
Links
- Internal link that will redirect if page is moved
- Internal link that will not redirect if page is moved
Heading Level 2
Heading Level 2 identifies the main topics of a page. Use headings hierarchically. It is best to plan out heading structure before composing a page.
Subheading Level 3
Identifies sub-topics of Heading 2 topics. Do not skip headings, for example, from <h2> to <h4>. Do not select heading levels based on their appearance. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank.
Subheading Level 4
Identifies sub-topics of Heading 3 topics. H4 headings are rarely needed.
Subheading h5
Identifies sub-topics of Heading 4 topics. H5 headings are rarely used.
Blockquote
The name of my ship is the Lollipop. It's a good ship.
— Captian William T. Riker, StarFleet
Text Helper Classes
Some of these styles may not be available in the WYSIWG editor, and may need to be added in code view. "Normal" is the default paragraph style and should be the text on most pages.
| Class | Code | What content type to use on |
|---|---|---|
| display2 | class="display2" | Home page grey bar heading, or full page landing page main heading. Should be in proportion to the other content on the page. |
| display3 | class="display3" | Home page grey bar heading, or full page landing page main heading. Should be in proportion to the other content on the page. |
| h3 | class="h3" | Headings, or on a paragraph if in a well or callout |
| h4 | class="h4" | Headings, or on a paragraph if in a well or callout |
| h5 | class="h5" | Headings, or on a paragraph if in a well or callout |
| lead | class="lead" | First paragraph on a page |
| lead2 | class="lead2" | First paragraph on a page |
| text-uppercase | class="text-uppercase" | Not recommended for general use. All capital letters is not a supported web best practice, |
| discreet | class="discreet" | Captions or at the end of a page for sources, or citations. Used on a span or paragraph |
| highlight-grey | class="highlight-grey" | Span or Paragraphs |
| highlight-yellow | class="highlight-yellow" | Span or Paragraphs |
This is a Discreet Paragraph — Good to use at the end of pages if you're giving a nod to a sponsor or associated organizations.
Spacing Helper Classes
Use to increase blank space between sections on a page.
- Top Margin: mtop0, mtop10, mtop20, mtop30, mtop40, mtop50
- Top Padding: ptop0, ptop10, ptop20, ptop30, ptop40, ptop50
- Bottom Margin: mbottom0, mbottom10, mbottom20, mbottom30, mbottom40
- Bottom Padding: pbottom0, pbottom10, pbottom20, pbottom30, pbottom40