Ir al contenido principal

Theme Notable Episode One

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.

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.
En lo personal, cuando un sitio tiene páginas con una gran cantidad de contenido escrito (como ésta, por ejemplo), yo prefiero manejarme con números por sobre el promedio enunciado —entre 65 y 90 caracteres por línea, por ejemplo—.

El tema es muy amplio, así que como es mi costumbre dejo a mano algunas lecturas que tomé como fuente informativa:

Lecturas recomendadas:

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:
anchos de linea en 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.
Será posible entonces unir los dos gráficos anteriores, arrojando una nueva gráfica que estará asociada, eso sí, a la fuente Montserrat en particular:
theme Notable con fuente Monserrat
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

Entradas más populares de este blog

Notable Ep. One > Epilogue

La utilización de una plantilla oficial para el diseño de un blog en la plataforma Blogger siempre presentó una ventaja para quienes quieran personalizarlas sin tener grandes conocimientos de diseño web: esto se sigue manteniendo para los cuatro nuevos themes responsives presentados en 2017, incluyendo al theme Notable que estamos analizando. En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho theme para un rango de visualización intermedio (680 a 968px). NOTA: en este blog han sido tratados, en post escritos en junio de 2016   , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban layouts de tipo responsive como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un theme del 2017 específico, el theme Notable. Una breve recapitulación Estuvimos tratando en el post anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto pr

Ajustes finos en la plantilla Blogger (III)

Hacer ajustes de diseño en la plantilla Blogger es un proceso que implica una serie de pasos, de los cuales vimos los vinculados a la identificación de las etiquetas HTML a las que se les aplicarán los cambios de estilo CSS. Efectuar esos cambios desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger es relativamente sencillo (para quien cuenta con conocimientos en CSS), quizás con una única excepción: cuando queremos emplear una tipografía desde servicios de fuentes online…

Configuración del Blog: ¿público o privado? (II)

En la entrada anterior hablamos rápidamente sobre la clasificación de los usuarios de un blog en Blogger según su rol (administrador, autor y visitante/lector). También (y como el título de estas entradas lo sugiere) hay otra clasificación —esta vez de los blogs— según un aspecto funcional básico: públicos o privados. Nos centraremos a continuación en hablar sobre los blogs privados y, especialmente, en su utilidad dentro del ámbito educacional.