medium.css

index.pug

script(async defer src="https://buttons.github.io/buttons.js")
.container
    .meta 
      .image
      .info 
        h1 On Web Typography
        p.subtitle `Tale of a dev obsessed with readability on the web`
        .author
          .authorImage
          .authorInfo
            .authorName
              a(href="https://codepen.io/lucagez") Luca Gesmundo
            .authorSub Nov 7 <span class="median-divider">·</span> 5 min read
    main.article
      p
        | <span class="first-letter">W</span>eb Typography obsessed me. As many others, 
        | I fell in the trap of optimizing legibility. Definitly not an easy task.
        br
        | Among all the contenders for the best reading experience on the Web, a name is 
        | always present and noteworthy: <strong>Medium.com</strong> .
      p
        | Looking for the arcane secrets that regulates good legibility, I immediately realized 
        | that I needed to follow in the footsteps of the masters. So I started dissecting the rules that
        | makes <strong>Medium</strong> typography, well, great.
      p
        | There were long hours of <strong>tremendous effort</strong>, days and days of <strong>prolonged pains</strong>...
      blockquote
        | Now I want to share with you the results of those long hours 🦋
      h2 An unexpected journey
      p
        | <span class="first-letter">C</span>omes out that nothing is better than a big first letter to super-charge your style.
        | Rules are simples. A big letter that spans exactly two rows. Play with <code>line-height</code> to get it right.
      h2 The hero
      p
        | We all know who the leader is.
        br
        | When designing a website you have to take into account fonts for three sectors: the <strong>content</strong>, the <strong>UI</strong>, the <strong>brand</strong>.
        br
        | Specifically I found that the best free alternatives <i>(Google Fonts)</i> to the handcrafted fonts that <strong>Medium</strong> uses are respectively <span class="highlighted">Lora</span>,
        | <span class="highlighted">Montserrat</span> and <span class="highlighted">Playfair Display</span>. 
        br
        | I discovered with delight that the last one mimics almost perfectly the effect created especially for <code>blockquote</code>.
      h2 Content font
      p 
        | The content font should be a serif one, to gently bring your eyes from one letter to the other with
        | the lowest amount of effort.
        br
        | <code>line-height</code> and <code>letter-spacing</code> are vital here. Play with those parameters to make the most out of your
        | font of choice. However at <strong>Medium</strong> you'll find almost an empty line of space in the middle of two lines of text (<code>line-height: 1.58;</code>).
        | While the space between the charachters is kept a little bit on the negative side (<code>letter-spacing: -0.03;</code>) to make words feel more compacts.
      h2 Brand font
      p 
        | The purpose of this font is to enforce the presence of our brand during the navigation experience.
        | We can use it for titles and, here and there, for some minutiae.
      blockquote Blockquotes, for example 🤫
      h2 UI font
      p 
        | The font used for all the UI elements is preferably a sans-serif one. It should create contrast with the content font.
        | Its color could be a little bit lighter than the one used for the main content. 
        br
        | It needs to be readable given the background-color of your page 
        | but not distracting from the main purpose of the page. <span class="highlighted">Reading!</span>
        br
        | You can use it also for <code>h2</code> making the titles for your paragraphs. Here the color should be the same as the one used for the main title.
      h2 <span class="highlighted">The highlight</span>
      p
        | To highlight a word or phrase you can wrap them in a <code>span</code> element and <span class="highlighted">set the background to a color that reminds of your brand color identity</span>.
      h1 Every Title
      p.subtitle `Needs a subtitle`
      p
        | Here we find <code>rgba(0, 0, 0, 0.54)</code> to give meaningful informations without grabbing the attention that the title, main charachter, deserves.
      h2 The length
      p.lineLength 
        | The length of a line of text should never be longer than <code>740px</code>. So our eyes are not forced to run from left to right on the page. 
      h2 The color
      p 
        | The text color should be <code>rgba(0, 0, 0, 0.84)</code> on a <code>rgba(255, 255, 255, 1)</code> background to ensure the best contrast possible.
      h2 Conclusion
      p
        | As always, the strict first rule of design is that there are no strict rules.
        br
        | But, if you are in trouble... 
      blockquote Use Medium.css ✍️
      br
      br
      p Let me know what are your toughts about Web Typography, I am eager to hear from you!
      p 
        | Happy readings,
        br
        i <a href="https://codepen.com/lucagez">Gez</a>
      a(class="github-button" href="https://github.com/lucagez/medium.css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lucagez/medium.css on GitHub")
        | Star

medium-css.markdown

medium.css

