Generated by SassMeister.com.

SassMeister-input-HTML.html

<div lang="la">
  <p class="small"><span>lorem ipsum dolor sit amet</span></p>
  <p><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-6"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-5"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-4"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-3"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-2"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-1"><span>lorem ipsum dolor sit amet</span></p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----

// dépendance

@import 'SassyLists';

// ratios pré-définis

$phi: 	               1/1.618!default;
$golden: 	             1/1.618!default;
$double-octave: 	         1/4!default;
$major-twelfth: 	         1/3!default;
$major-eleventh: 	         3/8!default;
$major-tenth: 	           2/5!default;
$octave: 	                 1/2!default;
$major-seventh: 	        8/15!default;
$minor-seventh: 	        9/16!default;
$major-sixth: 	           3/5!default;
$minor-sixth: 	           5/8!default;
$fifth: 	                 2/3!default;
$augmented-fourth: 1/1.4142135!default; // 1/√2
$fourth: 	                 3/4!default;
$major-third: 	           4/5!default;
$minor-third: 	           5/6!default;
$major-second: 	           8/9!default;
$minor-second: 	         15/16!default;

// paramètres d’entrée

// @param $ratio     ratio appliqué pour le calcul des échelles typographiques
// @param $scale1    taille de texte « importante » de l’échelle 1 (utilisée comme niveau 0)
// @param $scale2    taille de texte « importante » de l’échelle 2

$ratio:       $golden!default;
$scale1:         20px!default;
$scale2:         25px!default;

// @param $amplitude taille des échelles calculées (pas vraiment besoin d’y toucher)

$amplitude:        10!default;

@function calculatescales($ratio, $scale1, $scale2, $amplitude)
{
  // variables internes
  
  $i: 0;
  
  // on calcule les deux échelles
  
  @while $i < $amplitude
  {
    $next1: nth($scale1, length($scale1)) / $ratio;
    $next2: nth($scale2, length($scale2)) / $ratio;
    
    $prev1: nth($scale1, 1) * $ratio;
    $prev2: nth($scale2, 1) * $ratio;
      
    $scale1: join($scale1, $next1);
    $scale2: join($scale2, $next2);
    
    $scale1: join($prev1, $scale1);
    $scale2: join($prev2, $scale2);
    
    $i: $i + 1;
  }
  
  // fusion + tri + arrondis sur les échelles
  
  $scale: sl-sort(join($scale1, $scale2));
  
  $roundscale: ();
  
  @each $step in $scale
  {
    $roundscale: join($roundscale, round($step));
  }
  
  @return sl-remove-duplicates($roundscale);
}

// fonction publique

@function scale($level: 0)
{
  $lscale: $scale;
  
  @if length($lscale) == 0
  {
    $lscale: calculatescales($ratio, $scale1, $scale2, $amplitude);
  }
  
  $scale: $lscale;

  @return nth($scale, index($scale, $scale1) + $level);
}

$scale: ();

// exemple d’utilisation (avec un rythme vertical en bonus)

$bfs:              16px!default; // base-font-size
$fs:            scale()!default; // font-size (que l'on va chercher sur l’échelle typographique)
$lh: round($fs * 3 / 2)!default; // line-height (par défaut 1.5 fois plus grand que le font-size)

// conversion de pixels en ems, en fonction du contexte

@function em($px, $contexte: $bfs)
{
    @return($px / $contexte * 1em);
}

// on charge normalize

@import 'http://necolas.github.io/normalize.css/3.0.1/normalize.css';

