CSS 3. Unidades de medida de fuentes

©Jaime Peña Tresancos, 2013

**Twitter: @jpt219**

LinkedIn: es.linkedin.com/pub/jaime-peña-tresancos/28/677/696

Para fijar las dimensiones de las fuentes de textos, disponemos de un buen grupo de unidades de medida estandarizadas en CSS 3.

Si bien todas ellas pueden sernos adecuadas en un momento dado, no todas lo son para todos los casos. En el presente artículo trataremos de exponer cuales son y comentar algunas orientaciones acerca de sus usos y recomendaciones.

Finalizaremos con un ejemplo/utilidad completa de asignación de unidades, para comprobación de su apariencia en pantalla.

En concreto trataremos:

• Cómo fijar las dimensiones de las fuentes en CSS –y con JavaScript-
• Las fuentes escalables
• Unidades de medida absolutas y relativas
• Consideraciones acerca de diversas unidades
• Una utilidad de comprobación de medidas y unidades de fuentes

Propiedad font-size

Se puede fijar el tamaño del texto mediante CSS utilizando la propiedad font-size. Todo lo referente a su sintaxis se puede encontrar en la siguiente dirección URL:

https://developer.mozilla.org/es/docs/CSS/font-size

En lo que a nosotros respecta, para el resto del capítulo, la sintaxis a emplear es:

font-size: valor;

La cuestión que abordaremos será, precisamente, qué unidades podremos utilizar y que ventajas y desventajas podremos esperar de ellas.

Cuando se trabaja con código JavaScript, utilizaremos el método style aplicado a la propiedad fontSize de la forma:

<elemento>.style.fontSize = valor;

Por ejemplo, en el código siguiente:

document.getElementById("A").style.fontSize = 1.2em;

En donde seleccionamos el elemento identificado por un ID y le asignamos un valor de tamaño de 1.2em.

En lo que sigue:

document.getElementsByClassName("poesia")[0].style.fontSize = 1.2em;

Hemos acotado un área por su nombre de clase, en concreto el primer elemento de texto –identificado por [0]- al que se le ha asignado la clase poesia.

Fuentes escalables

Fuentes escalables son aquellas que permiten ser expuestas en diferentes tamaños sin pérdida de calidad en su representación.

Una fuente escalable está definida como un conjunto de vectores que sirven para diseñar el vuelo la fuente, no como un mapa de bits que contiene la forma ya construida.

Entre los tipos de fuentes escalables se encuentran las PostScript de Adobe, las TrueType de Apple/Microsoft y las OpenType de Adobe/Microsoft.

Unidades absolutas y relativas

Para la definición del tamaño de una fuente escalable disponemos de diversas unidades de medida estándar en CSS 3, que por conveniencia podemos dividir en:

• Unidades absolutas: Consisten en unidades de medida físicas y tienen una relación fija y bien definida unas relativas a otras. Son unidades no escalables, a excepción del porcentaje, que estrictamente hablando no sería una unidad absoluta estándar, aunque así es generalmente considerada.
• Unidades relativas: Especifican un tamaño relativo a otra longitud externa. Las unidades relativas son fácilmente escalables.

Para una descripción completa y precisa de todo lo referente a unidades de medida en general en CSS 3, nos remitimos a:

http://www.w3.org/TR/css3-values/

La tabla que sigue recoge las unidades de medidas absolutas:

La tabla que sigue recoge las unidades de medidas relativas:

Algunas consideraciones acerca de las unidades

Si bien el comentario más general ya lo hemos expuesto con anterioridad, las fuentes relativas son escalables y las absolutas son, lo exponemos ahora, más adecuadas para las tareas de impresión, repasaremos someramente algunos aspectos particulares:

