Typographic scale based on the Periodic System

The font size is based on the atomic weight of each element. The formula used is base × 1 m_a, where m_a is the atomic weight of each element and base is an arbitrary base size (we use 500 here). We skip the first one, Hydrogen, since it’s too large (with an atomic weight of about 1 it would have the base font size).

by Manuel Strehl

HTML

<h1>Typographic scale based on the Periodic System</h1>
<p id="sizes">
    <span class="e18">a</span>
    <span class="e17">a</span>
    <span class="e16">a</span>
    <span class="e15">a</span>
    <span class="e14">a</span>
    <span class="e13">a</span>
    <span class="e12">a</span>
    <span class="e11">a</span>
    <span class="e10">a</span>
    <span class="e9">a</span>
    <span class="e8">a</span>
    <span class="e7">a</span>
    <span class="e6">a</span>
    <span class="e5">a</span>
    <span class="e4">a</span>
    <span class="e3">a</span>
    <span class="e2">a</span>
    <span class="e1">a</span>
</p>
<p>The font size is based on the atomic weight of each element. The formula used is <math><mi>base</mi> &times; <mfrac> <mn> 1 </mn> <msub><mi>m</mi><mi>a</mi></msub></mfrac></math>, where <math><msub><mi>m</mi><mi>a</mi></msub></math> is the <a href="http://en.wikipedia.org/wiki/Atomic_weight">atomic weight</a> of each element and <var>base</var> is an arbitrary base size (we use 500 here). We skip the first one, Hydrogen, since it’s too large (with an atomic weight of about 1 it would have the <var>base</var> font size). The sizes from right to left:</p>
<ul id="info"></ul>
<p>This is a typographic experiment by <a href="http://www.manuel_strehl.de">Manuel Strehl</a>.</p>
<hr>
    <h1 class="e6">The Heading in Carbon</h1>
    <h2 class="e9">A subheading that has the size of Fluorine</h2>
    <p class="e13">The opening paragraph uses Aluminum's size, No. 13. Mauris porttitor hendrerit nunc ut sollicitudin. Phasellus blandit tincidunt porttitor. Pellentesque sodales interdum magna, non volutpat elit egestas vitae. Etiam facilisis libero sit amet augue commodo vitae venenatis enim placerat.</p>
    <div class="e16">
        <p>The body has the size of Sulfur, No. 16. <small class="e18">Small font is set in No 18, Argon.</small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <small class="e18">Quisque ac tellus lectus,</small> nec molestie...

SCSS

body {
    font-size: 16px;
    line-height: 1.5;
    font-family: Georgia,serif;
}
#sizes {
  line-height: .67;
}

$base: 500;
.e18 { font-size: #{$base*1/39.95}px; }
.e17 { font-size: #{$base*1/35.45}px; }
.e16 { font-size: #{$base*1/32.07}px; }
.e15 { font-size: #{$base*1/30.97}px; }
.e14 { font-size: #{$base*1/28.09}px; }
.e13 { font-size: #{$base*1/26.98}px; }
.e12 { font-size: #{$base*1/24.31}px; }
.e11 { font-size: #{$base*1/22.99}px; }
.e10 { font-size: #{$base*1/20.18}px; }
.e9 { font-size: #{$base*1/19.00}px; }
.e8 { font-size: #{$base*1/16.00}px; }
.e7 { font-size: #{$base*1/14.01}px; }
.e6 { font-size: #{$base*1/12.01}px; }
.e5 { font-size: #{$base*1/10.81}px; }
.e4 { font-size: #{$base*1/9.01}px; }
.e3 { font-size: #{$base*1/6.94}px; }
.e2 { font-size: #{$base*1/4.00}px; }
.e1 { font-size: #{$base*1/1.01}px; display: none; }

JavaScript

var info = $('#info');
var elements = [
  ['H',  'Hydrogen', '1.008'],
  ['He', 'Helium', '4.002602'],
  ['Li', 'Lithium', '6.94'],
  ['Be', 'Beryllium', '9.012182'],
  ['B',  'Boron', '10.81'],
  ['C',  'Carbon', '12.011'],
  ['N',  'Nitrogen', '14.007'],
  ['O',  'Oxygen', '15.999'],
  ['F',  'Fluorine', '18.9984032'],
  ['Ne', 'Neon', '20.1797'],
  ['Na', 'Sodium', '22.98976928'],
  ['Mg', 'Magnesium', '24.3050'],
  ['Al', 'Aluminium', '26.9815386'],
  ['Si', 'Silicon', '28.085'],
  ['P',  'Phosphorus', '30.973762'],
  ['S',  'Sulfur', '32.06'],
  ['Cl', 'Chlorine', '35.45'],
  ['Ar', 'Argon', '39.948'],
  ['K',  'Potassium', '39.0983'],
  ['Ca', 'Calcium', '40.078'],
  ['Sc', 'Scandium', '44.955912'],
  ['Ti', 'Titanium', '47.867'],
  ['V',  'Vanadium', '50.9415'],
  ['Cr', 'Chromium', '51.9961'],
  ['Mn', 'Manganese', '54.938045'],
  ['Fe', 'Iron', '55.845'],
  ['Co', 'Cobalt', '58.933195'],
  ['Ni', 'Nickel', '58.6934'],
  ['Cu', 'Copper', '63.546'],
  ['Zn', 'Zinc', '65.38']
];

var els = $('#sizes span');

els.each(function(i) {
    var s = String(Math.round(10*parseFloat($(this).css('font-size')))/10);
    if (elements[els.length - i - 1]) {
        s += ' - '+elements[els.length - i - 1][1];
    }
    if ($(this).is(':hidden()')) {
        s += ' <small>(not shown)</small>';
    }
    info.prepend($('<li></li>').html(s));
});