Skip to Main Content
A-Z Index
UNF Brand Guide

Cohesive Branded Website

oneColumn

UNF is currently transitioning to a new web platform. Our new website will feature uniform branding throughout, but will still allow some design flexibility to accommodate the unique needs and styles of various departments. But remember, there is strength in the brand, and consistency is key!

The headers and footers on UNF’s website will already be in place, and consistent style elements such as fonts and colors ensure that every webpage is identifiable as UNF.

While you may choose from different layout options, most of the brand elements will already be part of our website, so it makes it easy for you to effectively tell your story while staying within the brand. 

mobile iphone displaying the university or north florida website homepage unf.edu

Colors

Primary and Secondary Colors


Fonts

The website uses Google Fonts Open Sans for text and Playfair for accents.

Example heading level 1 text of Heading Using Open Sans

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.

 

Quotes

This is a quote using Playfair.

Headers and Footers

Header

UNF header

Footer

UNF footer

Best Practices

  • Writing Tips
    • Think of your audience.
    • Keep content relevant and up-to-date.
    • Avoid unnecessary and superfluous information. Most visitors skim pages, not read.
    • Layout and formatting is most effective when it is clean, clear, and consistent.
    • Spell check.
      • Refer to the UNF Writing Style Guidelines for full listing.
      • When using acronyms, always spell out the full title with the acronym the first time it is referenced in the text.
      • Phone and fax numbers should be formatted as (904) 620-1000. Always use the full number with area code -- never just the extension.
      • For named UNF buildings, use both the building name and the building number.UNF Writing Styles
    • Avoid the use of ALL CAPS for large sections of text.
    • Avoid the use of underline.
      • The use of underline implies a hyperlink and should not be used to emphasize text or headlines that are not linked.
    • Give page headlines (H1) a strong, descriptive name. For example, any site could have "Forms" or "About Us". Use instead "Human Resources Forms" or "About Physical Facilities".
    • Content Ownership
      • If you do not own the content, do not duplicate it. Link to the original content or website that would always stay up-to-date.
      • If you link to webpages outside of your site, be alert that your link stays active.
  • Formatting URLs
    • Names assist with search engine optimization.
    • Consider words that users would commonly search for.
    • Avoid uncommon abbreviations or acronyms.
    • Use strong, descriptive keywords when naming folders, content, and uploaded files.
  • Hyperlinks
    • Do not use the navigation term "Home" unless it links to the UNF homepage, www.unf.edu.
    • Opening a hyperlink in a new window is generally not recommended. Excessive and inappropriate use can be an annoyance to the viewers. 
    • When publishing a web address in a printed document, use the site homepage. Your homepage offers the simplest, cleanest address for users to type into a browser.
  • Visuals: Logos, Photography and Graphics

    Logos

    • In most circumstances, only one UNF logo (as site identification in the header) is appropriate on a webpage.
    • Follow the UNF Visual Identity guidelines for all additional uses of the UNF logo.
    • Non-UNF logos (for advertising, partnerships, endorsements, sponsorship and acknowledgements) cannot be larger than the UNF logo located at the top of the template. The UNF logo is approximately 85px by 220 px.

    Clip Art & Stock Photography

    • In striving to maintain a professional and unique appearance, clip art and stock photography are typically not recommended. The CMS offers a global image library and photographers for hire for departments seeking to enhance their sites with images. 
    • If your department elects to use stock photography, please comply with all licensing and copyright restrictions for the imagery.

    Optimize graphics for the web:

    • Convert to RGB (CMYK format may prevent the picture from displaying)
    • 72 dpi
    • Properly cropped and resized
  • ADA Compliance
    • Attach the appropriate ADA alt tags to images, hyperlinks and tables in CMS content.
    • Validate your content for ADA compliance prior to publishing.
    • Give image alt tags an appropriate and informative description (alt tag). Consider how it will be read by a screen reader to users that cannot see the image.
    • When presenting information in audio or video format, provide a transcript for users who cannot hear or see the multimedia content.
    • Learn how your webpages measure up! Evaluate your pages using accessibility evaluation tools such as provided at wave.webaim.org.