• Respecto a los puntos (pt), picas (pc), pulgadas (in), centímetros (cm) y milímetros (mm), en todos los casos su utilización para mostrar texto en pantalla no es lo más ideal –ni fueron pensadas para ello-, dado que los ordenadores sólo son capaces de aproximar rudimentariamente las medidas físicas a la ventana del monitor. Por el contrario son perfectas para definir fuentes para impresión.
• Los pixeles (px) son sin duda la unidad más comúnmente utilizada, sin embargo distan de ser lo más adecuado en un buen diseño. Los textos que han sido fijados en pixeles no pueden ser redimensionados por el usuario en los navegadores. La traslación de pixeles a papel en la impresión da resultados erráticos e impredecibles, intentando simular las dimensiones de un pixel.
• En CSS 3, se trabaja con el denominado pixel de referencia, que equivale a 1/96 de pulgada, aproximadamente 0,26mm, que obvia muchos de los inconvenientes antes descritos.
• Los ems (em) y exes (ex), tanto en uno como en otro caso, nos encontramos con referencias relativas, especialmente adecuadas para la asignación de fuentes en pantalla; los ems han ganado mucha popularidad y son una unidad muy recomendable. En el momento presente, la unidad ex no está plenamente soportada por los navegadores, muchos de los cuales, simplemente, hacen una valoración aproximada de su tamaño.
• EL porcentaje (%), permite el redimensionamiento sencillo de las fuentes en pantalla. Un valor del 100% significa el tamaño de la fuente actual, típicamente 1em o 12pt. Obviamente, es una medida adecuada para visualizaciones en pantallas y mucho menos para impresión.

Una discusión interesante acerca de algunas unidades puede leerse en la dirección URL:

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

NOTA: Las referentes a unidades físicas no son especialmente adecuadas para definición en pantalla, pero sí son ideales para impresión.

Respecto a gd, no suele ser usada para la definición de fuentes, más bien lo es para líneas, gradillas y similares; puede encontrar toda la definición completa del denominado CSS Line Grid Module en la siguiente dirección URL:

http://dev.w3.org/csswg/css-line-grid/#grid-length-unit

Las unidades vh, vw, vmin y vmax son las denominadas Viewport Units, todas ellas redimensionables dinámicamente, eso es, que cambiarán de aspecto conforme cambie el tamaño de la ventana de visionado del dispositivo.

Son especialmente adecuadas para diseños en pantalla y no deberían utilizarse nunca para procesos de impresión. En las imágenes que siguen se muestran algunos ejemplos de su comportamiento.

Para una referencia precisa de toda ellas acúdase a la siguiente dirección URL:

http://dev.opera.com/articles/view/css-viewport-units/

Aspecto inicial.

Aspecto después de reducido el tamaño de la ventana verticalmente.

Aspecto inicial.

Aspecto después de reducido el tamaño de la ventana verticalmente. No se aprecian cambios, dado que hemos fijado como unidad vw y el ancho no ha sido afectado.

Utilidad de comprobación de unidades de fuentes

En el presente apartado, mostraremos el desarrollo de una utilidad que nos ayudará a comprobar en pantalla los efectos de los cambios de unidades y tamaños de las fuentes de textos.

En ella, sobre un texto predeterminado, introduciremos el tamaño deseado y la unidad de la fuente y se nos mostrará dicho texto con esas dimensiones.

Esencialmente, el código tiene las siguientes características:

• Primero definimos los estilos en que se mostrarán diverso de los apartados del texto, en concreto la poesía que utilizamos para comprobar los tamaños de fuente y el correspondiente a las referencias de compatibilidad y derecho de copia.

• Seguidamente va el código de la función de cambio de tamaño de fuente –véase más abajo-

