Page content

Interactive

Interactive

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.

We will be adding more items to the Interactive section. Stay tuned.

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.

Nav bar


Full-width
Standard navbar

Responsive
Standard mobile navbar

Light gray background with dark links is the standard (recommended) presentation of the nav bar.


Full-width
Dark background navbar

Responsive
Dark background mobile navbar

If needed, the nav bar can also be styled following the guidelines below. This variation is included.

The nav bar is the single common element across all university sites. It provides quick links back to the university home page and several other central resources. The current version of the nav bar incorporates responsive layout and high-resolution graphics for mobile screens. Recommended width is 100%, with a centered container to restrain the content.

Modifying the nav bar is not recommended unless there is a significant business need. The appearance of the nav bar may be changed to blend with the appearance of university sites, with the following guidelines:

  • The nav bar retains the same overall height (42px) and typeface.
  • The scarlet bottom border remains the same height (5px) and color (#bb0000).
  • The background can be changed to a flat color: black, white, or gray.
  • The text remains one color, either dark gray (#333 or darker) or white, and retain a AAA contrast rating in compliance with accessibility standards.
Contact the brand team with questions about the nav bar.
Download the nav bar

Emergency Alert messages

University emergency alert messages ("Buckeye Alerts") are available for use on all university websites, with the BuckeyeAlert javascript library. It is recommended sites using the nav bar also implement this library so that emergency alert messages may be disseminated as widely as possible.

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 (ohio-state.edu subdomains are not included).

To see examples and get instructions on usage, download the web fonts PDF (requires login).

The default font for electronic communications is Arial.

Fonts are licensed products and cannot be shared. Usage of the web fonts is included with purchase of a font package, available from UniPrint (uniprint.osu.edu or 614-292-2000) for a specially negotiated price of $105.
Use web fonts

Web masthead

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.
Masthead example 1 Masthead placement example 1

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

Other examples:
Masthead example Masthead example

Web Footer

Standard information presentation at the foot of a web page helps users recognize the affiliation of the site within a larger organization. We recommend using the following format, which should appear at the bottom of university-related sites. Additional information such as lists of links and banners can be added above the university footer. Background images are acceptable but should not interfere with the content.

Footer example

Using the wordmark in the footer reinforces the brand but avoids drawing your eye away from the content, to the bottom of the page.
Download wordmark files

Footer example

Social media avatars

Special usage of the Block O is permitted for social media avatars, which present extreme size restrictions. To avoid our friends' and followers' social media streams becoming an endless line of scarlet Block Os, however, a series of avatar templates is available to give your online presence a unique look while retaining a university connection. These avatars can be used by any group related to Ohio State.

The templates include masks to create the circular and rounded borders, but as each service formats images differently, it may be best to use them as placement guides. Disable the mask to save the avatars as square images, and let the service crop the image as needed.

The scarlet Block O avatar is reserved for the university’s main social accounts. For others, there are several options:

  • A black or white Block O. Keep in mind when using this option that your account name or profile page should include the Ohio State name prominently to avoid confusion with other organizations that may use an "O" as an identifier.
  • The Ohio State bug, which is a tiny graphic that lies atop the avatar image. This allows the use of a photo or graphic that characterizes the personality and purpose of the entity behind the account. If the account represents a person, it is widely considered best practice to use his or her photo for the avatar. If it does not represent a person, the account name or profile page should include the Ohio State name prominently.

Standard templates

Black or white Block O
White Block O avatar

Block O bug
Tag avatar

Scarlet band with bug
Ribbon avatar

Block O with label
Scarlet with label avatar

Google+ circular templates

Black or white Block O
White Block O avatar

Block O bug
Tag avatar

Scarlet band with bug
Ribbon avatar

Block O with label
Scarlet with label avatar

The scarlet Block O is reserved for the main university online and mobile presences. It should not be used to represent any other group or unit as an avatar or mobile icon.
Download avatar templates

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.

The simpleicons set includes logos for 135 networks and sizes from 16px to 4096px, large enough for print use.

Download from simpleicons.org

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.

Email signature

Email is our most common form of day-to-day communication and therefore one of the most visible ways we communicate with our audiences and each other. Clear, consistent email identification strengthens the Ohio State brand.

An email signature generator is available. The generator produces both a logo and non-logo signature version. The information in the signature can be as simple or extensive as you choose. Customize your signature to meet your particular communication needs and the needs of your primary audiences.

It is not necessary to use the full email signature on every email you send. It should be included when representing yourself as part of the university, but isn't necessary when emailing your coworker in day-to-day messages.

HTML email templates

Branded email communication can make your message sing. And we’ve made it easy for you to get started with two simple templates that are mobile-friendly and will work with any email distribution system. Everything is ready to go — the logos, the fonts, etc.: Just add your message. You can customize the templates with the sender’s information, secondary signatures, unit identifiers or unit-specific imagery.

Remember, a simple design keeps the focus on your message. Not sure if your design is quite right? Let identity@osu.edu take a look.

HTML email templates

Questions about how to send an HTML email with your system? Contact your unit's IT department or 8help (8help.osu.edu).

Download email templates

Mobile applications

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

App icon template

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

Plan for Health app

Buckeye Stroll app

Expand Your World app

OSU Mobile*
*Variations of the Block O are reserved solely for OSU Mobile.

App launch screen template

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

A basic launch screen

Expand Your World

Buckeye Stroll

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.