Digital Element Standards

Web and mobile applications are some of the most widely-used and most-visible communication vehicles in the university. It is important to properly utilize the university identity on all online pieces, from complex websites to mobile apps. 

The following are mandatory applications for all university websites.

Minimum size logos

For digital applications, small-size logos need special consideration. Downscaling larger graphics (bitmap or vector) to small sizes can lead to blurriness, as the artwork doesn't always fall nicely on the pixel grid.

We have created a set of minimum size logos that can be used when a small-size is necessary. Using these files ensures the logo stays crisp and clean.

A reminder: The minimum size for the logo is based on the Block O being 32 pixels high. The recommended size for the logo is based on the Block O being 50 pixels high.

Web fonts

The university fonts, Proxima Nova and Capita, are available as web fonts to provide consistent type styles across print and digital communications. Web fonts are "safe" to use on web sites without fear of defaulting to a less-savory alternative. To economize server space and for convenience, web fonts are hosted centrally, and they are available for use on any site with an osu.edu subdomain.

For examples and instructions on usage, view the web fonts PDF included in the digital elements resources below. (requires login).

The default font for electronic communications is Arial.

Social icons

Having several social media accounts is a great way to connect with your audience, but it can lead to a disorganized rainbow of buttons, colors, and styles on your communication materials. We recommend using the comprehensive set of icons found at simpleicons.org to standardize the look of your social media links.

These icons are simple black or white art on a transparent background, allowing you to choose how they are displayed using CSS or a program like InDesign. Icons should be displayed as square or with uniformly rounded corners and styled as a single flat color from our signature or primary palette in their normal state (gray is recommended). A icon can change to the network's signature color (e.g., Facebook blue, Twitter aqua, YouTube red) or another university color (recommended: scarlet) on mouse-over. Color mixes for each network can be found on simpleicons.org.

Need more?

For high-quality flat icons not covered by simpleicons, look to iconmonstr.com.

Usage example

This code is an example of how the icon links above were created.

HTML:
<a href="http://facebook.com" class="social_icon"><img src="icons/facebook.png" alt="Facebook" /></a>

CSS:
a.social_icon img {background:#666; border-radius:6px; margin-right:4px;} a:hover.social_icon img {background:#b00;}

Favicon

The smallest digital application is the favicon. This is the small icon that appears in web browsers near the page name. Measuring a mere 16x16 pixels, it is tiny, but can play a big part in unifying university sites. 

When a user saves a page to their mobile device, we have included a mobile-friendly home screen icon too. Feel free to use the social media avatar or mobile app icon templates to create a home screen icon which represents your unit. 

The favicon, mobile icon and HTML code are included with the nav bar resources.

Web and mobile application guidelines

The following are recommended applications for all university websites.

Mobile app icons

Apps created for Ohio State constituents should use an icon and launch screen based on the templates provided.

The app icon template provides a unique presence for your app on a mobile device's home screen while retaining its university connection. Any university-related group may use this app icon template. Please note that variations of the Block O are reserved for the flagship Ohio State app.

Mobile app launch screens

As with the app icon template, the recommended launch screen template creates a unique but university-related first impression as your app loads. A vertical orientation is recommended.

Note: Device screen resolutions and proportions can vary across platforms. The templates provided are a common resolution. Please adjust the template ratio and resolution to best fit your app's targeted platforms and devices.

App publishing

Apps intended for Ohio State constituents should be published via the official university stores (currently available for Android via "Google Play" and Apple iOS via the "iTunes App Store").

The Mobile Governance team manages the publishing of apps to the official Ohio State stores and maintains a resource guide (coming soon) for the development of university apps. If you are developing a university app, please contact Mobile Goverance (mobilegovernance@osu.edu) as early as possible in the development process.

Masthead

Just below the Ohio State nav bar, mastheads are required to include a university logo, with the horizontal version used for left-alignment and the vertical or stacked version used for right-alignment. Below are example of layouts that have been found to work well, but this is not an all-inclusive or restrictive list. Creativity is encouraged, keeping in mind size and clear space requirements for the logo.

Stacked logo, right-aligned. Site/unit name aligns with text in logo. College name aligns with bottom of Block O.

Horizontal logo, left-aligned. Site/unit name aligns with the Block O. 

Digital element resources

  • Favicon
  • Masthead and footer logos
  • Minimum size logos for web use (32px/50px)
  • Nav bar
  • Web font instructions

Web and mobile resources

  • Masthead and footer template
  • Mobile app icon template
  • Mobile app launch screen template
Downloads
Extended color palette
Gallery
Help