En la primera parte de nuestra serie dedicada a la tipografía responsiva explicamos por qué es necesaria una fuente adaptable cuando se diseñan páginas web responsivas. En esta segunda parte nos centramos en los aspectos técnicos y, tras una introducción en la que trataremos el funcionamiento básico del diseño responsivo de páginas webs, proporcionamos instrucciones para la implementación de una tipografía web responsiva mediante comandos CSS.
Dominios web baratos
Dominios tan originales como tus ideas.
Registra tu dominio con IONOS y disfruta de las funciones integrales que tenemos para ofrecerte.
Correo incluidoCertificado SSLAsistencia 24/7Mediante el diseño web responsivo es posible adaptar los contenidos de una página web a las características de las pantallas de cada dispositivo móvil. Por motivos de espacio, la pantalla de un smartphone genera una visualización de los contenidos diferente a la pantalla de un ordenador. Especialmente en lo referente al tamaño y a la ordenación de determinados componentes de una página web, se considera que las columnas, los elementos de navegación, los elementos gráficos y la fuente deberían siempre adaptarse al formato y a la definición de la pantalla utilizada, así como ajustarse al encuadre en uso. Esto es posible gracias al diseño responsivo, que también permite reconocer el dispositivo de entrada (ratón, teclado, pantalla táctil) y la colocación correspondiente de los elementos de navegación.
Una manera muy habitual de aplicarlo es usando una cuadrícula flexible o “grid”, sobre la cual se distribuyen los diferentes elementos que componen una página web. Los ejes verticales y horizontales de una retícula elástica se ajustan a diferentes tamaños de pantalla y resoluciones y, si es necesario, se redistribuyen o se recolocan. Incluso si el tamaño de la ventana del navegador se modifica, los contenidos de la página web se distribuyen de forma óptima a cada encuadre, ventana gráfica o viewport. La base técnica del diseño responsivo la componen HTML5, CSS3 (sobre todo gracias al uso de media queries) y JavaScript. Mediante estos lenguajes de programación es posible también implementar una tipografía adaptable.
Para que un texto se ajuste a cada pantalla es necesario usar una tipografía web adaptable basada en vectores. Para ello, es posible recurrir a fuentes web preestablecidas como las de Google Fonts o Font Squirrel, que ofrecen una gran variedad de ellas de forma totalmente gratuita.
A la hora de escoger una fuente tipográfica es importante tener en cuenta que sea legible y que transmita el efecto deseado. Si en los encabezados es posible permitirse alguna libertad, no es esto lo mejor en el cuerpo del texto principal, ya que una extravagancia excesiva podría dificultar la lectura.
El color de la tipografía debería crear un contraste adecuado con el color de fondo de la página. Si es muy pálido, se corre el riesgo de que no se pueda leer. Si la elección resulta difícil, se puede recurrir a herramientas online como Colour Contrast Check o Contrast-A, con las que podemos comprobar diferentes combinaciones y experimentar con distintos tonos.
Gracias a la introducción de las llamadas media queries en CSS3 se cuenta con una nueva y útil manera de crear fuentes web adaptables. Estos elementos de las hojas de estilo de CSS reconocen ciertas características de un dispositivo de salida como la resolución de la imagen, las dimensiones de la ventana del navegador o el modo de orientación vertical (portrait) u horizontal (landscape) en que se muestran los contenidos. Toda esta información sirve para ajustar la visualización de los textos de una página web al dispositivo que está usando el usuario.
Lograr una tipografía con CSS que sea responsiva no es posible mediante valores de píxel, pues los píxeles son una unidad de tamaño estática. Una fuente adaptable solo se logra mediante la aplicación de una unidad de medida flexible. Es por eso que para determinar el tamaño de una fuente web se usan valores relativos como em, rem o porcentajes.
Los siguientes comandos de CSS permiten la introducción y la organización de tipografía responsiva mediante media queries:
Las siguientes figuras muestran cómo usar estos comandos de CSS.
Los títulos y subtítulos se indican en CSS con el atributo h1, h2, h3 etc., y les podemos otorgar diferentes medidas de representación relativas usando la unidad em. El siguiente ejemplo muestra cómo representar el primer encabezado (h1) en varios tamaños relativos partiendo de un tamaño absoluto (font-size: 100 %).
body {font-size: 100%}
h1 {font-size: 3em;}
@media screen and (max-width: 64em) {
h1 {
font-size: 2.5em;
}
}
@media screen and (max-width: 50em) {
h1 {
font-size: 2em;
}
}
@media screen and (max-width: 30em){
h1 {
font-sitze: 1.5em;
}
}En este ejemplo se han fijado cuatro variantes de representación diferentes para h1, como se muestra en el atributo font-size del h1: 3em, 2.5em, 2em, 1.5em. La amplitud de la ventana gráfica del navegador, que ha sido fijada por su valor máximo (max-width), es la que determina cuál de estos cuatro tamaños se va a utilizar. El ancho ha sido definido con una unidad de medida em. Como previamente no ha sido definido el tamaño del texto, este valor de em se rige por la configuración estándar del navegador, en general 16 píxeles (1em=16px). Con esta medida se pueden calcular los diferentes anchos a los que se ajustará el tamaño de la fuente. Para ello debemos dividir el número de píxeles del ancho de la ventana por 16. En este ejemplo el tamaño del título h1 se rige por 4 anchos de ventana gráfica diferentes:
Obviamente se pueden introducir muchas otras indicaciones que definan el punto de interrupción o Breakpoint a partir del cual cambie el tamaño de la fuente, de manera que se pueda definir mucho más exactamente el tamaño de nuestro título.
En el caso de encabezados largos puede suceder que en pantallas pequeñas se corten y se muestren en dos líneas. En este caso hay que definir también de forma relativa el espacio interlineal. Te lo mostramos en el siguiente apartado.
Como en el caso de los títulos y subtítulos, también se fija un tamaño de fuente para el párrafo (p) como 100%. El grado de la letra también se define aquí con la unidad relativa em. La implementación de tamaños de fuente diferentes, orientadas a los 4 tamaños de ventana gráfica previamente definidos, se muestra en CSS así:
body {font-size: 100%}
p {font-size: 1.5em;}
@media screen and (max-width: 64em) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 50em) {
body {
font-size: 75%;
}
}
@media screen and (max-width: 30em) {
body {
font-size: 50%;
}
}Como en la mayoría de navegadores un valor body de un 100% equivale a 16 píxeles, el tamaño principal de la fuente en el texto (font-size: 1.5em) equivale en nuestro ejemplo a 24 píxeles (1,5 x 16 = 24). El tamaño de la fuente se adapta a la ventana a partir de las indicaciones font-size (90 %, 75 % y 50 %) en relación al body. Es así como, en pocos pasos, se crea una fuente web adaptable.
Pero también en este caso hemos de tener en cuenta un interlineado capaz de responder a las diferentes pantallas. Según principios básicos de la tipografía, el interlineado ha de aumentar en proporción con la longitud de la línea de un texto y, además, debería suponer entre un 120 y un 140 por ciento del tamaño de fuente usado (entre 1.2em y 1.4em). Este valor depende siempre, así, de la fuente utilizada.
La unidad em permite mantener la proporción del interlineado respecto al tamaño de la fuente. Esto se realiza mediante el comando line-height (altura de la línea).
En este ejemplo el interlineado del texto principal es de un 130 por ciento (1.3 em) del tamaño de la fuente y en el caso de los subtítulos de un 120 por ciento (1.2.em).
body {font-size: 100%}
p {
font-size: 1.5em;
line-hight: 1.3 em;
}
h1, h2, h3 {line-height: 1.2em;}También se puede usar la unidad de medida relativa rem (“root em”) en lugar de em para configurar un texto principal reactivo. Rem se rige por el elemento raíz html, y no por cada elemento en particular. De esta manera el tamaño de letra se ajusta en relación con los contenidos completos del elemento raíz, lo que, en especial en el caso de anidaciones complejas de elementos constituye una ventaja frente al uso de em. Los comandos de CSS para una tipografía web responsiva mediante el uso de rem podrían consistir en:
html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5 rem;}
h3 {font-size: 2rem;}Sin embargo, no todas las versiones de los navegadores soportan la unidad rem. En el caso de navegadores como Firefox, Chrome, Safari, Edge u Opera no debería suponer un problema, ya que sus versiones antiguas han sido superadas hace tiempo y no deberían estar en uso, pero en el caso de versiones antiguas del Explorer de Microsoft sí, ya que solamente soporta unidades rem a partir de la versión 9. Si también se quiere garantizar una buena visualización para versiones antiguas de los navegadores, hay que añadir una variante alternativa que funcione mediante píxeles, por ejemplo, así:
html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}
h1 {
font-size: 48px;
font-size: 3rem;
}
h2 {
font-size: 40px;
font-size: 2.5rem;
}
h3 {
font-size: 32px;
font-size: 2rem;
}La regla viewport constituye otra manera de crear tipografía adaptable para el diseño responsivo de una página web. Viewport define en diseño web el tamaño de la ventana del navegador −en castellano se conoce como ventana gráfica− y permite crear un contenido que se adapte a cada tamaño de ventana gráfica, aventajando en rapidez al uso de los media queries.
Mediante las unidades de CSS vw (“viewport width“) y vh (“viewport height“) fijamos el ancho y el alto en relación con el tamaño de la ventana gráfica. Disponemos, asimismo, de las unidades vmax (“viewport maximum”) y vmin (“viewport minimum”), dos unidades que fijan el tamaño, bien en relación con el ancho o con el alto de la ventana gráfica. Decidir cuál de las dos se usa como base para el ajuste dependerá de cada una de estas unidades: vmin define el valor más bajo y vmax el más alto. Las cuatro unidades viewport consisten en datos porcentuales (por ejemplo, 10vw = 10 por ciento del ancho de la ventana), así que en un viewport de 640 x 480 píxeles vmax tomaría como referencia los 640 píxeles por ser el valor más alto –en una ventana de este tamaño 10vmax = 64px (640:10).
Esta unidad tampoco es soportada por todos los navegadores. Aquí obtendrás una visión general.
La unidad de medida viewport permite adaptar encabezados y el texto principal y su implementación es parecida a como se usaban las unidades rem en las media queries, ya que ambas unidades de medida son relativas. La siguiente figura muestra cómo crear un texto principal (p) y unos encabezados (h1, h2, h3) responsivos:
p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}Mediante la regla font-size: 2vmin se determina que las letras del texto principal (p) siempre supongan un 2 por ciento del ancho o alto de ventana (dependiendo de cuál sea el valor más bajo). De esta manera, nos aseguramos de que la letra mantenga la misma proporción también en los encuadres más pequeños.
Estas indicaciones de CSS garantizan que la fuente del texto y los tres encabezados estén siempre en relación, sin importar el tamaño de la ventana del navegador.
Crea tu página web con IONOS
Con asesor personal incluido, IONOS MyWebsite es la solución completa para una página web profesional.
Certificado SSLDominio gratisAsistencia 24/7Como hemos visto, es posible diseñar una tipografía web adaptable solo con unos pocos comandos de CSS. Pero antes de publicar una página web sería conveniente probar el efecto de su implementación en la mayor cantidad de dispositivos o de emuladores y, dado el caso, introducir las mejoras convenientes.
Usar media queries o la etiqueta de CSS viewport depende en muchos casos de la situación y, en última instancia, de las preferencias individuales. Las media queries son un poco más lentas que las unidades viewport en cuanto a la velocidad de escalación de la fuente, pero, por el contrario, son soportadas por más navegadores antiguos. Y usando element queries o un pluginjQuery se amplían las posibilidades de generar tipografía web responsiva.
Todos estos métodos satisfacen las exigencias de una tipografía responsiva que se adapte siempre al encuandre visible, lo cual depende de la modificación relativa del tamaño de la fuente y del interlineado, así como de la aplicación de fuentes web vectorizadas. La segunda parte de nuestra serie sobre tipografía web en el diseño responsivo muestra dónde conseguir fuentes responsivas gratuitas y cómo anidarlas en una página web.
En Internet se encuentran gran cantidad de textos con diferentes tipos de letra. La expansión del diseño web responsivo también influye en la tipografía web, ya que la representación de la letra debería ajustarse siempre a la pantalla del dispositivo que se usa para asegurar la legibilidad de los contenidos. Una tipografía capaz de responder a estos ajustes debe ser flexible y usar las fuentes que...
Con el término web safe fonts se hace referencia a la tipografía que se puede usar en Internet sin problemas. La clave es plantearse el número de navegadores en los que se puede visualizar la webfont seleccionada. ¿Por qué no paran de crecer las web safe fonts? ¿A qué se debe la importancia de la tipografía web en el éxito de una página web corporativa?
Las icon fonts permiten integrar pictogramas vectoriales en una página web. A diferencia de los tradicionales gráficos en mapa de bits, los iconos vectoriales tienen la ventaja de ser escalables sin perder su calidad. Además, la integración a través de CSS (Cascading Style Sheets) ofrece amplias y sencillas posibilidades de configuración dentro del mismo código fuente. Por otro lado, muchos...
La gran oferta de fuentes y familias tipográficas en Internet es cada vez mayor, incluyendo aquellas de código abierto que pueden ser descargadas de forma gratuita. La mayoría de estas fuentes web son adaptables, lo que las hace perfectas para su implementación en páginas web responsivas, es decir, aquellas que adaptan su visualización a diferentes dispositivos. Conoce algunas de las plataformas...
En general, los iconos se integran en HTML por medio de clases CSS y este principio puede visualizarse en una de las fuentes de icon fonts más utilizadas, es decir, Font Awesome. Esta contiene más de 600 pictogramas vectoriales y está concebida como una fuente de código abierto que llama la atención por su manejo sencillo y por las actualizaciones regulares. El pack de instalación contiene un...
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver planes