• Ya en el cuerpo del documento, encontramos dos primeras áreas de texto dentro de una etiqueta <div>:

  Lo primero es el título de una poesía.

  Lo segundo, dentro de una etiqueta <p>, es el cuerpo de texto que servirá para probar los tamaños de fuente.

  Le sigue una entrada de textos para tomar el dato numérico del tamaño de la fuente.

  Una lista de selección de la unidad del tamaño de la fuente.

  Un botón de comando que al ser pulsado llama a la función aplicar().

  En dicha función:

  Se toma el valor actualmente contenido en la entrada de textos con el valor numérico.

  Igualmente se toma el valor actualmente seleccionado en la lista de selección con la unidad.

  Se fija el estilo de tamaño mediante el método de JavaScript correspondiente -style.fontSize-, con los valores de tamaño y unidad correspondientes.

  Nótese que ilustramos dos modos de aplicarlo, uno con identificación mediante ID y el otro mediante class.

  A continuación siguen una serie de elementos decorativos que muestran su conformidad con los estándares HTML 5 y CSS 3. Juntamente con la referencia del derecho de copia.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS3 - font-size</title>
    <style>
        p.poesia {
            font-style: italic;
        }

        p.center {
            text-align: center;
        }
    </style>

    <script>
        function aplicar() {
            // document.getElementById("A").style.fontSize = document.getElementById("V").value + document.getElementById("U").value;
            document.getElementsByClassName("poesia")[0].style.fontSize = document.getElementById("V").value + document.getElementById("U").value;
        }
    </script>

</head>
<body>

    <div style="position: relative; top: 10px; left: 150px; margin: 20px">
        <h2>Un soneto me manda hacer Violante
            <br />
            <span style="font-size: smaller">de Lope de Vega</span></h2>

        <p id="A" class="poesia">
            Un soneto me manda hacer Violante,<br />
            que en mi vida me he visto en tal aprieto;<br />
            catorce versos dicen que es soneto:<br />
            burla burlando van los tres delante.<br />
            <br />
            Yo pensé que no hallara consonante<br />
            y estoy a la mitad de otro cuarteto;<br />
            mas si me veo en el primer terceto<br />
            no hay cosa en los cuartetos que me espante.<br />
            <br />
            Por el primer terceto voy entrando<br />
            y parece que entré con pie derecho,<br />
            pues fin con este verso le voy dando.<br />
            <br />
            Ya estoy en el segundo, y aún sospecho<br />
            que voy los trece versos acabando;<br />
            contad si son catorce, y está hecho.<br />
        </p>
    </div>

    <hr />
    Tamaño de fuente:
    <input id="V" type="text" />
    <select id="U">
        <option value="">Unidades</option>
        <option value="" style="color: red">ABSOLUTAS:</option>
        <option value="%">%</option>
        <option value="cm">cm</option>
        <option value="mm">mm</option>
        <option value="pc">pc</option>
        <option value="pt">pt</option>
        <option value="" style="color: red">RELATIVAS:</option>
        <option value="ch">ch</option>
        <option value="em">em</option>
        <option value="ex">ex</option>
        <option value="gd">gd</option>
        <option value="px">px</option>
        <option value="rem">rem</option>
        <option value="vh">vh</option>
        <option value="vw">vw</option>
        <option value="vmin">vmin</option>
        <option value="vmax">vmax</option>
    </select>
    <input type="button" onclick="aplicar()" value="Aplicar" />

    <p class="center">
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border: 0; width: 88px; height: 31px"
                src="http://jigsaw.w3.org/css-validator/images/vcss"
                alt="¡CSS Válido!" />
        </a>

        <a href="http://www.w3.org/html/logo/">
            <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png"
                width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics"
                title="HTML5 Powered with CSS3 / Styling, and Semantics">
        </a>

        <span style="font-size: xx-small">&copy;Jaime Peña Tresancos, 2013</span>
    </p>

</body>
</html>

Conclusiones

En el presente artículo hemos visto varios aspectos de las unidades de medida de fuentes, desde cuáles podemos utilizar hasta su adecuación para diversos cometidos e idoneidades. También hemos desarrollado una aplicación/utilidad de comprobación de unidades en pantalla.

Esperamos que lo aquí expuesto les haya servido de ayuda en su trabajo y no dejen de preguntar cualquier duda que les pudiese surgir. Hasta la próxima, tengan unas provechosas sesiones de programación.

©Jaime Peña Tresancos, 2013

**Twitter: @jpt219**

LinkedIn: es.linkedin.com/pub/jaime-peña-tresancos/28/677/696

| Página de inicio |Artículos Técnicos | Comunidad