index.md 4.5KB
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.
J’ai passé quelques heures hier à essayer de combiner une typographie fluide (cache) avec un rythme vertical et une proportion générale qui soient fluides également. Je m’intéresse à ces notions depuis un moment et je ne pensais pas me casser les dents dessus, la prochaine fois je m’en tiendrai aux images responsives (cache) #OhWait.
Le principal écueil vient du non support par Firefox 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 (cache) imparfaitement résolu (cache) via les media queries. Avoir recours à des breakpoints me semblait aujourd’hui (cache) désuet (cache) 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 avant tout, ce que je compte éclaircir d’ici Confoo.
Voici les proportions auxquelles je suis arrivé en utilisant une échelle modulaire major third :
:::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 ? 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.
Recently, CSS-Tricks ran a survey 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.