davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
321 коммит
1 ветка
Дерево: d930fd019c
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'd930fd019c'
${ noResults }
larlet-fr-david-cache/cache/9ff37a890e93f6f4d5a1bbb3065.../index.html

index.html 52KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>A Responsive Guide to Type Sizing (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://blog.cloudfour.com/responsive-guide-to-type-sizing/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   A Responsive Guide to Type Sizing (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://blog.cloudfour.com/responsive-guide-to-type-sizing/">Source originale du contenu</a></h3>

  463.     <p>When starting new projects, a CSS builder&#8217;s initial concerns tend to involve typography. Setting a typographic foundation with the right mixture of ingredients can form something solid enough to support many other building blocks of design. It&#8217;s an approach that makes structural sense.</p>

  464. 

  465. <p><em>Proportions</em> are a key ingredient to the mixture. Calibrating your type proportions for a balance of aesthetics and order can be an obsessive undertaking. It’s a challenge getting proportions right for a given screen size, let alone <em>any possible</em> screen size. This process can be less challenging &#8212; even for responsive designs &#8212; if you use a <em>modular scale</em> and let math do the work for you.</p>

  466. 

  467. <h3>Using a modular scale for typographic proportions</h3>

  468. 

  469. <p>In his <a href="http://alistapart.com/article/more-meaningful-typography">detailed article</a> on the subject, Tim Brown demonstrates using a modular scale for composing type. He explains how compositions can benefit from using numbers that relate to each other in a meaningful way:</p>

  470. 

  471. <blockquote><p>Modular scales[&#8230;] help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.</p></blockquote>

  472. 

  473. <p>This <em>modulation-based</em> approach is particularly useful for determining type sizes. Selecting sizes using a ratio (instead of guessing) yields a more harmonious range of proportions.</p>

  474. 

  475. <p>With tools like <a href="http://www.modularscale.com">this indispensable calculator</a>, you can see how different <em>bases</em> and <em>ratios</em> affect your scale. These are the variables in your scale&#8217;s equation. The value produced by multiplying or dividing these variables is a <em>step</em> on your scale. Repeating the operation on each resulting value forms a new step:</p>

  476. 

  477. <figure style="margin:1em 0; text-align:center">

  478. <table style="display:table; width:100%; table-layout:fixed">

  479. <thead>

  480. <tr>

  481. <th style="text-align:center">Step</th>

  482. <th style="text-align:center">Math</th>

  483. <th style="text-align:center">Result</th>

  484. </tr>

  485. </thead>

  486. <tbody style="font:1em 'source code pro',monospace">

  487. <tr>

  488. <td>+3</td>

  489. <td>&nbsp;40 × 2</td>

  490. <td>80&nbsp;&nbsp;&nbsp;</td>

  491. </tr>

  492. <tr>

  493. <td>+2</td>

  494. <td>&nbsp;20 × 2</td>

  495. <td>40&nbsp;&nbsp;&nbsp;</td>

  496. </tr>

  497. <tr>

  498. <td>+1</td>

  499. <td>&nbsp;10 × 2</td>

  500. <td>20&nbsp;&nbsp;&nbsp;</td>

  501. </tr>

  502. <tr style="opacity:.5">

  503. <td>&nbsp;0</td>

  504. <td>&nbsp;none</td>

  505. <td>10&nbsp;&nbsp;&nbsp;</td>

  506. </tr>

  507. <tr>

  508. <td>−1</td>

  509. <td>&nbsp;10 ÷ 2</td>

  510. <td>&nbsp;5&nbsp;&nbsp;&nbsp;</td>

  511. </tr>

  512. <tr>

  513. <td>−2</td>

  514. <td>&nbsp;&nbsp;5 ÷ 2</td>

  515. <td>&nbsp;2.5&nbsp;</td>

  516. </tr>

  517. <tr>

  518. <td>−3</td>

  519. <td>2.5 ÷ 2</td>

  520. <td>&nbsp;1.25</td>

  521. </tr>

  522. </tbody>

  523. </table>

  524. <figcaption style="font-style:italic">

  525.     Example with a base of 10 and a ratio of 2<br />

  526.   </figcaption>

  527. </figure>

  528. 

  529. <p>You can also associate each step in the sequence with the number of times the ratio has been multiplied or divided:</p>

  530. 

  531. <figure style="margin:1em 0; text-align:center">

  532. <table style="display:table; width:100%; table-layout:fixed">

  533. <thead>

  534. <tr>

  535. <th style="text-align:center">Step</th>

  536. <th style="text-align:center">Math</th>

  537. <th style="text-align:center">Result</th>

  538. </tr>

  539. </thead>

  540. <tbody style="font:1em 'source code pro',monospace">

  541. <tr>

  542. <td>+3</td>

  543. <td>10 × 2 × 2 × 2</td>

  544. <td>80&nbsp;&nbsp;&nbsp;</td>

  545. </tr>

  546. <tr>

  547. <td>+2</td>

  548. <td>10 × 2 × 2&nbsp;&nbsp;&nbsp;&nbsp;</td>

  549. <td>40&nbsp;&nbsp;&nbsp;</td>

  550. </tr>

  551. <tr>

  552. <td>+1</td>

  553. <td>10 × 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

  554. <td>20&nbsp;&nbsp;&nbsp;</td>

  555. </tr>

  556. <tr style="opacity:.5">

  557. <td>&nbsp;0</td>

  558. <td><em>none</em></td>

  559. <td>10&nbsp;&nbsp;&nbsp;</td>

  560. </tr>

  561. <tr>

  562. <td>−1</td>

  563. <td>10 ÷ 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

  564. <td>&nbsp;5&nbsp;&nbsp;&nbsp;</td>

  565. </tr>

  566. <tr>

  567. <td>−2</td>

  568. <td>10 ÷ 2 ÷ 2&nbsp;&nbsp;&nbsp;&nbsp;</td>

  569. <td>&nbsp;2.5&nbsp;</td>

  570. </tr>

  571. <tr>

  572. <td>−3</td>

  573. <td>10 ÷ 2 ÷ 2 ÷ 2</td>

  574. <td>&nbsp;1.25</td>

  575. </tr>

  576. </tbody>

  577. </table>

  578. </figure>

  579. 

  580. <p>Experimenting with base and ratio parameters is a quick way to gauge how much proportional contrast is right for your project. Compare the following scales:</p>

  581. 

  582. <ul>

  583. <li><a href="http://www.modularscale.com/?1&amp;em&amp;1.618&amp;web&amp;text">The golden section</a> (1.618)</li>

  584. <li><a href="http://www.modularscale.com/?1&amp;em&amp;1.2&amp;web&amp;text">The minor third</a> (1.2)</li>

  585. </ul>

  586. 

  587. <p>Due to their ratios, these scales have wildly differing degrees of change between each step. The &#8220;golden section&#8221; ratio yields much more change than the &#8220;minor third&#8221;. Consider how much change you&#8217;re likely to need, and how it correlates with varying screen sizes and content hierarchy.</p>

  588. 

  589. <figure style="margin:1em 0">

  590.   <a href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratios_compared.png"><img src="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratios_compared.png" alt="Comparing two scale ratios"></a></p>

  591. <figcaption style="text-align:center; font-style:italic">

  592.     Scales with the ratios of 1.618 and 1.2 compared on <a href="http://modularscale.com">modularscale.com</a><br />

  593.   </figcaption>

  594. </figure>

  595. 

  596. <p>The balance of typographic contrast in scale is dependent on screen size. A scale that works well on a large screen may have too much contrast for a small screen (and feel obtrusive). Likewise, a scale that is harmonious on a small screen may be too subtle when viewed on a large screen.</p>

  597. 

  598. <p>One solution to this conundrum is to create a scale intended for small screens that is also capable of adapting for large ones. The first thing to consider when creating that scale is which ratio to use.</p>

  599. 

  600. <figure style="margin:1em 0; text-align:center">

  601. <table style="display:table; width:100%; table-layout:fixed">

  602. <thead>

  603. <tr>

  604. <th style="text-align:center">Step</th>

  605. <th style="text-align:center">Font size</th>

  606. <th>Result</th>

  607. </tr>

  608. </thead>

  609. <tbody style="font-family:'source code pro',monospace">

  610. <tr>

  611. <td>&nbsp;0</td>

  612. <td>&nbsp;&nbsp;1.0em</td>

  613. <td>

  614. <div style="font-size:1em; text-align:left">Abcdefg</div>

  615. </td>

  616. </tr>

  617. <tr>

  618. <td>+1</td>

  619. <td>&nbsp;&nbsp;1.2em</td>

  620. <td>

  621. <div style="font-size:1.2em; text-align:left">Abcdefg</div>

  622. </td>

  623. </tr>

  624. <tr>

  625. <td>+2</td>

  626. <td>&nbsp;1.44em</td>

  627. <td>

  628. <div style="font-size:1.44em; text-align:left">Abcdefg</div>

  629. </td>

  630. </tr>

  631. <tr>

  632. <td>+3</td>

  633. <td>1.728em</td>

  634. <td>

  635. <div style="font-size:1.728em; text-align:left">Abcdefg</div>

  636. </td>

  637. </tr>

  638. <tr>

  639. <td>+4</td>

  640. <td>2.074em</td>

  641. <td>

  642. <div style="font-size:2.074em; text-align:left">Abcdefg</div>

  643. </td>

  644. </tr>

  645. <tr>

  646. <td>+5</td>

  647. <td>2.488em</td>

  648. <td>

  649. <div style="font-size:2.488em; text-align:left">Abcdefg</div>

  650. </td>

  651. </tr>

  652. </tbody>

  653. </table>

  654. <figcaption style="font-style:italic">

  655.     The minor third ratio (1.2) with a base of 1em<br />

  656.   </figcaption>

  657. </figure>

  658. 

  659. <p><a href="http://www.modularscale.com/?1&amp;em&amp;1.2&amp;web&amp;text">The minor third</a> ratio of 1.2 yields a gradually changing range of sizes. They all feel reasonable for small screens, and are distinct enough for levels of typographic hierarchy. At step #5, the resulting size can still be used while retaining a reasonable number of characters per line. With these attributes, this ratio feels like a good selection for small screen proportions.<sup style="line-height:0"><a href="#responsive-guide-to-type-sizing-fn1">1</a></sup></p>

  660. 

  661. <h3>Applying your scale from the ground up</h3>

  662. 

  663. <p>After figuring out a scale that works well for your project, you&#8217;ll probably want to put it into practice. CSS offers a few options:</p>

  664. 

  665. <ol>

  666. <li>Copying and pasting numbers for a bunch of property values</li>

  667. <li>Using preprocessors like <a href="http://sass-lang.com">Sass</a> with built-in math capabilities</li>

  668. <li>Using the native CSS <code>calc()</code> function</li>

  669. </ol>

  670. 

  671. <p>The following examples employ option #3, using <a href="https://github.com/postcss">PostCSS</a> in order to provide browser support for <code>calc()</code> and <code>var()</code>. If you prefer a different CSS processor, you can apply the same operations with that tool&#8217;s own arithmetic and variable syntax.<sup style="line-height:0"><a href="#responsive-guide-to-type-sizing-fn2">2</a></sup></p>

  672. 

  673. <p>For more complex modular scale applications, you should check out these plugins available for <a href="https://github.com/postcss">PostCSS</a> and <a href="http://sass-lang.com">Sass</a>:</p>

  674. 

  675. <ul>

  676. <li><a href="https://github.com/kristoferjoseph/postcss-modular-scale">postcss-modular-scale</a></li>

  677. <li><a href="https://github.com/modularscalemodularscale-sass">modularscale-sass</a></li>

  678. </ul>

  679. 

  680. <p>They provide a cleaner syntax than <code>calc()</code> for getting scale values, and also support multiple values for <em>base</em> and <em>ratio</em>.</p>

  681. 

  682. <h4>Configuring the variables</h4>

  683. 

  684. <p>The first step is to define values for the <em>ratio</em> and <em>base</em> variables that much of the scale logic depends on:</p>

  685. 

  686. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #3333ff;">:root </span><span style="color: #00AA00;">&#123;</span>

  687.   --ratio<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1.2</span><span style="color: #00AA00;">;</span>

  688.   --base<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>

  689.   --base-em<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> <span style="color: #933;">1em</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  690.   --base-px<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  691. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  692. 

  693. <p>There are three base-related properties defined here. This is to provide flexibility when different CSS units (or no units) are needed.</p>

  694. 

  695. <p>Next, you need to establish the range of scale steps you&#8217;re likely to use:</p>

  696. 

  697. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #3333ff;">:root </span><span style="color: #00AA00;">&#123;</span>

  698.   --ms0<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>

  699.   --ms1<span style="color: #00AA00;">:</span> var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>                    <span style="color: #808080; font-style: italic;">/* 1.2   */</span>

  700.   --ms2<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.44  */</span>

  701.   --ms3<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.728 */</span>

  702.   --ms4<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.074 */</span>

  703.   --ms5<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.488 */</span>

  704.   --ms6<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.986 */</span>

  705.   --ms7<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms6<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 3.583 */</span>

  706. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  707. 

  708. <p>With these step properties defined, you can now compute them with your base to get values from your scale:</p>

  709. 

  710. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.2em  */</span>

  711. <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.44em */</span></pre></td></tr></table></div>

  712. 

  713. <h4>Establishing default sizes</h4>

  714. 

  715. <p>The browser default <code>font-size</code> paired with the scale step of 1.44 for <code>line-height</code> feels like an <a href="http://practicaltypography.com/line-spacing.html">appropriate choice</a> for body copy:</p>

  716. 

  717. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">body <span style="color: #00AA00;">&#123;</span>

  718.   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  719.   <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  720. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  721. 

  722. <p>Headings probably don&#8217;t need to consist of six different sizes (as there are other ways to differentiate them). However, if you do wish to incorporate a different size for each, you can use a series of steps from your scale:</p>

  723. 

  724. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">h6 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> / var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  725. h5 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  726. h4 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  727. h3 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  728. h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  729. h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  730. 

  731. <p>In addition to heading <code>font-size</code>, you should also consider the values for <code>line-height</code>.</p>

  732. 

  733. <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">One of the most overlooked things in front-end development is the line-height of wrapped headings. They&#39;re often way too large</p>

  734. <p>&mdash; Matt Stow (@stowball) <a href="https://twitter.com/stowball/status/672710430628810752">December 4, 2015</a></p></blockquote>

  735. 

  736. <p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>

  737. 

  738. <p>Using a lower step of the scale in this case can benefit readability when lines are wrapping:</p>

  739. 

  740. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">h3<span style="color: #00AA00;">,</span>

  741. h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  742. h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  743. 

  744. <p>With these defaults for body copy and headings in place, you have a nice foundational hierarchy that works well on small screens:</p>

  745. 

  746. <figure style="margin:1em 0">

  747.   <a href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratio_in_use1.png"><img src="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratio_in_use1.png" alt="Ratio of 1.2 on a small screen"></a></p>

  748. <figcaption style="text-align:center; font-style:italic">

  749.     A scale with a ratio of 1.2 applied to content on a 320&#215;480 screen<br />

  750.   </figcaption>

  751. </figure>

  752. 

  753. <h3>Expanding your scale when proportional contrast is needed</h3>

  754. 

  755. <p>Increasing screen sizes and viewing distances will reveal new typographic requirements for your layout. Your body copy and the contrast in scale of all typographic elements will likely need adjustments to suit the new context:</p>

  756. 

  757. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@media (min-width: 480px) {</span>

  758.   html <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-px<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  759. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  760. 

  761. <p>Bumping the global font size like this is a practical adjustment that requires little effort. While this practice is <a href="https://bugsnag.com/blog/responsive-typography-with-rems">common</a>, it&#8217;s worth noting that even small tweaks like this can leverage steps from your modular scale. Rather than incrementing the size by an arbitrary few pixels or a percentage, you can use your scale to determine the new value.</p>

  762. 

  763. <p>In line with amplifying your body copy, you might also want to increase the amount of change between each heading size. You can do this by overriding the larger headings with sizes from higher up your scale:</p>

  764. 

  765. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@media (min-width: 768px) {</span>

  766.   h3 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  767.   h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  768.   h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  769. <span style="color: #00AA00;">&#125;</span>

  770. &nbsp;

  771. <span style="color: #a1a100;">@media (min-width: 1024px) {</span>

  772.   h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  773.   h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms6<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  774. <span style="color: #00AA00;">&#125;</span>

  775. &nbsp;

  776. <span style="color: #a1a100;">@media (min-width: 1360px) {</span>

  777.   h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms7<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

  778. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  779. 

  780. <p>With these size adjustments in place, viewport width will determine how far up the scale your headings are allowed to climb:</p>

  781. 

  782. <p><iframe height='480' scrolling='no' src='//codepen.io/erikjung/embed/XmOdEo/?height=480&#038;theme-id=0&#038;default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/erikjung/pen/XmOdEo/'>Responsive Type Sizing</a> by Erik Jung (<a href='http://codepen.io/erikjung'>@erikjung</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

  783. </iframe></p>

  784. 

  785. <p>(View <a href="http://codepen.io/erikjung/pen/XmOdEo">the full CodePen</a> to see how the text size responds.)</p>

  786. 

  787. <h3>Broadening the usage of your scale</h3>

  788. 

  789. <p>Limiting your scale&#8217;s influence to just specific elements would be <a href="https://www.youtube.com/watch?v=Ru9e2rTHeuk">highly illogical</a>. You want flexible, abstracted styles to build complex interfaces with. Utility classes can provide that flexibility:</p>

  790. 

  791. <div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.u-textBigger</span> <span style="color: #00AA00;">&#123;</span>

  792.   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  793. <span style="color: #00AA00;">&#125;</span>

  794. &nbsp;

  795. <span style="color: #6666ff;">.u-textSmaller</span> <span style="color: #00AA00;">&#123;</span>

  796.   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> / var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>

  797. <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

  798. 

  799. <p>With one ratio relating all the text sizes, anything affected by these classes will adhere to the steps of your scale. Even when combining or nesting the classes, the resulting text will remain in relative proportion:</p>

  800. 

  801. <div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>

  802.   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>Now I'm as big as an H1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>

  803.   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Now I'm as big as an H2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>

  804.   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>I haven't changed at all.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>

  805. <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>

  806. &nbsp;

  807. <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>

  808.   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>

  809.     <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>

  810.       <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>Same as it ever was.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;</span>

  811.     <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>

  812.   <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>

  813. <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

  814. 

  815. <p><iframe height='320' scrolling='no' src='//codepen.io/erikjung/embed/RrrzVr/?height=320&#038;theme-id=0&#038;default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/erikjung/pen/RrrzVr/'>Responsive Type Sizing (utils)</a> by Erik Jung (<a href='http://codepen.io/erikjung'>@erikjung</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

  816. </iframe></p>

  817. 

  818. <h3>TL;DR</h3>

  819. 

  820. <ul>

  821. <li>Use a modular scale to define your typographic proportions.</li>

  822. <li>Create a scale that is flexible enough to work on many screen sizes.</li>

  823. <li>Use higher steps from your scale when more proportional contrast is needed.</li>

  824. <li>Don&#8217;t limit the use of your scale to specific elements.</li>

  825. </ul>

  826. 

  827. <h3>Further reading</h3>

  828. 

  829. <ul>

  830. <li><a href="http://alistapart.com/article/more-meaningful-typography">More Meaningful Typography</a> by Tim Brown</li>

  831. <li><a href="http://typecast.com/blog/a-more-modern-scale-for-web-typography">A More Modern Scale for Web Typography</a> by Jason Pamental</li>

  832. <li><a href="http://madebymike.com.au/writing/precise-control-responsive-typography">Precise control over responsive typography</a> by Mike Riethmuller</li>

  833. <li><a href="https://bugsnag.com/blog/responsive-typography-with-modular-scale">Responsive typography with Modular Scale</a> by Max Luster</li>

  834. <li><a href="http://www.modularscale.com">Modular Scale Calculator</a></li>

  835. <li><a href="http://www.pearsonified.com/typography">Golden Ratio Typography Calculator</a></li>

  836. <li><a href="http://www.gridlover.net/try">Gridlover</a></li>

  837. <li><a href="http://type-scale.com">Type Scale</a></li>

  838. </ul>

  839. 

  840. <p><hr />

  841. <h5>Footnotes</h5>

  842. <ol style="font-size:80%;">

  843. <li id="responsive-guide-to-type-sizing-fn1">

  844.     Using one base and one ratio isn&#8217;t the only way to arrive at a scale that works within small screen limitations. You can also create a <em>multi-stranded</em> scale by using multiple base or ratio values instead of just one. Here is an <a href="http://www.modularscale.com/?1,4&#038;em&#038;1.5&#038;web&#038;text">example</a> using a secondary base value to shorten the distance between each step. See <a href="http://modularscale.com">modularscale.com</a> for a better explanation.

  845.   </li>

  846. <li id="responsive-guide-to-type-sizing-fn2">

  847.     The <a href="http://github.com/cssnext/postcss-cssnext">postcss-cssnext</a> plugin can be used to transform the output of <code>calc()</code> and <code>var()</code>.

  848.   </li>

  849. </ol></p>

  850.   </article>

  851. </section>

  852. 

  853. 

  854. <nav id="jumpto">

  855.   <p>

  856.     <a href="/david/blog/">Accueil du blog</a> |

  857.     <a href="http://blog.cloudfour.com/responsive-guide-to-type-sizing/">Source originale</a> |

  858.     <a href="/david/stream/2019/">Accueil du flux</a>

  859.   </p>

  860. </nav>

  861. 

  862. <footer>

  863.   <div>

  864.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  865.     <p>

  866.       Bonjour/Hi!

  867.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  868.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  869.     </p>

  870.     <p>

  871.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  872.     </p>

  873.     

  874.     <p>

  875.       Voici quelques articles choisis :

  876.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  877.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  878.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  879.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  880.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  881.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  882.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  883.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  884.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  885.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  886.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  887.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  888.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  889.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  890.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  891.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  892.     </p>

  893.     <p>

  894.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  895.     </p>

  896.     <p>

  897.       Je ne traque pas ta navigation mais mon

  898.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  899.       conserve des logs d’accès.

  900.     </p>

  901.   </div>

  902. </footer>

  903. <script type="text/javascript">

  904.   ;(_ => {

  905.     const jumper = document.getElementById('jumper')

  906.     jumper.addEventListener('click', e => {

  907.       e.preventDefault()

  908.       const anchor = e.target.getAttribute('href')

  909.       const targetEl = document.getElementById(anchor.substring(1))

  910.       targetEl.scrollIntoView({behavior: 'smooth'})

  911.     })

  912.   })()

  913. </script>