unify typography

[ezra-sg]

• create typography style system
  • header (h1)
  • subheader (h3)
  • body
  • label (h5)
  • links
    • text vs other links (eg. images)
    • hover state
    • focus state
    • active state
• decide how to handle (incl. possibly disallowing) html tags often used to apply style, like strong and em
• create styles as mixins, eg. @mixin header-text
• create _typography.scss, defining styles using mixins, eg.

  h1,
  .h1,
  .o-text--header {
      @include header-text();
  }

• create text utility classes, u-text-- centered, right, error, primary, grayscales
  • if this ticket is completed before color system, exclude color utility classes and add to that issue's description
• seek and destroy (replace) all explicit text-related styling & classes
• create typography demo route /demo/typography, link in docs / README

Overview

Presently, there are no rules or guidelines for typography on Teloscan. As a result, the text styles are highly fragmented and inconsistent across components (making consistency across Telos applications impossible as well). Additionally, all new features/pages/components take unnecessarily long to create, as the style for every text element must be re-implemented or copied from another component (further increasing inconsistency). Usability decreases with inconsistency of typography as well, as a type design language directs the user's attention and greatly influences their understanding of elements onscreen. Regardless of application size, a small but well-considered system of a couple typefaces and type styles is sufficient to cover all use cases.

For the sake of both development time and user experience, Teloscan (and eventually, all Telos apps) should adhere to a single typography system

Acceptance criteria

• reset styles should be added for all text elements
• a typography system should be be implemented, consisting of:
  • two typefaces, a serif and a sans-serif (existing fonts may be used, they do not need to be new)
  • a primary color
    • color ought to be variableized, as the color system is handled in a separate issue, unify color / theme system #132
  • styles (font-family, font-size, font-weight, letter-spacing, line-height) for each of the following text elements:
    • header (h1)
    • subheader (h3)
    • body
    • label (h5)
    • links (not other elements, eg. images)
      • hover state
      • focus state
      • active state
• a new Issue should be created to audit existing style usage and replace with new styles

Technical considerations

• all styles added for this Issue should be namespaced, sandboxed, or otherwise prevented from affecting site styles until such a time as the application is moved to the new system; styles added should not contribute to overall style fragmentation
• styles/mixins which already exist (eg. u-text--center) should be copied to the new files so they remain after future refactoring is complete
• reset styles should be placed in a global sass partial called _reset.scss rather than in /typography, and should include:

a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

• because many non-text elements, eg. <img> are wrapped in an anchor, link style selectors should be written to only target strictly text elements; it should be indicated in the typography docs that some text links may need the link class applied to them, eg. <router-link class="o-text--link">

Tasks