Tras la decisión de adoptar uno de los nuevos responsives themes para este blog, y luego de un primer análisis evaluativo de las 4 alternativas ofrecidas por Blogger, el theme "ganador" —con fallo dividido— finalmente estará basado en la plantilla Notable.
En la presente entrada trataremos de uno de los primeros aspectos a personalizar, que surgen de un análisis —ahora más detallado— del theme funcionando con los contenidos previos escritos para este blog: hablaremos de la manera en que se implementan los tamaños tipográficos en la plantilla Notable.
El theme Notable viene promocionado como aquel de los 4 responsive themes de Blogger que privilegia particularmente el contenido escrito de un blog. Esta opinión quizás esté sustentada por sus características: diseño despojado usando colores planos, estructura o layout de columna única para todas las resoluciones de pantalla, y tamaños predeterminados de fuente de cuerpo —la fuente principal del contenido— relativamente grandes (especialmente en entornos desktops).
Yendo a un punto concreto: el tamaño de fuente predeterminado para la visualización en grandes resoluciones ( > 968px ) es de 20px, y de 14px en resoluciones menores. Del análisis surge que hay un rango de resoluciones —entre 600px y 960px aproximadamente— en donde convendría disponer de un tamaño de texto de cuerpo de un valor intermedio (16 o 17px, por ejemplo); ya veremos por qué.
NOTA: en la misma franja de entre 600 y 960 px aparece otro “inconveniente”, esta vez entre la relación de tamaños de imagen de sumario o resumen, y el texto correspondiente: las primeras toman una preponderancia normalmente injustificada. Pero tal cuestión no formará parte de lo tratado en este post.
Pero antes de proponer cambios al comportamiento tipográfico que trae de forma predeterminada el theme Notable, conviene dejar explicitadas algunas bases teóricas (me gusta más la idea de mencionarlas como recomendaciones) que nos van a servir como lineamientos para nuestra propuesta.
Es aquí donde el poder de las estadísticas viene en nuestro auxilio, y permite acercar algunos valores numéricos que reflejen las impresiones de un “lector promedio”.
Consultando diversas fuentes encontraremos algunas ligeras diferencias en los valores recomendados, pero para lo que sigue en nuestro trabajo nos manejaremos con los siguientes valores orientativos (recordando que trabajamos con textos a columna única):
El tema es muy amplio, así que como es mi costumbre dejo a mano algunas lecturas que tomé como fuente informativa:
Pero dado que el diseño web responsive tiene que ver con adaptar los contenidos a los distintos tipos de resolución de pantallas, será necesario explicitar los valores de estos anchos de línea en función del ancho de visualización que se muestra en el navegador —generalmente pantalla completa— para la plantilla Notable.
¿Cómo hacer esto? Podemos ayudarnos con las herramientas de desarrollador web que traen los navegadores, o explorar los estilos en cascada escritos en la plantilla .xml del theme —yo usé una mezcla de ambas cosas—.
Y como una imagen vale más de mil palabras (cero originalidad) dejo a mano un gráfico donde se muestra como cambian los anchos de línea y el tamaño de la fuente de cuerpo, en función del ancho de viewport, para el theme Notable:
NOTA: el análisis mostrado está realizado sobre las páginas del sitio usando la plantilla Notable sin ningún tipo de personalización.
Cada tipo de letra tiene un cierto tipo de variable de proporción; podríamos simplificarlo diciendo: existirá una relación entre altura y anchura de las letras, que hacen posible clasificarlas, por ejemplo, como condensadas, normales o expandidas.
Es entonces lógico concluir que la cantidad de caracteres por línea —para un ancho de línea determinado— va a variar de acuerdo al tipo de letra empleado: van a entrar más letras si son de tipo condensado, van a entrar menos si son de tipo expandido (o wide). Por eso es importante conocer la fuente con que se va a trabajar.
Ya con una fuente definida, y luego de un trabajo de relevamiento puramente empírico de la cantidad de caracteres por línea en diversas situaciones de visualización, pude llegar a los siguientes valores promedio:
NOTA: a fin de facilitar la interpretación, superpuse al gráfico una banda coloreada señalando los valores recomendados mencionados previamente.
Vamos a dejar para la próxima entrada un primer intento de modificación que, de la manera más simple posible, trate de compensar la respuesta del theme dentro de la zona mencionada.
En la presente entrada trataremos de uno de los primeros aspectos a personalizar, que surgen de un análisis —ahora más detallado— del theme funcionando con los contenidos previos escritos para este blog: hablaremos de la manera en que se implementan los tamaños tipográficos en la plantilla Notable.
Adaptabilidad Tipográfica del Theme Notable
Una vez que realicé el anunciado cambio a la plantilla Notable para este blog, de personalizar mínimamente algunos aspectos visuales, de ver que gadgets previos funcionaban o no, etc., el primer paso lógico y relevante fué chequear la correcta visualización de los contenidos correspondientes a los viejos posts, ahora bajo este nuevo "look", considerando toda la variedad de resoluciones de pantalla (celulares, tablets, desktops).El theme Notable viene promocionado como aquel de los 4 responsive themes de Blogger que privilegia particularmente el contenido escrito de un blog. Esta opinión quizás esté sustentada por sus características: diseño despojado usando colores planos, estructura o layout de columna única para todas las resoluciones de pantalla, y tamaños predeterminados de fuente de cuerpo —la fuente principal del contenido— relativamente grandes (especialmente en entornos desktops).
Yendo a un punto concreto: el tamaño de fuente predeterminado para la visualización en grandes resoluciones ( > 968px ) es de 20px, y de 14px en resoluciones menores. Del análisis surge que hay un rango de resoluciones —entre 600px y 960px aproximadamente— en donde convendría disponer de un tamaño de texto de cuerpo de un valor intermedio (16 o 17px, por ejemplo); ya veremos por qué.
NOTA: en la misma franja de entre 600 y 960 px aparece otro “inconveniente”, esta vez entre la relación de tamaños de imagen de sumario o resumen, y el texto correspondiente: las primeras toman una preponderancia normalmente injustificada. Pero tal cuestión no formará parte de lo tratado en este post.
Pero antes de proponer cambios al comportamiento tipográfico que trae de forma predeterminada el theme Notable, conviene dejar explicitadas algunas bases teóricas (me gusta más la idea de mencionarlas como recomendaciones) que nos van a servir como lineamientos para nuestra propuesta.
¿Cuál es la cantidad ideal de caracteres por líneas?
Este dilema se debe haber planteado a no mucho después de la misma invención de la imprenta… y desde ya que no encontraremos una respuesta universal al mismo. Factores tan distintos como las características de la letra empleada, el medio desde el cual estemos leyendo, percepciones particulares de cada individuo, etc, sin duda inciden sobre lo que sería considerado un texto adecuadamente legible.Es aquí donde el poder de las estadísticas viene en nuestro auxilio, y permite acercar algunos valores numéricos que reflejen las impresiones de un “lector promedio”.
Consultando diversas fuentes encontraremos algunas ligeras diferencias en los valores recomendados, pero para lo que sigue en nuestro trabajo nos manejaremos con los siguientes valores orientativos (recordando que trabajamos con textos a columna única):
- Escritorio: 50 a 75 caracteres por línea, incluyendo espacios; lo ideal es andar cerca de los 66 caracteres por línea.
- Dispositivos móviles: 35 a 50 caracteres por línea.
El tema es muy amplio, así que como es mi costumbre dejo a mano algunas lecturas que tomé como fuente informativa:
Lecturas recomendadas:
- Microsiervos > ¿Cuál es el número óptimo de caracteres por línea para que un texto sea bien legible en la web?
- imaginanet > Diseño web orientado a la legibilidad del texto
- OERT > Tipografía y proporciones
Anchos de líneas en el theme Notable
El factor que nos resta conocer para poder seguir con nuestra propuesta de cambio tipográfico, es saber los tamaños de anchos de línea destinados al cuerpo principal de texto en este theme.Pero dado que el diseño web responsive tiene que ver con adaptar los contenidos a los distintos tipos de resolución de pantallas, será necesario explicitar los valores de estos anchos de línea en función del ancho de visualización que se muestra en el navegador —generalmente pantalla completa— para la plantilla Notable.
¿Cómo hacer esto? Podemos ayudarnos con las herramientas de desarrollador web que traen los navegadores, o explorar los estilos en cascada escritos en la plantilla .xml del theme —yo usé una mezcla de ambas cosas—.
Y como una imagen vale más de mil palabras (cero originalidad) dejo a mano un gráfico donde se muestra como cambian los anchos de línea y el tamaño de la fuente de cuerpo, en función del ancho de viewport, para el theme Notable:
NOTA: el análisis mostrado está realizado sobre las páginas del sitio usando la plantilla Notable sin ningún tipo de personalización.
Puntos a destacar:
- En rojo está graficado el tamaño de fuente, con sus 2 valores: hasta 968px de ancho de viewport el theme usa 14px, y salta a 20px de ahí en adelante.
- El layout funciona de manera que en el primer rango de valores el ancho de línea aumenta proporcionalmente al aumento de ancho de viewport —ya que el texto ocupa todo el ancho de pantalla, usando 2 márgenes laterales de 24px—; esto implica que a 968px se estará superando fácilmente los 130 caracteres por línea.
- Entre 969px y 1168px el ancho de línea queda fijo en 920px con el tamaño de fuente ya en 20px: estamos hablando de más de 90 caracteres por línea, seguramente.
- Un nuevo cambio en el layout hace bajar el ancho de línea hasta 629px (¡casi 300px!) a partir de 1169px, ancho de línea que comenzará a aumentar posteriormente (igual que en un principio) a la par del aumento del viewport; el límite de esta zona de aumento, usando la configuración predeterminada del theme, estará en 1280px.
- El último tramo de análisis el ancho de línea queda fijo en 740px (unos 75 caracteres por línea, o aún más en tipos de letras angostos).
Un caso de análisis concreto, con una fuente concreta
Para afinar el análisis previo conviene que tengamos definida una fuente de cuerpo de texto: en mi caso tengo pensado el uso de la fuente Montserrat —obra de una diseñadora gráfica argentina, dicho sea de paso— como fuente para el texto principal del blog. Pero, ¿por qué es importante trabajar sobre una fuente determinada?Cada tipo de letra tiene un cierto tipo de variable de proporción; podríamos simplificarlo diciendo: existirá una relación entre altura y anchura de las letras, que hacen posible clasificarlas, por ejemplo, como condensadas, normales o expandidas.
Es entonces lógico concluir que la cantidad de caracteres por línea —para un ancho de línea determinado— va a variar de acuerdo al tipo de letra empleado: van a entrar más letras si son de tipo condensado, van a entrar menos si son de tipo expandido (o wide). Por eso es importante conocer la fuente con que se va a trabajar.
Ya con una fuente definida, y luego de un trabajo de relevamiento puramente empírico de la cantidad de caracteres por línea en diversas situaciones de visualización, pude llegar a los siguientes valores promedio:
- para un texto en fuente Montserrat de tamaño 14px, el ancho promedio de un caracter es de aproximadamente 7px.
- para un texto en fuente Montserrat de tamaño 20px, el ancho promedio de un caracter es de aproximadamente 10px.
NOTA: a fin de facilitar la interpretación, superpuse al gráfico una banda coloreada señalando los valores recomendados mencionados previamente.
Puntos a destacar:
- Tal como fue anticipado al comienzo del post, existe una zona especialmente crítica (a partir de 680px y hasta 968px) en donde los valores de caracteres por línea se escapan de lo adecuado para una buena lectura.
- De la forma de la gráfica se desprende, de forma más clara, que corregir de manera efectiva la cuestión que estamos tratando necesitará de algo más que del agregado y/o cambio de valores en los tamaños de fuente predeterminados.
Vamos a dejar para la próxima entrada un primer intento de modificación que, de la manera más simple posible, trate de compensar la respuesta del theme dentro de la zona mencionada.
Comentarios