Styles

OVPR's website works in conjunction with overall OVPR brand and style definitions. The OVPR Branding and Style Guide illustrates different branding and themes among OVPR sites. Some elements, such as fonts and features, are specific to the website.

Fonts

The top two navigation bars (maroon and blue) use Neutraface. Neutraface is used throughout University of Minnesota websites and periodically applied to OVPR communications media.

Open Sans is the primary text for OVPR's website page, body, and other elements. 

A B ‌C ‌Ć ‌Č ‌D ‌Đ ‌E ‌F ‌G ‌H ‌I ‌J ‌K ‌L ‌M ‌N ‌O ‌P ‌Q ‌R ‌S ‌Š ‌T ‌U ‌V ‌W ‌X ‌Y ‌Z ‌Ž ‌a ‌b ‌c ‌č ‌ć ‌d ‌đ ‌e ‌f ‌g ‌h ‌i ‌j ‌k ‌l ‌m ‌n ‌o ‌p ‌q ‌r ‌s ‌š ‌t ‌u ‌v ‌w ‌x ‌y ‌z ‌ž ‌ ‌Α ‌Β ‌Γ ‌Δ ‌Ε ‌Ζ ‌Η ‌Θ ‌Ι ‌Κ ‌Λ ‌Μ ‌Ν ‌Ξ ‌Ο ‌Π ‌Ρ ‌Σ ‌Τ ‌Υ ‌Φ ‌Χ ‌Ψ ‌Ω ‌α ‌β ‌γ ‌δ ‌ε ‌ζ ‌η ‌θ ‌ι ‌κ ‌λ ‌μ ‌ν ‌ξ ‌ο ‌π ‌ρ ‌σ ‌τ ‌υ ‌φ ‌χ ‌ψ ‌ω ‌ά ‌Ά ‌έ ‌Έ ‌έ ‌Ή ‌ί ‌ϊ ‌ΐ ‌Ί ‌ό ‌Ό ‌ύ ‌ΰ ‌ϋ ‌Ύ ‌Ϋ ‌Ώ ‌Ă ‌Â ‌Ê ‌Ô ‌Ơ ‌Ư ‌ă ‌â ‌ê ‌ô ‌ơ ‌ư ‌1 ‌2 ‌3 ‌4 ‌5 ‌6 ‌7 ‌8 ‌9 ‌0 ‌‘ ‌? ‌’ ‌“ ‌! ‌” ‌( ‌% ‌) ‌[ ‌# ‌] ‌{ ‌@ ‌} ‌/ ‌& ‌\ ‌< ‌- ‌+ ‌÷ ‌× ‌= ‌> ‌® ‌© ‌$ ‌€ ‌£ ‌¥ ‌¢ ‌: ‌; ‌, ‌. ‌*

Web paragraphs (P) styling, or the page body's text, is formatted in the following way: Open Sans; 16px; #333; weight: 400; line-height: 24.4706px

Bold and Italics can be added to page text.

Features

Readers tend to scan information on a web page, so breaking up large blocks of text into smaller chunks and adding unique styling is recommended when content is very dense. The following features can be used to further stylize, highlight, or break up content:

Headings

Headings orient users to the page and quickly inform them about the page’s organization. They allow users to easily scan and find information they are looking for. Well written and efficiently organized headings can drastically improve your SEO. 

H1: 36px; #666; weight: 700; line-height: 43.2px

H2: 28px; #666; weight: 700; line-height: 31.2942px

H3: 22px; #666; weight: 700; line-height: 29.2856px

H4: 20px; #666; weight: 700; line-height: 25px

H5: 18px; #767676; capital case; weight: 400; line-height: 24.4706px 

H6: 16px; #767676; weight: 500; line-height: 23.111px

Left-side Components

To elevate highly sought after information without sacrificing a logical organization on the page body, you may choose to utilize a component that appear on the left side of the page, just below the navigation

• Useful Link Lists
• Document Lists
• Calls to Action snippets
• Common Questions snippets
• Tips snippet
• Contact Information

These appear on the left side of the page (as you see on this page) and can be re-used throughout the site. For example, the contact information for the communications team can be set to appear on multiple pages.

Callout Boxes

Callout boxes are used to prioritize content for scanning. Callouts might be applied to CTAs (calls to action) or chunks of text that are an "aside" of information. An example of this being used on the website is in this 2018 Patent Roll Call post, asking the reader to contact Technology Commercialization.

This feature spans the width of the page body unless the two/three column layout is used to manipulate the placement of the callout box next to text. Heading 2 and Heading 3 are used as a title in the box. Callout boxes should not be used if they align too closely (in content and placement) with a left sidebar component (link lists, calls to action, contact info).

To use a callout box, highlight the content you wish to enclose in the box, then select "Call Out Grey" or "Call Out Blue" from the styles menu. To remove the callout box, you would remove the styling for both "Call Out Grey/Blue" AND "Call Out." It will take two steps to remove the styles.

Callout Text

Callout Text is highly stylized text content that can be used to highlight a slogan or byline. It should be used sparsely on the website, only highlighting content that is not better conveyed with a heading or as plain text. Callout text should be used one time on a page.

Why applying the "Callout Text" styling, authors will need to specify their desired alignment, and whether or not the text is bold or in italics.

Page Divider

Page Dividers, or HR tags, add a line in the text body of the page. The HR tag is a visual break as well as a signal to browsers, screen readers, and other digital tools (SEO) to define a paragraph-level thematic break, which is a break in the flow of the content that doesn't warrant a new page or other stronger delimiter — it's a slight change of topic. For example, you might find an HR tag after a scene change in a story, or it can indicate a change of topic in a reference document.

Columns

Content areas have varying widths that can be used to convey information in different ways. For example, half-column and triple-column content areas are commonly used to compare different types of information. 

Full width content area:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Half-Column Layout:

Triple-Column Layout:

Blockquote

A blockquote is a quotation in a written document that is distinct from the main text as a paragraph or block of text. It is normally distinguished visually using indentation and a vertical line on the left-hand side.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Lists

Unordered and ordered lists help simplify dense information and convey steps/items that would otherwise be buried in blocks of text. Use unordered lists when list items don’t need to be arranged in a particular order and use ordered lists when items must follow a sequence.

Unordered Lists

• This is an item in an unordered list
• An unordered list is used when the sequence of items isn't important
• Lists can be nested inside of each other
  • This is a nested item
    • This is another nested item

Ordered List

1. This is an item in an ordered list
2. An ordered list is used when the sequence of items is important
3. Lists can be nested inside of each other
   1. This is a nested item
      1. This is another listed item

Links

Good links are descriptive, unique, and start with keywords, like a headline.

Good link: View a professional range of hairdressing products

Bad link: View hairdressing products

Bad link: View the full list of products: click here

External hyperlinks (hyperlinks that lead to pages outside the umn.edu domain) and internal hyperlinks (hyperlinks that lead to pages inside the umn.edu domain) appear differently on pages. Internal hyperlinks open in the same tab/window, and external hyperlinks open in a new tab/window.

This is an internal hyperlink. It opens in the same tab/window and does not have an icon.

This is an external hyperlink It opens in a new tab/window and has an icon.

Tables

Tables are useful when conveying simple and repetitive information. They are preformatted for accessibility reasons and cannot be stylized (table spacing must remain consistent, headers cannot be bolded, etc.)

Tables can also be formatted to alphabetize and numerically order body cell content when users click on the headers. This feature helps the viewer quickly find the information they are looking for. Use this feature when there are numerous cells within a table. 

Good Table Example

Tables must have logical, concise, and formatted headers. Use tables to simplify data for your viewers. 

Bad Table Example

Avoid using tables to convey complicated information and to layout content on a page. Tables should focus on data rather than narrative content.

In the example below, you can see that the "header" formatting was not properly applied. This makes the table's information accessible to some users.