Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Headlines

Editorial Headlines

See a blog post page for an example of how to use each heading.

h1. Used for the title of the article.

h2. Used for section breaks within articles.

h3. Used for calls to action.

h4. Used for smaller subheads.

h5. Heading 5
h6. Heading 6
				
<h1>h1. Used on the homepage, no more than two lines long.</h1>
<h2>h2. Used for section breaks within articles. </h2>
<h2 class="intro">h2.intro Catchy intro that's less than ten words.</h2>
<h3>h3. Used for calls to action.</h3>
<h4>h4. Used for smaller subheads.</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
				
			

Product Headlines

See the Soundcite project page for an example of how to use each heading.

Use h2.intro in conjunction with the logo mark for project taglines.

h1. Used on the homepage, no more than two lines long.

h2. Used for section titles.

h2.intro Catchy intro that's less than ten words.

h3. Subsection titles.

h4. Typically used for items that have titles within a section.

h5. Heading 5
h6. Heading 6
				
<h1>h1. Used on the homepage, no more than two lines long.</h1>
<h2>h2. Used for section titles. </h2>
<h2 class="intro">h2.intro Catchy intro that's less than ten words.</h2>
<h3>h3. Subsection titles.</h3>
<h4>h4. Typically used for items that have titles within a section.</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
				
			

Paragraphs

Orangeline calculates font sizes, margins, padding and other attributes in rems, or root ems. By default, Orangeline defines 1 rem as 18px. All attributes calculated as rems are derived from this 18px base size. Media queries change the base body text size and, by relation, all other sizes of everything sized rems. (This includes not only font sizes, but padding and margin as well.)

Lead paragraphs are used as introductions to projects or other large pages. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.

Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

				
<p class="lead">Lead paragraphs are used as introductions to projects or other large pages.</p>
<p>By default, body text (like this) is 18px. This 16px base size is what all font sizes are calculated from.</p>
				
			

Lists

Unordered Lists

Bullet points.

  • This is an unordered list.
  • Use it for bullet points in a story. Use it for bullet points in a story. Use it for bullet points in a story.
  • This is still an unordered list.
  • Lists can be nested
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
				
<ul>
    <li>This is an unordered list.</li>
    <li>Use it for bullet points in a story.</li>
    <li>This is still an unordered list.</li>
    <li>
        Lists can be nested
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
</ul>
				
			

Ordered Lists

For use when there are numbered sets or a numbered hierarchy.

Here is a list following a paragraph.

  1. This is an ordered list.
  2. Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.
  3. Useful for top 10, etc.
  4. Lists can be nested
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  5. Lists can be nested
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Useful for top 10, etc.
  7. Useful for top 10, etc.
  8. Useful for top 10, etc.
  9. Useful for top 10, etc.
  10. Useful for top 10, etc.
  11. Useful for top 10, etc.
  12. Useful for top 10, etc.
  13. Useful for top 10, etc.

Here is a list following a paragraph with the .list--letters class.

  1. This is an ordered list.
  2. Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.
  3. Useful for top 10, etc.
  4. Useful for top 10, etc.
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  5. Useful for top 10, etc.
  6. Useful for top 10, etc.
  7. Useful for top 10, etc.
				
<ol>
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process.</li>
    <li>Useful for top 10, etc.</li>
</ol>

<ol class="list--letters">
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.</li>
    <li>Useful for top 10, etc.</li>
</ol>
				
			

Definition Lists

A description list, with terms and descriptions.

Coffee
Black hot drink
Milk
White cold drink
				
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>
				
			

Horizontal Definition List

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Coffee
Black hot drink
Milk
White cold drink
				
<dl class="dl-horizontal">
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>
				
			

Quotes

Quotes come in two varieties: the inline quote (q)and the blockquote.

Inline Quote

Journalists love learning and sharing, wrote Michelle Minkoff in a blog post about why she develops in a newsroom.

                
<p>
    <q cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">Journalists love learning and sharing,</q> wrote Michelle Minkoff in a blog post about why she develops in a newsroom.
</p>
                
            

Blockquote

Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.

Michelle Minkoff
                
<blockquote cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>
                
            

Block-fact

Display level type similar to a quote but stating a fact from an article without quote marks.

Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.

                
<blockquote class="block-fact">
    <p>
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
</blockquote>
                
            

Pullquote

Available in .pullquote for floating right and .pullquote--left for floating left.

Perhaps the most attractive means of communicating with computers, at least at first glance, is by natural language.

Human-Computer Interaction

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

You can get better, more helpful answers the more your bot knows about you and the context of your request.

Human-Computer Interaction

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

Matty Mariansky, co-founder and product designer at Meekan, a Slack bot that schedules meetings across teams, describes the ideal bot as being a search engine that gives you one result.

                
<blockquote class="pullquote" cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>	
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>
<blockquote class="pullquote--left" cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>	
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>
                
            

Bold

For emphasizing a snippet of text with a heavier font-weight.

Normal text leading into text rendered as bold text.

				
<strong>rendered as bold text</strong>
				
			

Italic

For emphasizing a snippet of text with italics.

Normal text leading into text rendered as italicized text.

				
<em>rendered as italicized text</em>
				
			

Truncate

Use truncate to truncate text (requires setting a width).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

				
<p class="truncate" style="width:300px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
				
			

Small

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. You can also apply the .small class to have the same effect.

This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text.

This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print.

This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print.

				
<small>This line of text is meant to be treated as fine print.</small>
<p class="small">This line of text is meant to be treated as fine print.</p>
				
			

Highlight

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

				
<p>
    You can use the mark tag to <mark>highlight</mark> text.
</p>
				
			

Deleted

For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text.

				
<p>
    <del>This line of text is meant to be treated as deleted text.</del>
</p>
				
			

Note

Note that the words "Note:" are prepended to the content.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="note">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>
				
			

Editor's Note

Mostly used on the blog. Note that the words "Editor's Note:" are prepended to the content.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="editors-note">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>
				
			

Note Alert

Added emphasis

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="note note-alert">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>
				
			

Note Alert

Added emphasis

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="note">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>