--- title: Typography description: We use typography to create a clear hierarchy on the page. Font size, weight, height and spacing is used to show emphasis. foundation: http://foundation.zurb.com/sites/docs/typography-base.html sass: ./scss/_typography.scss --- ## Typeface We use Arial for all text on the site and Arial Black for large headings for emphasis. ## Headings Headers are meant to visually and semantically break down a page into hierarchical sections. ### How to Use The heading styles are applied directly to the `` tags by default, setting the font size, font weight, and spacing of the text. Styling has been designed for h1-h4. `
`, `
`, etc. should be avoided if possible. #### h1 or .xlarge-heading `

` should be used as page headers. There should only ever be one `

` element per page. A 'special' version of the `

` element can be seen on the [Hero](/styleguide/hero.html) page and is used as a 'Photographic header'. ```html_example

H1 upper - This is an h1 with 'upper' class.

H1 - This is a regular h1 header.

``` #### h2 or .large-heading `

` elements are predominantly used as Subheaders (e.g. 'Journals, Book, Primary Sources' on [whats-in-jstor](http://about.jstor.org/whats-in-jstor/)). They are also used as module labels on the About site (e.g. the News Module ('NEWS' on [about.jstor.org](http://about.jstor.org/))). ```html_example

H2 upper - This is an h2 tag with 'upper' class.

H2 - This is a regular h2 header.

``` #### h3 or .medium-heading `

` elements are used as intro text (e.g. "The first of JSTOR's Thematic Collections..." on [whats-in-jstor/sustainability](http://about.jstor.org/whats-in-jstor/sustainability/)). They are also used as news and events module headlines on [about.jstor.org/news](http://about.jstor.org/news/) and [about.jstor.org/events/](http://about.jstor.org/events/). ```html_example

H3 upper - This is an h3 tag with 'upper' class.

H3 - This is a regular h3 header.

``` #### h4 | .small-heading `

` elements are used within `

` headers in the bodies of text containing hierarchical information. Beyond this, there are no other special uses. `

` should not generally be capitalized (do not use `.upper`). ```html_example

H4 - A common space to discover resources

``` ### Using the Heading Utilities You can also use the `.*-heading` classes to mimic the styling for the `` tags or in a `` or `
`. This affords you better control over spacing, while maintaining the same font size and weight. It also allows you to display headings (or other text) at a size different from the default for that heading type: ```html_example

I'm a plain jane 'h2'

I'm a joe schmoe 'h4'

I look like an 'h4' because i have a .small, but i'm secretly an 'h2'

I'm a 'div' with '.xlarge-heading'
I'm a 'div' with '.large-heading'
I'm a 'div' with '.medium-heading'
I'm a 'div' with '.small-heading'
``` On the platform, pages with titles we supply (ex. Search Results, Advanced Search, Browse by Title, etc) have a regular h1 heading. On pages where someone else supplies the heading text (ex. a publisher's page, a journal page, a book table of contents), use `.large-heading`. On pages where someone else supplies the heading text and the heading text is part of a metadata content block (ex. article, chapter, research report, etc), use `.medium-heading`. ## Accessibility 1. Heading tags on any given page should maintain a semantic structure visible and interpretable by primarily-visual users and by screen readers as well. 2. Headings should descend in order--there should not be a `h3` tag before a `h2` tag on a page. 3. Please refer to w3.org's notes on [using h1-h6 to identify headings](https://www.w3.org/TR/WCAG20-TECHS/H42.html) 4. Note that the use of the heading classes is invisible to screenreader's intepretations of the DOM, and the screenreader will interpret all `

`s and `

`s as just that. 5. You can (and should) leverage the heading classes to support optimal visual readability while maintaining a semantic structure with the heading hierarchy.
## Body Text There are four main "sizes" of text outside of `title` and `h` tags in two categories: - "Regular" text - paragraph - list item - 'free' text - `` text ### Regular Text The size of regular 'body' text is heavily influenced by which html element it's in (`

`, `

  • `, `free`). ```html_example
    • I'm a list item

    • I'm a 'p' inside of a 'li', but i still just get the 'li' styling

    I'm the kind of text you always see hanging out in a 'p' tag.

    Lonely text - I'M Lonely text - OH SO LONELY - I'm 'free' text that doesn't have the spacing and line-height and margins that 'p' text gets! ```
    ### Small Text You can specify extra small text by surrounding it in a `` tag. ```html_example I'm some really small text inside a 'small' tag! ```
    ### Text Transforms ```html_example
    I'm all uppercase!
    I'm all lowercase!
    I have each word capitalized!
    ```