Typography

The University website requires clear and consistent headings and highly legible paragraphs. We've employed a font system that uses two open-source font families: Oswald and Merriweather, both of which are designed for legibility and can beautifully adapt to a variety of contexts. The chosen web fonts complement their print counterparts. Better suited for the screen, these web fonts reflect the same typographic hierarchy that is a foundation to the University's brand.

Oswald

Oswald is a reworking of the classic style historically represented by the "Alternate Gothic" sans serif typefaces. The characters of Oswald have been re-drawn and reformed to better fit the pixel grid of standard digital screens. Oswald is designed to be used freely across the Internet by web browsers on desktop computers, laptops and mobile devices. Use Oswald for larger headlines and pull quotes. Oswald replaces Garage Gothic as our primary san serif typeface on the web.

Merriweather

Merriweather was designed to be a text face that is pleasant to read on screens. We use Merriweather for intro text, body paragraphs, smaller headlines and links. Merriweather is designed to be used freely across the Internet by web browsers on desktop computers, laptops and mobile devices. Merriweather replaces Garamond as our primary serif typeface on the web.

Common Headers and Font Styles

Heading 1       Oswald Regular 40px

Heading 2       Oswald Regular 32px

Heading 3       Oswald Light 30px

Heading 4       Merriweather Regular 22px

Heading 5       Merriweather Bold 18px
Heading 6       Oswald Light 18px

This is an introductory paragraph set in Merriweather Regular (20px/34px) that uses a typographic style that allows a writer to make a bold statement or highlight a primary idea or theme. This paragraph is set in larger type size to distinguish it from running body copy.

This is a paragraph set in Merriweather Regular (16px/24px) and uses a typographic style useful for running copy. This text is set in a smaller type size to distinguish it from the intro text and allow for longer stories and ease of reading.

Quote

This is a pull quote that would allow for the featuring of an excerpt from the page.

Author Name


A pull quote is a visual element that emphasizes a key excerpt, attracts the reader, and breaks up long blocks of text.

Pull quotes should be rich content that provides an additive interest to the page. If the text is being duplicated from the main content, make sure to place the pull quote further away from the original source.

We have designed the pull quote to reflect the University's brand by incorporating a strong sans serif font (Oswald) and the Accessible UHCL Green.

Two Column Typography

By utilizing two columns on a page, more content can be available to the user without having to scroll. This format works best for lists, fields, and related buttons/links.

Lorem ipsum dolor sit amet, modo affert tempor at mea, vis alia ignota an. Nullam habemus appellantur vim no. Vel ea epicurei forensibus, vis ad rebum populo diceret. Nec omnes ponderum no, ex eum tale munere verterem, nec discere periculis democritum ne. Id aperiri pertinacia mei, facilisi incorrupte mei ea. Eum iusto luptatum senserit at. Duis malis in mel, ea esse consequat duo.

Ne mel labore delicata erroribus, an his commune verterem, salutandi accommodare qui ut. Pro mediocrem similique cu, mei veniam contentiones ut, an feugiat civibus vim. Accusam scaevola usu at, his odio equidem patrioque in. In consul officiis vis, cum vidit periculis no. At eam simul percipit.

Ne sea quem deserunt hendrerit, an vix legere legimus, ne doming eirmod tacimates ius. Petentium tincidunt sea te, wisi viris abhorreant pri te, eum id putant instructior. Nam ei etiam delicatissimi, ei abhorreant persequeris sea. Pro in congue ocurreret principes, nusquam vituperata intellegam no mei. Nec errem reprimique efficiendi no. Ut esse consectetuer usu, reque dolore iisque mel no.

Prompta dolores no has, te oporteat lucilius mel, iisque adipiscing nec an. Duo doming accusamus laboramus in, quo te case vocent abhorreant, cu iudico fastidii usu. Te saperet minimum vulputate mel. An per vide eripuit consetetur. At sea everti latine virtute, ne vis nullam primis partiendo, te vel ornatus dolorem. Qui exerci omittam ei, munere mucius admodum no vim.

List Styles

  • Column data
  • Column data
  • Column data
  • Column data
  1. Column data
  2. Column data
  3. Column data
  4. Column data