body
{
  // on applique le font-size et le line-height
  
  font-size:   em($fs);
  line-height: em($lh, $fs);
  
  padding:     0 em($lh, $fs);
  
  // grille horizontale
  background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
  background-position: 0 0;
  background-size: em($lh / 2, $fs) em($lh / 2, $fs);
}
p
{
  // on revoit les marges par défaut des paragraphes en fonction du line-height
  
  margin: em($lh, $fs) 0;
  
}
p
{
  // pour mettre en évidence les paragraphes et les hauteurs de lignes
  
  background-color: transparentize(#000, 0.95);
  
  & > *
  {
    background-color: transparentize(#F00, 0.95);
  }
}
.small
{
  // on va chercher sur l’échelle typographique la valeur à -1
  
  $size: scale(-1);
  
  // cette valeur est convertie en ems, en fonction du contexte sur le body
  // et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
  // ici le line-height est divisé par 2 car le texte est très petit
  
  font-size: em($size, $fs);
  margin:    em($lh / 2, $size) 0;
}
.title-6
{
  // on va chercher sur l’échelle typographique la valeur à 1
  
  $size: scale(1);
  
  // cette valeur est convertie en ems, en fonction du contexte sur le body
  // et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
  
  font-size:     em($size, $fs);
  margin:        em($lh, $size) 0;
}
.title-5
{
  // on va chercher sur l’échelle typographique la valeur à 2
  
  $size: scale(2);
  
  // cette valeur est convertie en ems, en fonction du contexte sur le body
  // et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
  // ici le line-height est multiplié par 1.5 car le texte est assez gros
  
  font-size:     em($size, $fs);
  line-height:   em($lh * 1.5, $size);
  margin:        em($lh, $size) 0;
}
.title-4
{
  // on va chercher sur l’échelle typographique la valeur à 3
  
  $size: scale(3);
  
  // cette valeur est convertie en ems, en fonction du contexte sur le body
  // et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
  // ici le line-height est multiplié par 1.5 car le texte est assez gros
  
  font-size:     em($size, $fs);
  line-height:   em($lh * 1.5, $size);
  margin:        em($lh, $size) 0;
}
.title-3
{
  $size: scale(4);
  
  font-size:     em($size, $fs);
  line-height:   em($lh * 2, $size);
  margin:        em($lh, $size) 0;
}
.title-2
{
  $size: scale(5);
  
  font-size:     em($size, $fs);
  line-height:   em($lh * 2.5, $size);
  margin:        em($lh, $size) 0;
}
.title-1
{
  $size: scale(6);
  
  font-size:     em($size, $fs);
  line-height:   em($lh * 3, $size);
  margin:        em($lh, $size) 0;
}

// EOF

SassMeister-output.css

@import "http://necolas.github.io/normalize.css/3.0.1/normalize.css";
body {
  font-size: 1.25em;
  line-height: 1.5em;
  padding: 0 1.5em;
  background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
  background-position: 0 0;
  background-size: 0.75em 0.75em;
}

p {
  margin: 1.5em 0;
}

p {
  background-color: rgba(0, 0, 0, 0.05);
}
p > * {
  background-color: rgba(255, 0, 0, 0.05);
}

.small {
  font-size: 0.75em;
  margin: 1em 0;
}

.title-6 {
  font-size: 1.25em;
  margin: 1.2em 0;
}

.title-5 {
  font-size: 1.6em;
  line-height: 1.40625em;
  margin: 0.9375em 0;
}

.title-4 {
  font-size: 2em;
  line-height: 1.125em;
  margin: 0.75em 0;
}

.title-3 {
  font-size: 2.6em;
  line-height: 1.15385em;
  margin: 0.57692em 0;
}

.title-2 {
  font-size: 3.25em;
  line-height: 1.15385em;
  margin: 0.46154em 0;
}

.title-1 {
  font-size: 4.25em;
  line-height: 1.05882em;
  margin: 0.35294em 0;
}

SassMeister-rendered.html

<div lang="la">
  <p class="small"><span>lorem ipsum dolor sit amet</span></p>
  <p><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-6"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-5"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-4"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-3"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-2"><span>lorem ipsum dolor sit amet</span></p>
  <p class="title-1"><span>lorem ipsum dolor sit amet</span></p>
</div>