Simple Web Typography

index.html

<article role="article">
		<header>
			<h1>Web Type</h1>
			<h2>A Project by Adam Blum</h2>
			<time>August 27, 2013</time>
		</header>

		<p>Web Type is a simple project for semantic and readable typography to use on the web. You should <a href="https://github.com/AdamBlumMusic/Web-Type" role="link">Fork it on Github</a>.</p>

		<section role="group">
			<a href="https://github.com/AdamBlumMusic/Web-Type/zipball/master" role="button">Download ZIP</a>
			<a href="https://github.com/AdamBlumMusic/Web-Type/tarball/master" role="button">Download TAR</a>
			<a href="https://github.com/AdamBlumMusic/Web-Type" role="button">Fork on Github</a>
		</section>
			
		<h3>Why It's Awesome</h3>
		<p>In case you still aren't convinced, here's why you should give Web Type a try:</p>
		<ul>
			<li>Built with <abbr title="Syntatically Awesome Stylesheets">Sass</abbr></li>
			<li>Uses semantic HTML5 elements and <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Roles.</li>
			<li>Lightweight and easy to modify</li>
			<li>It's responsive</li>
		</ul>
		
		<h3>Heading Level Three</h3>
		<p>Lorem ipsum dolor sit amet, <a href="#0" role="link">consectetur adipisicing elit</a>. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus eum delectus dolorum iste illum mollitia nisi amet omnis ratione quo aliquid vero alias impedit eaque commodi eveniet. Illo sit.</p>

		<blockquote>
			This is an example of a <code>blockquote</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, distinctio, facere quo laudantium fuga laborum odio eum doloremque officia eligendi voluptatibus id nulla fugit ut ipsum suscipit vel eveniet! Dolore!
		</blockquote>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>

		<h4>Heading Level Four</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! <q>This is a <code>q</code> element for inline quotes.</q> Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>

		<h5>Heading Level Five</h5>
		<p>Lorem ipsum dolor sit amet, <a href="#0" role="link">consectetur adipisicing elit</a>. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus eum delectus dolorum iste illum mollitia nisi amet omnis ratione quo aliquid vero alias impedit eaque commodi eveniet. Illo sit.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>

			<figure>
        <img src="http://placehold.it/1200x600" alt="" />
				<figcaption>Figure with a relatively short caption.</figcaption>
			</figure>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>
  
  <blockquote>
    Consider it a great joy, my brothers, whenever you experience various trials, knowing that the testing of your faith produces endurance. But endurance must do its complete work, so that you may be mature and complete, lacking nothing.
    <cite>James 1:2&ndash;4</cite>
  </blockquote>

			<figure>
        <img src="http://placehold.it/1200x600" alt="" />
				<figcaption role="note">Figure with a really long and detailed caption. The numbering of the figures is done through pure CSS using <code>counters</code>. Rerum eveniet totam qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, culpa corrupti iste temporibus quis quisquam veritatis placeat reprehenderit et aut consequatur omnis quos accusamus illo fugit velit quod voluptatem est.</figcaption>
			</figure>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>

		<h6>Heading Level Six</h6>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sint perspiciatis earum repellendus beatae quis perferendis dolore provident nihil molestiae cumque natus quia nam magni ab facere aperiam. Quas et.</p>
  
  
  <dl>
    <dt>Term</dt>
    <dd>This is a definition. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere adipisci.</dd>
  </dl>

		<p role="note">This paragraph has a <code>role</code> attribute of <code>note</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus vitae ipsum aliquam harum explicabo quisquam unde molestias cum culpa sint mollitia dolor maiores aut illum magni quam tempora temporibus ipsa! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio obcaecati. Facere repellat ipsa nesciunt dolor quis culpa alias soluta minima earum et. Fugiat hic odio ipsum neque provident beatae.</p>

  
  
  
  
  
  <table>
      <thead>
        <tr>
          <td>Heading 1</td>
          <td>Heading 2</td>
          <td>Heading 3</td>
        </tr>
      </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
  
  
  
  
  
  
		<footer>
			<p>A project by Adam Blum</p>
			<p>Copyright &copy; 2013</p>
		</footer>
	</article>

