9

Hay alguna manera de hacer que el tamaño de la letra sea autoescalable según el tamaño de la pantalla?

He probado de poner en rem, en % pero no me funciona.

2
  • Ya tienes buenas respuestas de Error404 y Daniel Díaz, solo quería añadir que si pones por ejemplo font-size:80% para los párrafos lo que haces es darle un tamaño del 80% respecto al tamaño que heredes de los elementos padre, si no has definido ningún tamaño será del tamaño por defecto que pone el navegador, generalmente 16px, por lo que tendrás una letra de 12.8px. Los em funcionan más o menos igual y los rem usan el elemento raiz como referencia, no el padre como los em y los %
    – user7176
    Commented el 4 nov. 2016 a las 12:42
  • Cuando digo el tamaño de los padres me refiero al tamaño de letra, no al tamaño de los elementos
    – user7176
    Commented el 4 nov. 2016 a las 12:46

4 respuestas 4

15

Como extensión a lo que ha comentado el compañero Error404 comentarte dos cosas.

Puedes controlar el tamaño de la fuente con el ancho de tu pantalla:

.mifuente {
    font-size: 2vw;
}

O lo puedes hacer con el alto:

.mifuente {
    font-size: 2vh;
}

En casos mas concretos no tienes alternativa a usar @media para dependiendo de tu alto y tu ancho hacer una cosa u otra.

@media (max-width: 200px) and (max-heigth: 160px) {
    .mifuente {
        font-size: 20px;
    }
}
3
  • Sí, antes tenía prisa y no he podido redactarlo mejor. En cuanto he vuelto he intentado dar una explicación un poco más extensa. Muy buena respuesta :) Commented el 4 nov. 2016 a las 10:08
  • Gracias hermano me ayudo bastante
    – SoftMolina
    Commented el 20 jun. 2019 a las 14:33
  • Me alegro bro ! ;) Commented el 20 jun. 2019 a las 15:10
6

Puedes utilizar vw (view port) units.

font-size: 3.5vw;

Estas tomarán la proporción en función del ancho de tu pantalla.

Por otro lado, también existen vh que toman la proporción tomando como referencia la altura.

Por último, puedes usar las media queries. Si no quieres que te realice saltos tan grandes (dependiendo de la pantalla que tengas te la pondrá a unos tamaños u otros) puedes indicar directamente mediante pixeles que font-size quieres que tenga la fuente para anchuras concretas de la pantalla.

Ejemplo:

@media (max-width:700px) and (min-width:500px) {
    .texto{
       font-size: 12px;
    }
}

Lo que haría el ejemplo anterior sería poner tu fuente a 12 píxeles, cuando tu pantalla tenga un mínimo de 500 píxeles y un máximo de 700px. Puedes ajustarlo a tus necesidades y puedes usar todos los que quieras.

3
  • Hace unos "saltos" de tamaño demasiado grandes... hay alguna otra forma?
    – Pavlo B.
    Commented el 4 nov. 2016 a las 9:50
  • 1
    He utilizado la medida vh, aunque no se si es correcto de esta manera... Pero parece que funciona.
    – Pavlo B.
    Commented el 4 nov. 2016 a las 9:53
  • @PavloB. He editado mi respuesta. Antes me tenía que ir y he puesto algo rápido. Ahora espero haberlo dejado un poco más claro. Commented el 4 nov. 2016 a las 10:01
5

Veo que no lo han nombrado en las otras respuestas y es que generalmente se requiere un límite máximo / mínimo al momento de usar las unidades de medida vw y vh, teniendo en cuenta que ya hay pantallas con varios miles de píxeles de ancho y otras muy pequeñas, todo esto asumiendo que no sea un diseño fluido o mejora progresiva.

Si bien bastaría un par de media queries para establecer los valores mínimos y máximos, podemos usar también calc() para fijar un valor mínimo e ir agregando unidades de vw o vh según aumenta la resolución:

font-size: calc(1rem + 1vw);

En este ejemplo el tamaño mínimo será de 1rem y se le irá agregando el 1% del valor del ancho del viewport actual.

Para el límite superior podemos utilizar un media query "normal":

@media (min-width: 200rem) {
  p {
    font-size: 3rem;
  }
}

Por si acaso, puedes usar cualquier otra unidad de medida distinta a rem.

-1

Puedes probar ponerlas en em aunque dependerá de la fuente que tenga la pantalla , si por ejemplo :

La fuente base está a : 8px.

1 em = 8px , 2 em = 16px y así sigue el progreso.

Luego tienes la opción de ponerlo en pt , pero se comenta que es una mala idea , lo que hace el pt es depender del tamaño de la pantalla del cliente. fuente

Lo que se aconseja hoy en día, las buenas prácticas es hacerlo todo en em ya que es lo más cómodo y estandar.

Otra opción es poner un botón en cuanto a accesibilidad que lo que haga , sea aumentar el tamaño de la letra , por medio de un botton js , que lo que haga sea aumentar un porcentaje el tamaño base y así lo que haces , con los `em' es aumentar el tamaño porque todos son relativos al tamaño base de la fuente impuesta en la plantilla.

*{
 font-size: 8px;
}

Por ejemplo , se suele establecer así , por lo general suele coger también este tamaño.

Nota : Se suele pone el *señalas que quieres que todo tenga ese tamaño , pero luego individualmente puedes personalizarlo.

1
  • Puedes personalizarlo individualmente porque está debajo en el orden del css o porque has utilizado un selector mas concreto que * que es demasiado genérico (significa cualquier elemento). Tambien se puede usar así .midiv * { Commented el 4 nov. 2016 a las 9:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.