Calculateur de typographie fluide
Générez des déclarations CSS clamp() pour une typographie responsive fluide. Le texte s'adapte en douceur entre les tailles de viewport sans breakpoints.
CSS généré
Visualisation de la plage de tailles
Largeur du viewport
Viewport actuel:
Taille de police
Taille actuelle:
Aperçu en direct
Portez ce vieux whisky au juge blond qui fume. Voyez le brick géant que j'examine près du wharf. Buvez de ce whisky que le patron juge fameux.
Formule
La fonction CSS clamp() garantit que la taille de police reste entre un minimum et un maximum, s'adaptant fluidement avec la largeur du viewport :
font-size: clamp(min, preferred, max);
valeur préférée = min + (max - min) * ((100vw - minVw) / (maxVw - minVw))
= px + ( - ) * ((100vw - px) / ( - ))
= rem + vw
Frequently Asked Questions
Fluid typography is a technique where font sizes scale continuously with the viewport width rather than jumping between fixed values at breakpoints. Instead of writing font-size: 16px at mobile and font-size: 20px at desktop inside media queries, a fluid value like font-size: clamp(1rem, 0.5rem + 1.25vw, 1.25rem) achieves a smooth linear interpolation between those endpoints across all viewport widths. The technique was popularised by Mike Riethmüller's 2016 article on precise control over responsive typography.
CSS clamp(min, val, max) returns the middle value if it is within the range [min, max], the minimum if the middle value is below min, or the maximum if the middle value is above max. For fluid typography, the middle value is a linear equation of the form calc(a + b * 100vw), where a is the y-intercept in rem and b is the slope. This creates a value that is exactly min at a specific small viewport width and exactly max at a specific large viewport width, with linear scaling between them. clamp() is supported in all browsers that support CSS Fonts Level 4.
The 1vw unit equals 1 % of the viewport width. The vw unit is best used inside a calc() or clamp() expression rather than alone, because a pure vw value has no minimum floor and can become unreadably small on narrow screens. The newer svw (small viewport width) and dvw (dynamic viewport width) units account for mobile browser chrome (the URL bar that appears and disappears on scroll), reducing CLS caused by font size reflow when the browser chrome toggles. For stable body text sizing, 100vw inside clamp() is fine; for full-screen display text that must avoid the URL bar effect, svw is preferable.
Body text benefits most from fluid sizing when targeting a wide range of devices—from small phones at 320 px to ultra-wide monitors at 2560 px. However, the slope is usually gentle (16–20 px range) to maintain readability. Headings have more to gain from fluid sizing because the size difference between mobile and desktop is proportionally larger (24–64 px for h1, for example). Captions and UI labels often benefit less, as their sizes rarely change between breakpoints. A practical approach is to apply fluid sizing to h1–h3 and body, and use fixed sizes for smaller UI elements.
Unitless line-height values (e.g. 1.5) scale automatically with font-size, so they remain proportionally correct as the font size changes fluidly—no additional intervention needed. Problems arise only when line-height is set in absolute units like px; in that case, the line-height does not track the font-size, producing either cramped or excessively open leading at different viewport sizes. Always use unitless line-height values alongside fluid font sizes to ensure proportional leading at every size.