Typography

Fonts

Crocs.com makes use of the Proxima Nova web font family for ALL text. Arial is a fallback font that will only be used if web fonts are not loaded (a very unlikely scenario).

Proxima Nova Black
Proxima Nova Bold
Proxima Nova Regular
				

Base Font Reset

When an element needs to be styled with the base font of Proxima Nova Regular, but a parent has one of the brand font classes applied, use the cx-reset-font class.

	Parent Headline with heavy brand font applied
	
Child Element Reset to Proxima Nova Regular Font

				

Headings

Headings should use the <h1> through <h6> elements, as necessary, to establish a structural hierarchy for page content, with <h1> being the top level heading and inferred page title. It is generally considered a best practice to include only one <h1> per page.

Note that users of assistive technologies will keyboard navigate the page by heading level, so give careful thought to the hierarchy of your content.

Heading Level 1
Heading Level 2
Heading Level 3
				

Body Copy

The font size of copy is applied with the cx-copy class. The default size is 14px on desktop and 16px on mobile. Sizes are adjusted through the addition of smaller, larger, and largest classes. Copy should never be smaller than 13px on desktop or 14px on mobile.

No margin or padding is applied globally to <p> elements or the cx-copy class. A bottom margin will be applied only when they are combined (<p class="cx-copy">...<p>). The bottom margin will be equal to half of the calculated line height.

Smaller block of body copy...
Standard block of body copy...
Larger block of body copy...
Largest block of body copy...
				

Text Alignment

Add the text-left, text-right, and text-center classes to align text left, right, and center, respectively.

Left-aligned text.
Right-aligned text.
Centered text.
				

Text Formatting

The HTML tags and/or CSS classes illustrated below can be used to format text.

Bold

If the purpose of bold text is to call special attention to a word or words, use the strong tag. Screen readers may speak this text in a different voice or tone for emphasis. If the text is bold purely for presentational purposes, use the bold or text-bold CSS classes.

The strong tag will bold text. 
The bold class will bold text.
The text-bold class will bold text.
				

Italic

The em tag will italicize text. 
				

Strikethrough

While the s and del tags are visually identical, they serve very different purposes. The s tag is meant for text that is currently (or no longer) relevant. A good example is the crossed out retail price when a product is on sale. The del tag is meant for text that has been removed or deleted, which doesn't apply to pricing.

The s tag should be used for strikethrough text.
				

Case

These CSS classes are useful for changing the case of text. text-uppercase will capitalize every letter, while text-capitalize will only capitalize the first letter of every word. Note: text-capitalize will also capitalize articles (e.g. the, of, an), which are usually lowercase when using title case.

capitalize every letter
capitalize the first letter of every word
				

Text Colors

The default color for copy is dark gray, which provides the contrast necessary for ADA compliance when present on a white background. See Colors for classes that can be used to specify alternative text colors.

Lists

Ordered and unordered HTML list elements are unstyled by default on crocs.com (that is, no numbers, bullets, or list formatting). To style lists, add the cx-list class to <ol> and <ul> elements.

Ordered (numbered) lists

For lists where the order matters, use ordered lists (<ol>). Individual list items (<li>) will be numbered in ascending order.

	
First item
	
Second item
		
		

			
Nested item 1
			
Nested item 2
			
Nested item 3
		
	
	
Third item

				

Unordered (bulleted) lists

For lists where the order does not matter, use unordered lists (<ul>). Individual list items (<li>) will be bulleted.

	
First item
	
Second item
		
		

			
Nested item 1
			
Nested item 2
			
Nested item 3
		
	
	
Third item

				

Compact Lists

Where space is at a premium, add the cx-list-compact class to <ul> or <ol> elements already styled with the cx-list class to reduce list indentation. NOTE: This class applies to the current level only. Nested lists must also have the class applied as necessary.

Compact list below will be left-aligned with this paragraph (no indentation).

	
First item
	
Second item
		

			
Nested list with compact indentation
			
Nested item 2
			
Nested item 3
		
	
	
Third item
		

			
Nested list with regular indentation
			
Nested item 2
			
Nested item 3