Digital elements

Our individually-managed approach to web and interactive communications at Ohio State inspires creativity and allows each unit to best communicate with their audience. Using common resources when possible, however, saves time and energy and helps unify and strengthen the university brand in online communications.

This section covers digital brand elements. To see usage guidelines for web sites and mobile apps, visit the Web and Mobile section.

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.

Favicon
Favicon

Home screen icon
Home screen icon

Digital element resources

  • Favicon
  • Masthead and footer logos
  • Minimum size logos for web use (32px/50px)
  • Nav bar
  • Web font instructions
Downloads
Extended color palette
Gallery
Help