Pues hoy os traigo una lección de CSS que va a ser bastante sencilla ya que cambiar el tamaño de los distintos tipos de fuente de una página web mediante CSS es una de las primeras cosas que se suelen enseñar sobre este maravilloso lenguaje de programación web.
Sin embargo, trataré de explicarlo de la mejor forma que me sea posible (que sea sencillo no significa que no requiera de atención) y aprovecharé para de paso contarte ciertos aspectos que te resultarán de mucha ayuda en esta temática.
¡Consulta nuestros servicios!
Ya sabes, buenas prácticas, consejos y ese tipo de cosas, de modo que no te quedes simplemente con la parte más básica de la modificación de tamaño de los textos y puedas tener una comprensión algo más avanzada sobre este aspecto.
Tabla de Contenidos
Font-Size: La Orden para Modificar el Tamaño de Textos
Como seguramente sepas, CSS cuenta con distintas ordenes que nos permiten personalizar varios aspectos de una página web. «Font-size» es la orden que nos interesa hoy ya que es la encargada de definir el tamaño de los textos de una página (del selector que elijamos, claro, ahora te voy explicando). Veamos el funcionamiento básico de esta orden:
.texto-ejemplo {
font-size: 16px;
}
He usado el selector de clase .texto-ejemplo simplemente para dar un ejemplo, en tu caso deberías elegir el selector que necesites o crear el tuyo personalizado para luego añadirlo a tu código HTML. Si no entiendes mucho a qué me refiero, no te preocupes, que abajo añadiré ejemplos reales.
Respecto a la orden Font-size ya ves que no tiene mucho misterio, simplemente debemos añadir el tamaño de fuente en pixeles que queramos y listo. Hay otras unidades de medición que podemos usar como por ejemplo los em y los rem, esto lo veremos más abajo para no adelantarnos demasiado con temas un poquito más complejos.
Ejemplos Realistas
A continuación varios ejemplos realistas, usos bastante comunes para la regla Font-size. Te ayudarán a entender mejor cómo puedes aplicar la orden y es bastante probable que puedas darle uso a estos ejemplos a tus proyectos porque lo dicho, son aplicaciones muy comunes de la orden Font-size.
Tamaño de Texto por Defecto de la Página
Una muy buena práctica de cara al uso de esta orden y algo que en definitiva deberías realizar siempre en tus páginas web es definir un tamaño de texto por defecto y en base a ese tamaño por defecto, jugar con los demás tamaños (eso lo veremos un poco más abajo).
Así es como lo puedes hacer:
body {
font-size: 16px;
}
<body> es la etiqueta HTML que engloba todo el contenido de la página (salvo el <head>, pero ahí se añaden otro tipo de cosas, no el contenido de la página), por lo que al hacer esto estaríamos definiendo que todos los textos de la página por defecto deberían tener este tamaño.
No he utilizado un tamaño de 16px al azar, es un tamaño de fuente que te recomiendo bastante que añadas (17px también serviría) como tu tamaño de fuente por defecto ya que se trata de un tamaño que es lo suficiente grande para que sea fácil de leer (importante por temas de accesibilidad), pero que sin embargo, no es tan grande como para que el estilo de la página se vea perjudicado.
Este consejo es obviamente desde un punto de vista general, si fueras a realizar una página cuyo target sean personas que puedan tener dificultades en su visión (una óptica por ejemplo), yo le aumentaría un poco esos pixeles.
Uso de los EM
Antes de proseguir con más ejemplos, es muy importante que te introduzca muy bien este tema porque te va a resultar muy útil. ¿Recuerdas que te comenté que podemos usar otras unidades de medición en la orden font-size? Pues ahora entramos en eso.
Verás, los «em» son una unidad de medición que deberías dominar ya que te va a facilitar mucho todo este tema de la personalización del tamaño de los textos de tu página. ¿Que por qué digo esto? porque 1em es básicamente el mismo tamaño de texto que tenga definido el selector que hayas elegido mediante CSS, me explico.
Supongamos que tú has añadido un tamaño de fuente por defecto en el <body> tal y como he comentado en el ejemplo anterior, usaremos el mismo tamaño para este ejemplo (16px). Esto significa que si tú quieres definir el tamaño de un elemento hijo de <body> (que es básicamente cualquier parte del contenido porque <body> es lo que engloba todo), puedes usar los em para definir el resto de tamaños de una forma más sencilla. Esto solo funciona, por supuesto, si ya previamente has definido un elemento padre que tenga un tamaño definido en pixeles ya que em es un tamaño relativo, no exacto como lo son pixeles.
Si 1em equivale al tamaño que tenga el elemento en ese momento (16px en este caso si has añadido este tamaño de fuente como fuente por defecto), eso implica que:
- 2em equivaldría a 2 x tamaño de fuente actual: 32px en este caso.
- 1.5em equivale a 1.5 x tamaño de fuente actual: 24px.
- 0.5em equivale a 0.5 x tamaño de fuente actual: 8px.
Como ves, esta es una forma increíble de organizar el tamaño de nuestros textos ya que es muy intuitiva y bastará con definir el tamaño por defecto del texto como te he contado en el ejemplo anterior para que puedas jugar de forma sencilla con los demás tamaños de texto de tu página. Ahora lo veremos mejor con más ejemplos, que es importante que esto quede muy claro.
Tamaño de los Headings o Encabezados
Este ejemplo vendrá genial para entender mejor todo el tema que ya he mencionado de los «em». Suponiendo que hemos definido el tamaño de la fuente por defecto en el body (primer ejemplo), esto es lo que tendríamos que hacer para definir el tamaño de los distintos encabezados de la página.
h1 {
font-size: 2.8em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2.2em;
}
h4 {
font-size: 1.9em;
}
h5 {
font-size: 1.6em;
}
h6 {
font-size: 1.3em;
}
Así quedaría la cosa, simplemente ten en cuenta que el tamaño de texto que yo he definido para esta página (me refiero a la página web en si, Onicode) es de 17px en lugar de 16px, por lo que estos textos serán un pelín más grandes que los que obtendrías añadiendo 16px como texto por defecto (ponle 17px como yo si quieres, eso a tu gusto).
Soy un h1
Soy un h2
Soy un h3
Soy un h4
Soy un h5
Soy un h6
Como ves, en este ejemplo yo he querido darle un incremento de tamaño equitativo a los headings (+0.3 cada nivel superior), tú por supuesto puedes jugar con los em para elegir los tamaños que quieras (a lo mejor prefieres que el h1 sea todavía más grande, o que el incremento sea exponencial; lo dicho, adáptalo a tu gusto).
También por supuesto puedes añadir los tamaños usando px, pero te recomiendo encarecidamente que uses esta metodología que te estoy enseñando a lo largo de este artículo porque es una buena práctica y cuando le pilles el gusto no querrás dejarla.
Ah sí, y ni si te ocurra poner el <h3> con un tamaño de fuente mayor al del <h2> por ejemplo, los tamaños tienen que estar ordenados de mayor a menor donde <h1> es el más grande y <h6> el más pequeño.
Clase para Texto Destacado
Ahora supongamos que tú quieres crear una clase personalizada que puedas añadir en el HTML de tu página para definir una especie de texto destacado que básicamente consistirá en un texto al cuál le aumentaremos el tamaño de la fuente y que no nos interese marcarlo como un Heading ya que a fin de cuentas, los encabezados tienen su uso y no debemos utilizarlos para aumentar el tamaño de una fuente, debemos usarlos para marcar los titulares del sitio.
.texto-destacado {
font-size: 1.6em;
}
Ahora aplicaríamos esta clase a nuestro código HTML (recuerda que el punto antes de «text-destacado» del CSS indica que estamos hablando de una clase personalziada), en este caso se lo añadiremos por ejemplo a un párrafo (etiqueta <p>):
<p class="texto-destacado">¡Hola, soy un texto destacado!</p>
Así quedaría la cosa:
¡Hola, soy un texto destacado!
También por supuesto podemos añadirlo dentro de algún otro contenido, por ejemplo, si queremos que solo una parte de un párrafo sea la que se vuelva más grande:
<p>Hola, soy un texto en el que interesa que <span class="texto-destacado">esta parte en concreto</span> llame más la atención.</p>
Y este es el resultado:
Hola, soy un texto en el que interesa que esta parte en concreto llame más la atención.
Como ves, el resultado es bastante impactante, podrías llegar a darle más impacto cambiándole el color, convirtiendo el texto en negrita o en definitiva, las opciones son infinitas. De todos modos, hoy nos centraremos en los tamaños del texto ya que esa es la temática que estamos tratando en este post, seguramente más adelante hagamos más lecciones sobre estos otros aspectos que mencionamos.
Ten en cuenta que así es como deberías usar la etiqueta <span>, para añadir una clase o id entre medio de un texto, para lo demás se suele usar la etiqueta <div> o las múltiples etiquetas de todo tipo con las que cuenta HTML5 (no entraremos tanto en temas de HTML porque esta es una lección de CSS).
Letra Pequeña
Siguiendo con más ejemplos, ahora veremos la forma de crear la típica letra pequeña; ya sabes, como las que se añaden muchas veces en contratos (siempre debes leer la letra pequeña) o bueno, cuando quieres añadir un texto que quieres que pase algo desapercibido por el motivo que sea.
.letra-mini {
font-size: 0.5em;
}
Así es como se vería en real:
Soy un texto tímido…
O de nuevo, podemos hacer pequeña solo una parte del texto usando la etiqueta <span>.
Me da vergüenza admitirlo pero… yo fui el que se equivocó.
Ya puestos… podemos crear un texto en el que mezclemos textos grandes y pequeños. En este caso he creado una clase «letra-mega-mini» para crear un texto muuy pequeño (ahora entenderás el porqué):
¿Quieres ser tu propio jefe? Solo necesitas invertir 200€ y en tan solo 2 meses veintiplicarás tu inversión. La probabilidad de éxito es del 0.00000001%.
Ahora solo me queda rezar con que Google no interprete esto como estoy intentando estafar a alguien o algo así. Google por favor, es un ejemplo precisamente para reírnos de ese tipo de cosas. Como sea, por si hay alguien muy joven por aquí, nunca confiéis en ese tipo de cosas… el dinero no cae del cielo.
Ah, por si queréis ver cómo he hecho la clase de «letra-mega-mini»:
.letra-mega-mini {
font-size: 0.25em;
}
¡Y eso sería todo! La verdad es que al final hemos profundizado muchísimo en un tema que a priori es «sencillo», pero ya sabes, todo tiene sus cosas a tener en cuenta y a mí me gusta tratar así los temas. Quizás es algo más pesado de cara a la lectura, pero creo que también se traduce en una información más jugosa ¿no?
El caso, si quieres que añada más ejemplos, si tienes alguna duda o si localizas un error o algo que crees que podría explicarse mejor… ni lo dudes, déjame un comentario y encantado atenderé tu consulta. ¡Hasta otra!
bu
Más información aquí.
