Tamaño de fuente

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 19 de 76.

En CSS, la propiedad font-size se utiliza para controlar el tamaño del texto dentro de un elemento HTML.

Aquí hay algunas unidades comunes utilizadas para especificar tamaños de fuente:

Píxeles (px): Una unidad absoluta que especifica el tamaño de fuente en píxeles. Esta es la unidad más directa y comúnmente utilizada para establecer tamaños de fuente.

Ems (em): Una unidad relativa que se basa en el tamaño de fuente del elemento padre. Por ejemplo, si el elemento padre tiene un tamaño de fuente de 16px, entonces 1em es igual a 16px, 2em es igual a 32px, y así sucesivamente.

Rems (rem): Una unidad relativa que se basa en el tamaño de fuente del elemento raíz (<html>). Esta unidad proporciona más consistencia en todo el documento, ya que no se ve afectada por el tamaño de fuente de los elementos padre.

Porcentajes (%): Una unidad relativa que se basa en el tamaño de fuente del elemento padre, similar a em. Por ejemplo, si el elemento padre tiene un tamaño de fuente de 16px, entonces 100% es igual a 16px, 150% es igual a 24px, y así sucesivamente.

Por ejemplo:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

En este ejemplo, el tamaño de fuente de todos los elementos <p> (párrafo) se establece en 16px, todos los encabezados <h1> se establecen en 2.5em (que será relativo al tamaño de fuente de su elemento padre), el tamaño de fuente base del documento se establece en 1.4rem, y todos los elementos con la clase small-text tienen un tamaño de fuente del 80% (que será relativo al tamaño de fuente de su elemento padre).

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar la propiedad font-size para dar estilo a estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el font-size a 32px.
Escribe una regla CSS que apunte al elemento <p>. Establece el font-size a 1.2em.
Escribe una regla CSS que apunte al elemento <div>. Establece el font-size a 120%.

Hoja de referencia

La propiedad font-size controla el tamaño del texto dentro de un elemento HTML.

Unidades comunes para tamaños de fuente:

Píxeles (px): Unidad absoluta que especifica el tamaño de fuente en píxeles
Ems (em): Unidad relativa basada en el tamaño de fuente del elemento padre
Rems (rem): Unidad relativa basada en el tamaño de fuente del elemento raíz
Porcentajes (%): Unidad relativa basada en el tamaño de fuente del elemento padre

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Pruébalo tú mismo

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>