Of The Just Shaping of Letters By Albrech Dürer
  <small>Translated By R.T. Nichol From the Latin Text of the Edition of MDXXXV</small>

<img src="https://www.gutenberg.org/files/37103/37103-h/images/i008.png" alt="">
<p>OW, since architects, painters & others at times are wont to set an inscription on lofty walls, it will make for the merit of the work that they form the letters correctly. Accordingly I am minded here to treat briefly of this. And first I will give rules for a Latin Alphabet, and then for one of our common Text: since it is of these two sorts of letters we customarily make use in such work; and first, for the Roman letters: Draw for each a square of uniform size, in which the letter is to be contained. But when you draw in it the heavier limb of the letter, make this of the width of a tenth part of the square, and the lighter a third as wide as the heavier: and follow this rule for all letters of the Alphabet.</p>

<cite><a href="https://www.gutenberg.org/files/37103/37103-h/37103-h.htm" rel="noopener" target="_blank">Project GutenBerg, Of the Shaping of Letters By Albrech Dürer</a></cite>
/** Check out related blog post: https://andromedagalactic.com/blog/float-is-cooler-than-you-think/ **/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,500;0,700;1,400;1,600&display=swap');

img { 
  float: left;
  clip-path: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
  shape-outside: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
  shape-margin: 2ch;

/** Theme **/
:root {
  font-family: 'Raleway', Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: 300;
h1 { 
  text-align: center;
  font-size: 1.75em;
small { 
  display: block;
  font-weight: 400;
  margin-top: 1ex;
p { line-height: 2; }

/** Layout **/
:root { 
  max-width: 72ch;
  margin: 2rem auto;
img {
  display: block;
  max-width: 27.49ch;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.