textos adaptables en theme.json de WP

textos adaptables en theme.json de WP


Consideraciones:

Se establecen unos tamaños de fuente que van a cambiar entre resoluciones de 960px (60rem) y 1440px (90rem) de ancho. Considerando 1rem = 16px.

Se utiliza una calculadora online para convertir de píxeles a rem y viceversa

dirección: https://codebeautify.org/rem-to-px-converter

Una vez que sabemos entre que resoluciones queremos modificar el tamaño de la fuente, tenemos establecidos los «viewports», ahora procedemos a establecer los valores de mínimo y máximo tamaño de fuente para cada una de nuestras declaraciones.

Por defecto en WordPress están los siguientes tamaños de fuente:

  • small,
  • medium,
  • large
  • extra large.

Hemos añadido otras y les hemos asignado un nombre:

  • tiny,
  • huge,
  • gigantic
  • colossal.

Vamos a https://royalfig.github.io/fluid-typography-calculator/

Y obtenemos los siguientes valores para que se modifique su tamaño entre 960px y 1440px o entre 60rem y 90rem:

Settings -> typography ->

      "fontSizes": [
        {
          "size": "clamp(0.75rem, 0.25rem + 0.8333333333333334vw, 1rem)",
          "slug": "tiny",
          "name": "Minúscula"
        },
        {
          "size": "clamp(1rem, 0.5rem + 0.8333333333333334vw, 1.25rem)",
          "slug": "small"
        },
        {
          "size": "clamp(1.25rem, 0.75rem + 0.8333333333333334vw, 1.5rem)",
          "slug": "medium"
        },
        {
          "size": "clamp(1.75rem, 0.75rem + 1.6666666666666667vw, 2.25rem)",
          "slug": "large"
        },
        {
          "size": "clamp(2.25rem, 1.25rem + 1.6666666666666667vw, 2.75rem)",
          "slug": "x-large"
        },
        {
          "size": "clamp(2.75rem, 1.75rem + 1.6666666666666667vw, 3.25rem)",
          "slug": "huge",
          "name": "Enorme"
        },
        {
          "size": "clamp(3.25rem, 1.25rem + 3.3333333333333335vw, 4.25rem)",
          "slug": "gigantic",
          "name": "Gigantesca"
        },
        {
          "size": "clamp(4.25rem, 2.25rem + 3.3333333333333335vw, 5.25rem)",
          "slug": "colossal",
          "name": "Colosal"
        }
      ]
diferentes tamaños de fuente
No cabía todo en la pantalla, así que esta imagen muestra el resultado al 60% de su tamaño real

Por supuesto, la familia de fuentes que se elija, repercutirá en el tamaño que ocupe en la pantalla.


subir