Fonts and typography
Typography and our selected font families are fundamental elements of our brand and help weave our stories together. Our goal is to create a seamless experience for our audiences by aligning all communication in a unified visual voice.
Do not use any additional fonts; they interfere with the clear articulation of the ASU brand.
We are bold and bright, in headlines, quotes and other text elements. ASU says and does bold, clear things in the world and our fonts behave in the same way.
Using fonts and typography to communicate the ASU brand
Neue Haas Grotesk: Primary print font
Neue Haas Grotesk through Adobe Fonts replaces Akzidenz Grotesk for print, video and all Adobe software uses starting this year. It may be used in all media, including items for sale. All ASU staff and students who have the Adobe Creative Cloud may use the font in software that is connected to Adobe Fonts for all creative and communications applications, delivering on our goal of inclusion and collaboration within and across units.
Where to use Neue Haas Grotesk:
- Adobe InDesign – single and multi-page documents
- Adobe Illustrator – graphics and multiple artboard documents
- Adobe Photoshop – type on top of photos or other creative
- Adobe Premiere – video
- Adobe After Effects – animation and video
- Adobe Express – social media and other uses (note: Express is Adobe’s Canva-like software)
- Any other Adobe software that loads from the Adobe Fonts library
Neue Haas Grotesk has the same essential look and feel and will not look different from our previous materials to our audiences. It has the same boldness and strength as the previous font and is now available to all Adobe users through Adobe Fonts.
- All new team members may start using Neue Haas Grotesk immediately. Akzidenz Grotesk Std licenses will be phased out by July 1, 2023, and will be removed from computers by ET and local technology staff. Certain brand elements, including the official logo, endorsed unit logos and permanent signage will continue to be built with Akzidenz Grotesk. All other materials will be made with Neue Haas Grotesk.
Review setup steps for the new font.
Samples from Neue Haas Grotesk
Note: Italics should not be used in any circumstance. See Formatting, Titles for details.
Display and Text sets of the font
Our previous font solutions only had one option, and did not include display type.
When to use the display or text versions of Neue Haas Grotesk:
Display | Text |
---|---|
Neue Haas has a Display set intended for headlines and other large uses. It automatically has tighter word spacing built in and is easy to use. It’s not so great for text uses as the word spacing is very tight and can be hard to read. |
Neue Haas also has a Text set that automatically has wider word spacing and is great for body text. It works just fine for headlines too if you are in a hurry! Neue Haas Grotesk Text is intended more for small type, as in this body copy. |
If switching between the two sets is too complicated in your work, Neue Haas Grotesk Text is the best solution to meet all needs.
Arial: Primary digital, web and system font
If you don’t use Adobe Creative Cloud in your day to day work, or if you’re working in an application that does not offer Neue Haas Grotesk as an option, use Arial. This font does not require additional licenses and is considered a system font that is loaded on a variety of systems. By using this font, you can be assured that it will render accurately with exchanging documents with colleagues, students and other stakeholders.
Where to use Arial:
- asu.edu: The chosen webfont for ASU websites is Arial
- When developing websites, use Arial, Helvetica, “Nimbus Sans L”, “Liberation Sans”, FreeSans, sans-serif as your font stack
- Microsoft Office
- Google Docs
- Email (Outlook, Gmail and Sales Force Marketing Cloud)
- When using any software that doesn’t offer Neue Haas Grotesk as an option
Tip: Many routine materials can be developed quickly and collaboratively using Arial and Google Docs templates available to all users at ASU.
- Visit drive.google.com with your ASURITE login and choose “+New, Google Slides, from Template." There are templates for presentations and one-page common documents.
Icon font
Font Awesome
Icons are symbols that help users see different groupings of items or help navigate different types of information. ASU uses Font Awesome Free as its primary icon set – any style (solid, regular, light) can be used. Both Font Awesome Free and Font Awesome Pro may be used; however, units will need to purchase individual licenses for Font Awesome Pro. Font Awesome Free is the standard for asu.edu and is built into both Webspark 2, the UDS UI kit and the ASU presentation template.
Sample icons from Font Awesome Free:
Search Font Awesome Free Icons How to Add Font Awesome Icons
ASU Awesome
ASU Awesome builds on Font Awesome solid. ASU Awesome is available to everyone at ASU and will be updated periodically to add new creative elements to brand expression.
Sun Devil Bold: Sun Devil Athletics
Sun Devil Bold is for use only in Sun Devil Athletics materials. Please see Athletics brand guidelines here.
Headlines
How to work with headlines. (See Guidelines for writing headlines.)
Font sizes
Although there are no specific requirements for the sizing of fonts used in headlines or mastheads, use judgment when considering what size font to use. Remember, being big and bold represents the attributes of the brand.
In Neue Haas Grotesk, there is an option to use the “Display” set of the font. For example, “Neue Haas Grotesk Display Pro 75 Bold” is a great option for headlines, which can include any use of the font over 24pt in size.
Capitalization
All expressions of headlines should be in title or sentence case.
Using all caps is not part of ASU's core brand execution. In particular, all caps should not be used in full sentences, titles or headlines.
In very limited cases, they may be used to differentiate between smaller headline treatments in documents with complex structures. They should indicate meaning or clarify direction, not act as a style move.
Alignment
Left-aligned body type in headlines and paragraphs is the easiest for readers, but is not mandated. Copy alignment that is significantly different from left aligned (centered, justified, right aligned) can distract the reader from the content of a project. Left alignment is suggested based on readability studies in user-centered design. Alignment is a variable that will be determined by your project requirements.
Font color in headlines
In most instances, black on white background or white on dark colors or photos should be used as the primary color choices for headlines. ASU Gold and ASU Maroon are the only other colors that should be used in headlines. These colors are considered part of the primary color palette and their usage should be strictly adhered to.
What not to do with headline formatting
The following items are examples of things we do NOT do with our brand fonts.
ASU is first and foremost an educational institution. We are expected to use proper grammar, punctuation, letter case sizing and other standard rules of the English language.
Font weight in body copy
Neue Haas Grotesk Text Roman or Light are the preferred font weight choices for body copy. (See Formatting.)
Italics in body copy
Italics should not be used for text. See Formatting, Titles for details.
Font size for body copy
- Font sizing from 7.5–12 pts is acceptable.
- 8pt type on 12pt leading is a great place to start for easily readable body copy.
- Consider your intended audience when determining the appropriate size to use. Consideration of your audience will aid the effectiveness of your project.
- Larger font size (12–14 pts) is more appropriate for older audiences and those with vision impairments.
- Smaller font size (8–10 pts) is more appropriate for younger audiences.
Typesetting tips
Typesetting can improve the legibility of text. Optimum legibility should be a priority.
Tracking and kerning
- Tracking refers to the total spacing of a block of copy.
- Overall, tight tracking for headlines is recommended as part of our brand and is intended to be tight to help convey strength.
- Kerning refers to the space between individual letterforms.
- Beyond tracking, attention to spacing between letterforms needs to be taken into consideration. The rule of thumb for the spacing of letterforms should be tight but not touching.
The optical settings now available in all Adobe Creative Cloud software are recommended for use in headlines.
Drop shadows
Drop shadows are NOT preferred as part of the brand expression. However, in some instances where legibility is an issue, a very subtle shadow or outer glow effect can be used, depending on the background. Examples of this can be a photograph containing uneven color values or textures.
Leading
Leading is the space between lines of text and is measured from baseline to baseline of each sentence. This is a variable that will largely depend on your project requirements.
- Leading should be between 2–3pt above the font size as a general rule.
- Example: 10pt Neue Haas Grotesk Roman type is most readable with 12, 13, or 15pts leading.
- Things to consider:
- The looser the leading, the harder the copy can be to read. The same holds true for tight leading.
- Tighter leading has the unintended consequence of adding tension to a large body of copy.
- Is the body copy intended to be more decorative? Loose leading is less of a consideration.
For reference to readable leading examples, refer to the usage examples in the Lookbooks page or contact the Brand Strategy and Management design team.
Column width
In Western language typesetting, the guiding principle for maximum readability is a line of type that is less than two alphabets long.
- For print: Keep column widths in print publications to fewer than 52 characters makes for easy reading for our audiences.
- Narrower columns are recommended to help audiences read text quickly and begin acting on the messaging. When setting wide columns, a few points of additional leading makes the long line easy to read.
- For asu.edu: The standard for max line length is determined by the width of the element containing the text. 700px wide is the max width for any components containing text, such as:
- <p>
- <li>
- <td>
- <h1> to <h6> (all heading tags)
- <blockquote>
- <div> (when used to contain a block of text)