simple-web-typography.markdown

Simple Web Typography

Beautiful web typography with just the basics. It creates a clear hierarchy using a variety of font weights, styles, and sizes. You can find this project on GitHub here: https://github.com/AdamBlumMusic/Web-Type

A Pen by Adam Blum on CodePen.

License.

style.scss

@font-face {
    font-family: 'merriweather-regular';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather-italic';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'merriweather-bold';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather-bolditalic';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}


@font-face {
    font-family: 'merriweather-black';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather-heavyitalic';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-heavyitalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}


@font-face {
    font-family: 'merriweather-light';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-light.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather-lightitalic';
    src: url('https://adamblummusic.github.io/Web-Type/font/merriweather-lightitalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}



%bold {
  font-family: 'merriweather-bold';
  font-weight: 700;   font-style: normal;
}

%bolditalic {
  font-family: 'merriweather-bolditalic';
  font-weight: 700;   font-style: italic;
}

%black {
  font-family: 'merriweather-black';
  font-weight: 900;   font-style: normal;
}

%blackitalic {
  font-family: 'merriweather-heavyitalic';
  font-weight: 900;   font-style: italic;
}

%lite {
  font-family: 'merriweather-light';
  font-weight: 200;   font-style: normal;
}

%liteitalic {
  font-family: 'merriweather-lightitalic';
  font-weight: 200;   font-style: italic;
}


%regular {
  font-family: 'merriweather-regular';
  font-weight: 400;   font-style: normal;
}

%italic {
  font-family: 'merriweather-italic';
  font-weight: 400;   font-style: italic;
}





/*
  ======== Variables ========
*/

$red:                    #eb5448;   // lorem
$blue:                   #2c90c6;   // lorem
$green:                  #5BC8A4;   // lorem
$orange:                 #F09D09;   // lorem
$yellow:                 #e3c800;   // lorem
$red:                    #eb5448;   // lorem
$gray:                   #666666;   // lorem
$litegray:               #f6f6f6;   // lorem

$paragraph-width:        50rem;     // how wide paragraphs should be 
$font-size:              1.25rem;   // lorem
$line-height:            1.6;       // lorem

$linkcolor:              $blue;     // lorem
$body-text-color:        #444;      // lorem
$heading-text-color:     #222;      // lorem
$emphasis-text-color:    #222;      // lorem
$blockquote-text-color:  #444;     // lorem
$note-text-color:        $gray;     // lorem
$code-color:             $emphasis-text-color;    // lorem
$text-highlight-color:   rgba($blue, 0.1);

*, *::before, *::after {
  box-sizing:       border-box !important;
  &:focus {
    outline:        none;
  }
}

body {
 padding:       5vw 5vw 0 5vw;                // keep padding relative to viewport size
 font-family:  "merriweather-regular",
                Georgia, 
                sans-serif;         // provide fallback fonts for browsers that don't support @font-face
 font-size:     1.25rem;            // make font size larger for better readability
 line-height:   1.75;                // increase line height for better readability
 color:         $body-text-color;   // make text color slightly lighter than pure black
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color:        $heading-text-color;    // make headers stand out from body text
	margin:       1em auto 0.25em auto;   // add relative margin to top and bottom of each heading
	max-width:    $paragraph-width;       // keep headings within width of paragraph
  font-weight:  normal;                 // ensure font is not bold
}


h1, h2, h3, h4 {
  @extend %bold;
}

h5, h6 {
  @extend %italic;
}



h1 {font-size:  4.0625rem;}
h2 {font-size:  3.25rem;}
h3 {font-size:  2.5625rem;}
h4 {font-size:  2rem;}
h5 {font-size:  1.5625rem;}
h6 {font-size:  1.25rem;}

p {
  max-width:        $paragraph-width;   // keep paragraphs at certain width for readability
  margin:           0 auto;             // equal margins on left and right
  text-align:       justify;            // justify text for readability
  -webkit-hyphens:  auto;
  -moz-hyphens:     auto;
  -ms-hyphens:      auto;
  -o-hyphens:       auto;
  hyphens:          auto;

  & + & {
   margin-top:      1.5em;              // add top margin to consecutive paragraphs
  }
}

[role="group"] {
  max-width:          $paragraph-width;
  margin:             1em auto;
}

article[role="article"] {
  counter-reset: figure;

 header {
   text-align:      center; 
   margin-bottom:   3em;

    h1, h2, h3, h4, h5, h6 {
     margin:        0 auto; 
    }

  }

  & > p:first-of-type {
    font-size:         1.25em;
    margin-bottom:     1em;
    	&:first-letter {
         margin-right:  -0.1em;
			   font-size:    2em;
			   line-height:  0;
			}
  }

}

a[role="link"] {
  text-decoration:        none;
  border:                 none;
	border-bottom:          0.0625rem dotted $linkcolor;
	color:                  $linkcolor;
	&:hover, &:focus {
		border-bottom-style:  solid;
	}
}

code, pre {
  font-family:  monospace;
  color:  $code-color;
}

blockquote {
  @extend                 %liteitalic;
  max-width:              $paragraph-width * 0.85;
  font-size:              1rem;
  margin:                 1em auto;
  color:                  $blockquote-text-color;
    & code, & q {font-style:  normal;}   // make code snippets and double quotes not italic
  cite {
   display:  block;
    text-align:  right;
  }
}

q {

  &::before {
    content:    "\201C";
  }

  &::after {
    content:    "\201D";
  }
}

small {
  color:                  $note-text-color;
  font-size:              0.75rem;
}

abbr {
  border-bottom:    0.0625rem dotted $emphasis-text-color;
  color:            $emphasis-text-color;
  cursor:           help;
}



ul, ol {
  max-width:        $paragraph-width;
  margin:           1em auto;
}

ul {
  list-style-type:  square; 
}

footer {
  font-size:        85%;
  background:       $litegray;
  max-width:        $paragraph-width;
  margin:           3em auto 0 auto;
  padding:          1em 2em;
    p {
      margin: 0 auto;
    }
}



a[role="button"],
input[type="submit"],
input[type="reset"],
button {
  @extend             %regular;
  font-size:          1.125em;
  display:            inline-block;
  padding:            0.5em 0.75em;
  margin:             0.25rem 0;
  border:             0.0625rem solid transparent;
  background:         $litegray;
  border-radius:      0.125em;
  text-align:         center;
  text-decoration:    none;
  color:              $emphasis-text-color;
  letter-spacing:     0.0625rem;
 // text-transform:     uppercase;
  cursor:             pointer;
  transition:         border-color 0.2s ease-in-out;
    &:hover, &:focus {
      border-color:  $gray;
    }
}



img {
  max-width:  100%;
}


figure {

max-width:  $paragraph-width * 0.85;
margin:  2em auto;
padding:  1em;
background:  $litegray;


  figcaption {
    font-size:              1.125rem;
    &:before {
      counter-increment: figure;
      content:  "Figure " counter(figure) ": ";
      opacity:  0.5;
    }
  }
}

[role="note"] {
  @extend                 %lite;
  color:                  $note-text-color;
  font-size:              0.75rem;
  -moz-column-count:      2; 
  -moz-column-gap:        1em; 
  -webkit-column-count:   2; 
  -webkit-column-gap:     1em;

      @media screen and (max-width:  48rem) {
        -moz-column-count:     1;
        -webkit-column-count:  1;
        max-width:             $paragraph-width * 0.75;
        margin:                1em auto;
      }

}


dl {
 max-width:  $paragraph-width * 0.8;
  margin:  1em auto;
  dt {
    font-size: 1.25em;
    @extend %italic;
  }
}

::selection {
  background: $text-highlight-color;
}
::-moz-selection {
  background: $text-highlight-color;
}




table {
 margin:  1em auto;
  width:  $paragraph-width * 0.8;
}

thead {
 background:  $litegray; 
}

td {
 padding:  0.125em 0.5em; 
}