Posted by rama on March 8, 2021

We are admitted type nerds over at We Are Pixel8. That is why we have gone through great lengths to insure that the typography for the Sans theme delivers maximum readability comfort across all screen resolutions. We have taken into account everything from scalable typography to incremental leading. All font sizes are set in relative em measurements. This will allow for the proportional scaling of font sizes based on the end user’s browser settings.

And we didn’t forget about font pairing. We have hand selected Noticia Text, by JM Solé for the body copy and paired this with Helvetica Neue for headlines, page titles and headers. According to the font specs, Noticia Text is a contemporary humanist slab serif typeface designed to be used for running text on digital newspapers (both on websites and mobile apps). It has a large x-height, ample proportions, big serifs and large apertures that allow the letters to be clear, even at small sizes on low resolution screens. Noticia Text is served using the Google Web Fonts Service through a pluggable function that can be overridden in a child theme.

Top Level Header

Above is an example of a top level header element, or the <h1> tag. All page titles have been set in this tag. Though this tag is available to you in the WordPress editor, consider using the Second Level Header tag, <h2>, for any important page level headings.

Second Level Header

As mentioned above, the Second Level Header is best used for important page level headings as you are allowed to have as many <h2> tags on a page as needed.

Third Level Header

The Third Level Header may be used for any form of page level headings which falls below the <h2> header in a document hierarchy.

Fourth Level Header

The Fourth Level Header may be used for any form of page level headings which falls below the <h3> header in a document hierarchy.

FIFTH LEVEL HEADER

The Fifth Level Header may be used for any form of page level headings which falls below the <h4> header in a document hierarchy.

Sixth Level Header

The Sixth Level Header may be used for any form of page level headings which falls below the <h5> header in a document hierarchy.

Commonly Used Typography Tags

Paragraph

All paragraphs are wrapped with the <p> tag automatically by the WordPress editor. The <p> tag can also be wrapped by the <blockquote> tag if the text is a quote for an external source.

Block Quotes

Block quotes are section of content quoted from an external source and are <p> tags wrapped by the <blockquote> tag. For example, we are quoting Ray Eames, from Quotes on Design, below.

“What works good is better than what looks good, because what works good lasts.”

Inline Quotes

The <q> tag is used for short quotations inline within a paragraph. Here is an example of nested quotations. For example:

He said, Buzz Lightyear is known for saying, To infinity and beyond!.

Ordered Lists

Ordered lists, or <ol> are used to list items in an hierarchical fashion. Each list item, or <li>, is preceded by a numerical representation of its place in the hierarchy. An ordered list can also contain another ordered list as well as an unordered list, or <ul>.

1. This is the first item in an ordered list.
2. This is the second item in an ordered list with a sub-ordered list.
   1. This is an ordered list item.
   2. This is an ordered list item
   3. This is an ordered list item
3. This is the third item in an ordered list.
4. This is the fourth item in an ordered list with a sub-unordered list.
   • This is an unordered list item
   • This is an unordered list item
   • This is an unordered list item

Unordered Lists

Unordered lists, or <ul> are used to list items without any hierarchical value to them. Each list item is preceded by a bullet. An unordered list can also contain an ordered list as well as another unordered list, or <ul>.

• This is the first item in an unordered list.
• This is the second item in an unordered list with a sub-ordered list.
  1. This is an ordered list item.
  2. This is an ordered list item
  3. This is an ordered list item
• This is the third item in an unordered list.
• This is the fourth item in an unordered list with a sub-unordered list.
  • This is an unordered list item
  • This is an unordered list item
  • This is an unordered list item

Definition Lists

Definition lists, or <dl>, are not natively supported by the WordPress editor but are generally used to denote a list of items that share a relationship with one another. A <dl> should contain at least one <dt> and one <dd>. In a classic sense, you can use the <dl> to show a the definition, which would be the <dd>, for blog, which would be the <dt>.BlogA blog is a personal journal published on the World Wide Web consisting of discrete entries typically displayed in reverse chronological order so the most recent post appears first. Blogs are usually the work of a single individual, occasionally of a small group, and often are themed on a single subject.

Links

Links are commonly used to link one page to another, either internally or externally and are wrapped by the <a> tag.

Emphasized Text

Emphasized text is usually relegated to text you would pronounce differently in a conversation or text you are putting a stressed emphasis on and is wrapped inside of the <em> tag. For example:

Purchasing this theme will make you a better person.

Strong Text

Strong text is usually relegated to text you are placing strong emphasis on and is wrapped inside of the <strong> tag. For example:

Purchase this theme now on ThemeForest.

Marked or highlighted text

The <mark> tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. The <mark> tag was introduced in HTML 5 and is not natively supported by the WordPress editor. Internet Explorer 8 and older do not support this tag. For example:

Despite the stockmarket crash in 2008, the value of my share portfolio increased by 100 percent. I must be doing something right.

Small Print

The <small> element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. For example:

Copyright © 2012 We Are Pixel8. All Rights Reserved.

Delete & Insert

Markup of deleted text can be useful in determining differences between multiple versions of the same document. Browsers will normally strike a line through deleted text and underline inserted text. For example:

We Are Pixel8 is located in West Hollywood, CA San Antonio, TX.

Citation

The <cite> element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. For example:

I highly recommend reading The Invisible Man by Ralph Ellison. It changed my life when I was 15 years old.

Abbreviations & Acronyms

The <abbr> element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation. The <acronym> tag has been dropped from the HTML 5 specs because of the confusion between these two tags. You should exclusively use <abbr> but both are styled for this theme.

For example:

The abbreviation for the National Football League is NFL and the acronym for as soon as possible is ASAP

Code & Code Blocks

The <code> tag is useful for websites who intend to share computer code snippets. When wrapped by the <pre> tag, a larger block of code can be displayed.

@media only screen and ( min-width: 43.75em ) and ( max-width: 48.938em ) {
	.sans-articles-container {
		width: 69.1563%;
	}
	.sans-post-aside {
		width: 26.6943%;
	}
}

Tabular Data

The <table> tag, though not natively supported by the WordPress editor, is best used for presenting tabular data. The <table> tag should always contain the <thead>, <tfoot> and <tbody> tags and should be marked up in that order. The <table> tag can also contain the <caption> tag for accessibility.

Credits & Thanks

This styleguide was inspired by Paul Robert Lloyd and wouldn’t be possible without resources like W3C Wiki and HTML5 Doctor.

Purchase Sans Now →