A Pen by Matthew Daniel Brown on CodePen.

License.

script.js

// ¯\_(ツ)_/¯

// check out the repo at: 
// https://github.com/lucagez/medium.css

style.css

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Lora|Playfair+Display:700i,900');

html,
body {
  margin: 0;
  width: 100%;
}

h1,
h2,
p,
i,
a,
.first-letter,
.authorName a {
  color: rgba(0, 0, 0, 0.84);
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  text-align: left;
  margin-bottom: 8px;
}

h2 {
  font-family: "Lato", sans-serif;
  font-size: 26px;
  font-weight: 700;
  padding: 0;
  margin: 56px 0 -13px -1.883px;
  text-align: left;
  line-height: 34.5px;
  letter-spacing: -0.45px;
}

p, i, a {
  margin-top: 21px;
  font-family: "Lora";
  font-size: 21px;
  letter-spacing: -0.03px;
  line-height: 1.58;
}

a {
  text-decoration: underline;
}

blockquote {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-style: italic;
  letter-spacing: -0.36px;
  line-height: 44.4px;
  overflow-wrap: break-word;
  margin: 55px 0 33px 0;
  /* text-align: center; */
  color: rgba(0, 0, 0, 0.68);
  padding: 0 0 0 50px;
}

code {
  font-size: 18px;
  background: rgba(0,0,0,.05);
  border-radius: 2px;
  padding: 3px 5px;
}

.highlighted {
  background: #7DFFB3;
}

.first-letter {
  overflow-wrap: break-word;
  font-family: "Playfair Display", serif;
  font-size: 60px;
  line-height: 60px;
  display: block;
  position: relative;
  float: left;
  margin: 0px 7px 0 -5px;
}

.subtitle {
  font-family: "Lato", sans-serif;
  color: rgba(0, 0, 0, 0.54);
  margin: 0 0 24px 0;
}

/* ##################################################################################
########################################  LAYOUT  ###################################
##################################################################################### */

.container {
  display: -ms-grid;
  display: grid;
      -ms-grid-columns: auto 166px 740px 166px auto;
      grid-template-columns: auto 166px 740px 166px auto;
      -ms-grid-rows: 450px auto 150px;
      grid-template-rows: 450px auto 150px;
      grid-template-areas:
    ". img img img ."
    ". . article . ."
    ". . footer . .";
}

.meta {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-area: img;
  margin: 10px;

  display: -ms-grid;

  display: grid;
      -ms-grid-rows: auto;
      grid-template-rows: auto;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
    "info image";
}

.image {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: image;
  background: url("https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ec073341402b36bb155e3bcb77eea9cd&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: cover;
  background-repeat: no-repeat;
}

.info {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: info;
  padding: 60px 60px 0 0;
  margin-bottom: 30px;
}

.author {
  display: -ms-grid;
  display: grid;
      -ms-grid-columns: 60px auto;
      grid-template-columns: 60px auto;
      -ms-grid-rows: 60px;
      grid-template-rows: 60px;
      grid-template-areas:
    "authorImage authorInfo";
}

.authorImage {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: authorImage;
  border: 2px solid #7DFFB3;
  border-radius: 50%;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1307985/profile/profile-512.jpg?1520076483');
  background-size: cover;
}

.authorInfo {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: authorInfo;
  padding-left: 10px;
}

.authorName,
.authorSub {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-top: 6px;
}

.authorName a {
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
}

.authorName a:hover {
  text-decoration: underline;
}

.authorSub {
  color: rgba(0, 0, 0, 0.54);
}

.median-divider {
  padding: 0 6px;
}

.lineLength {
  border: 2px dashed rgba(0, 0, 0, 0.54);
}

.article {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: article;
  margin: 40px 10px;
}

.footer {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: footer;
  background: #333333;
}

@media screen and (max-width: 1072px) {
  .container {
        -ms-grid-columns: auto 740px auto;
        grid-template-columns: auto 740px auto;
        grid-template-areas:
      ". img ."
      ". article ."
      ". footer  .";
  }
  .meta {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .article {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .footer {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}

@media screen and (max-width: 740px) {
  .container {
        -ms-grid-rows: auto auto 150px;
        grid-template-rows: auto auto 150px;
        -ms-grid-columns: auto;
        grid-template-columns: auto;
        grid-template-areas:
      "img"
      "article"
      "footer";
  }

  .meta {
        -ms-grid-rows: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
      "info"
      "image";
  }
  .info {
    padding-top: 0;
  }
  .meta {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .image {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .info {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .article {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .footer {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}