This design uses Yale New for headings and Open Sans for paragraph text.
<p>This is a paragraph. Paragraphs are preset with a
font size, line height and spacing to match the overall vertical
rhythm. To show what a paragraph looks like this needs a little more
content so, did you know that there are storms occurring on Jupiter
that are larger than the Earth? Pretty cool. Wrap strong around type
to <strong>make it bold!</strong>. You can also use em to
<em>italicize your words</em>.</p>
This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.
If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <em> or <strong> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.
Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an h2 in your code, the next heading used should be either h2 or h3. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
To make links screen reader-friendly, avoid using vague words like "here" or "read more" within link text. The text of the link itself should adequately describe where the link goes.
<p>Links are very standard, and the color is preset to the <a href="#colors">primary color</a>.</p>
Links are very standard, and the color is preset to the primary color.
Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the <section> tag.
<hr>
Use an unordered list to... list things, if the order of the items doesn't matter.
<ul>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Use an <ol> when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.
<ol>
<li>Cheese (essential)</li>
<li>Pepperoni</li>
<li>Bacon
<ol>
<li>Normal bacon</li>
<li>Canadian bacon</li>
</ol>
</li>
<li>Sausage</li>
<li>Onions</li>
<li>Mushrooms</li>
</ol>
A definition list (<dl>) is used to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>).
<dl>
<dt>Time</dt>
<dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
<dt>Space</dt>
<dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
<dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
</dl>
Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.
<blockquote>
Those people who think they know everything are a great annoyance to those of us who do.
<cite>Isaac Asimov</cite>
</blockquote>
Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov
Use the <abbr> tag to annotate a shortened term. Abbreviations must always have a title attribute which clarifies the full term.
<p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.</abbr> Tolkien and George <abbr title="Raymond Richard">R. R.</abbr> Martin hanging out on Sunset <abbr title="Boulevard">Blvd</abbr>.</p>
In my dream last night, I saw J. R. R. Tolkien and George R. R. Martin hanging out on Sunset Blvd.
Format references to code with the <code> tag.
Remember to escape angle brackets when printing HTML: div
Use the <kbd> element to annotate a key stroke or combination.
<p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p>
Press Cmd+Q (or Ctrl+Q on Windows) to play Half-Life 3.
Text is core to the content of your page, so making it accessible to everyone is important. Here are some general guidelines to follow.
It's best practice to avoid line lengths of fewer than 50 characters or greater than 120 characters. Line lengths of 80 characters are ideal.
Avoid del, s, and ins tags, as screen readers do not alert the user at all that text contained within these tags are special. Some but not all screen readers will give special emphasis to text contained within em and strong tags.
Avoid styling non-link text with underlines. Some readers will mistake underlined texts for links, and may become confused and try to click on the unerlined text. Also, avoid styling test with to blink, scroll, or have a line through it.
Prefer using actual text over text inside a graphic. Assistive technologies can't read an image, and the text in an image can't be resized by a browser, like normal text. If an image has text that needs to be read, add it in the alt attribute of the image.
<img src="assets/img/buy-now.jpg" alt="Buy now">
The contrast between the color of an element's text and its background should be high enough that low-vision users can read it. The minimum recommended contrast ratio is 4.5:1. There are no automated tools that can effectively check this for you, but if you aren't sure about a specific color combination, you can run it through one of many color contrast checkers, such as WebAIM's color contrast checker.
Google Chrome's Accessibility Developer Tools also includes a contrast checker. By selecting an element in the inspector, you can see if the contrast meets the minimum standards.
When possible, use the rem and em units to size everything. Not just font size, but also padding, margins, and any length value. This ensures that your design scales up and down uniformly if the user changes their browser's text size. It's common for vision-impaired users to resize their browser up to 200% zoom.
We use the rem unit nearly everywhere in Foundation, and even wrote a Sass function to make it a little easier. The rem-calc() function can take one or more pixel values and convert them to proper rem values.
.element {
width: rem-calc(300);
padding: rem-calc(10 16);
}