larlet-fr-david/david/stream/2015/12/24/index.md

title: Rythme vertical fluide

> When starting new projects, a CSS builder’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’s an approach that makes structural sense.
>
> *Proportions* 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 *any possible* screen size. This process can be less challenging — even for responsive designs — if you use a *modular scale* and let math do the work for you.
> 
> <cite>*[A Responsive Guide to Type Sizing](http://blog.cloudfour.com/responsive-guide-to-type-sizing/)* ([cache](/david/cache/9ff37a890e93f6f4d5a1bbb30657ff0d/))</cite>

J’ai passé quelques heures hier à essayer de combiner [une typographie fluide](http://madebymike.com.au/writing/fluid-type-calc-examples/) ([cache](/david/cache/7bd69d61367ba820906d99e127802e57/)) avec un rythme vertical et une proportion générale qui soient fluides également. Je m’intéresse à ces notions [depuis un moment](/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/) et je ne pensais pas me casser les dents dessus, la prochaine fois je m’en tiendrai [aux images responsives](http://codepen.io/Tigt/post/when-responsive-images-get-ugly) ([cache](/david/cache/16d800a1faadde1445d0c2332f5b6f3c/)) *#OhWait*.

Le principal écueil vient du [non support par Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=594933) de `calc` pour `line-height` (coucou Karl), ce qui réduit considérablement les possibilités… toutes mes tentatives ont été vaines et c’est pourtant un [vieux problème](http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/) ([cache](/david/cache/2f355b7b880ea4227d76112849b58eb2/)) [imparfaitement résolu](https://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/) ([cache](/david/cache/4ac7753495665742f9e59432538fb920/)) via les *media queries*. Avoir recours à des *breakpoints* me semblait [aujourd’hui](http://www.heydonworks.com/article/flexbox-grid-finesse) ([cache](/david/cache/47b2c38919f07b29e902dc35979384ce/)) [désuet](https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/) ([cache](/david/cache/2d0636e4f9e67a22d202ed25577c7a05/)) ou plutôt une rustine dont on pouvait progressivement se passer. Je force un peu le trait mais je suis de plus en plus intéressé par une approche [dépendante de la donnée](/david/stream/2015/12/18/) avant tout, ce que je compte éclaircir [d’ici Confoo](/david/stream/2015/10/19/).

Voici les proportions auxquelles je suis arrivé en utilisant une [échelle modulaire major third](http://www.modularscale.com/?1&em&1.25&web&text) :

    :::css
    body { font-size: calc(1rem + 0.4 * (100vw / 60)); }
    h6 { font-size: calc(0.8rem + 0.4 * (100vw / 60)); }
    h5 { font-size: calc(1rem + 0.4 * (100vw / 60)); }
    h4 { font-size: calc(1.25rem + 0.4 * (100vw / 60)); }
    h3 { font-size: calc(1.563rem + 0.4 * (100vw / 60)); }
    h2 { font-size: calc(1.953rem + 0.4 * (100vw / 60)); }
    h1 { font-size: calc(2.441rem + 0.4 * (100vw / 60)); }

Il est tellement frustrant de ne pas pouvoir calculer les `line-height` correspondants pour arriver à un rythme vertical satisfaisant. À moins de le [calculer en JavaScript](https://github.com/Wilto/Molten-Leading) ? Ou d’utiliser un pré/post-processeur et de mimer la fluidité avec de très nombreux points d’arrêts calculés. Ou lâcher prise mais [documenter](/david/blog/2015/experimentations-techniques/).

> Recently, CSS-Tricks [ran a survey](https://css-tricks.com/dear-css-tricks-reader-who-are-you/) that asked its community to weigh in on topics that they face daily. I answered the survey, and one of the interesting results was for the question, “You’re stuck. You search the web. You prefer to find answers in these formats:”. The top answer was *blog post*. Blog post! One of the other leading answers was “Q&A format page” (something like Stack Overflow). That made me think. Why wasn’t Q&A the top answer? Maybe it’s because while web designers want something that works if we simply copy-and-paste, we are also driven by *why* as much as *how*.
>
> <cite>*[Write What You Know (Now)](http://alistapart.com/column/write-what-you-know-now)* ([cache](/david/cache/bab01f4f3937bf301e8ac32b0ca01810/))</cite>