A Pen by matthew jackson.

index.jade

.main
  h1 Georgia.
  blockquote
    p One of my colleagues is convinced that having a wide range of types to choose from is a complete waste of time. 
    
  .cols
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa facere officia autem quia vero rerum iusto doloribus mollitia enim aliquam minus quasi quis quidem eveniet ut ullam animi possimus consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dolorem unde alias doloribus quaerat veritatis officia est nemo laudantium facilis ipsam quis officiis. Fugiat ea enim pariatur laborum illum vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste architecto molestias quod inventore officia animi accusamus quisquam ad cum velit maxime doloremque voluptates consequatur error molestiae illum nesciunt sint nulla!
  
  p.colophon This web thing was set in <strong>Georgia</strong>

style.scss

body {
  font : 16px/1.5 "Georgia", serif;
  background-color: #f6f6f6;
  color: #373839;
  text-rendering: optimizeLegibility; 
}
.main {
  margin: 0 auto;
  padding-top: 100px;
  width: 650px;
 }
h1 {
  font-size: 98px;
  line-height: 1;
/*   font-weight: normal; */
  font-style: italic;
  padding: 0;
  margin: 0;
  text-indent: -12px;
}
p {
  margin: 0;
  padding-bottom: 16px;
}
.cols {
  position: relative;
  column-count: 2;
  column-gap: 32px;
  column-fill: balance;
  border: solid #e4e4e4;
  border-width: 6px 0;
  padding: 21px 0;
  text-align: justify;
  text-justify: inner-content;
  -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
  p {
    border-bottom: 1px solid #aaa;
    &:first-letter {
      float: left;
      font-size: 72px;
      font-weight: bold;
      line-height: 1;
      margin-right: 14px;
    }
    &:after {
      content: "❦";
      position: absolute;
      bottom: 30px; 
      background-color: #f5f6f7;
      left: 75%;
      text-align: center;
      padding: 0 6px;
      color: #aaa;
    }
  }
}
blockquote {
  position: relative;
  padding: 6px 0 0 72px;
  &:before {
    content: "“";
    position: absolute;
    font-size: 144px;
    line-height: 1;
    text-indent: -72px;
    top: -18px;
    color: #e4e4e4
  }
  p {
    color: #CC3945;
    font-size: 18px;
    font-style: italic;
  }
}

.colophon {
  font-style: italic;
  color: #aaa;
  text-align: right;
  padding: 16px 0 0;
}

Web-Safe-fonts-#1.markdown

Web Safe fonts #1

Gonna try and make some nice typographic things with websafe fonts. Started with the easiest and best

A Pen by matthew jackson on CodePen.

License.