Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #f
  • #fl
  • #flu
  • #fluid
RSS: #fluid_typography

#fluid_typography

  • @b_b
    b_b @b_b PUBLIC DOMAIN 24/07/2024
    1
    @monolecte
    1

    #Fluid_typography with discrete #steps
    ▻https://css-tip.com/fluid-typography

    Use the round() function and create a fluid typography with a discrete function instead of a continuous one.

    Define the step and get precise values within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!

    /* Instead of  */
    p {
      font-size: clamp(1rem,1rem + 3vw,2.5rem);
    }
    /* use */
    p {
      font-size: clamp(1rem,round(down,1rem + 3vw,2px),2.5rem);
    }

    #css

    b_b @b_b PUBLIC DOMAIN
    • @arno
      ARNO* @arno ART LIBRE 24/07/2024

      Je ne vois pas de quel « rounding issue » ça parle : certes j’ai un écran haute densité qui a tendance à masquer les problèmes de rendu, mais il ne me semble pas qu’on ait des problèmes de rendu parce qu’on essaie d’afficher une fonte à 16.33333px.

      ARNO* @arno ART LIBRE
    • @b_b
      b_b @b_b PUBLIC DOMAIN 24/07/2024

      Very useful if you have some calculation based on the font-size like using the em unit

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 27/06/2024
    6
    @monolecte
    @rastapopoulos
    @fil
    @7h36
    @cy_altern
    @jeanmarie
    6

    Type Fluidity
    ▻https://wearerequired.github.io/fluidity

    Generator for #CSS #clamp values for #fluid_typography sizes.

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 8/03/2022
    3
    @jeanmarie
    @baroug
    @astier
    3

    Responsive and #fluid_typography, the easy way
    ▻https://codepen.io/renevanderlende/details/YzEaKvO

    https://shots.codepen.io/renevanderlende/pen/YzEaKvO-800.jpg?version=1646441062

    :root { font-size: calc(0.658vmin + 0.75rem) }

    #css #font-size

    b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 9/03/2022

      Sur le même sujet j’ai aussi vu passer ▻https://piperhaywood.com/fluid-type-sizes-and-spacing & ▻https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing qui proposent des solutions « un peu plus complexes ».

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 11/03/2022

      Et une autre ressource sur le sujet à base de css clamp :

      ▻https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp

      L’auteur a fait un outil pour tester et jouer avec les valeurs à utiliser ▻https://modern-fluid-typography.vercel.app

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

Thèmes liés

  • #css