Tecnología

Tipografías y el balance entre rendimiento y diseño web

Si lleváis tiempo leyéndome seguramente sepáis ya que una de mis pequeñas pasiones es el diseño y el rendimiento web. Tuve que ahondar en estos temas profesionalmente para una etapa profesional anterior y me quedé con la copla. Tanto que ahora tengo una opinión muy fuerte sobre lo que creo que un sitio web debe y no debe dar en este tipo de materias.

Esa problemática la he trasladado también a Incognitosis, claro. El rediseño que puse en marcha hace ya dos años y medio sigue manteniendo su validez, pero eso no implica que no haya apartados que mejorar.

Uno de ellos es difícilmente atacable. Resulta que cuando me puse a probar rediseños tuve claro que quería una tipografía muy especial. El problema es que las tipografías “seguras” (safe web fonts) que se usan por defecto en la mayoría de navegadores son efectivas pero impersonales, y yo buscaba un toquecito de personalidad.

Eso me acabó decidiendo a usar Linux Libertine, una tipografía con guiño incluido (para eso soy linuxero de corazón, aunque use Windows todo el día) que me pareció perfecta para ese rediseño. ¿Qué problema hay? Pues que como buena webfont, su uso condena (un poco el rendimiento).

Eso se ve rápidamente cuando paso alguna prueba de rendimiento rápida como WebPageTest en la que la cascada de elementos y recursos que se van cargando deja claro que cualquier webfont impone una carga inadmisible si buscas rendimientos óptimos. Da igual que yo use Redis como sistema de caché y que la carga de la página (menos de 1MB normalmente) sea asumible y se realice en un par de segundos. El caso es que lo de las tipografías web se nota. Pesa. Durante todo este tiempo he preferido obviar el problema y sacrificar tiempo de carga y tamaño de página para lograr un Incognitosis que en mi opinión está bastante logrado. Esta mañana, no obstante, un artículo sobre rendimiento web me ha recordado que debería volver a repasar el asunto y quizás buscar alternativas.

Lo ideal, claro, es tirar de tipografías seguras y estándar. En sitios como CSS Font Stack tienen una buena relación de lo seguras que son esas fuentes (con una estimación de lo mucho que están soportadas en Windows y macOS), y de las que vi disponibles en el catálogo de serifas solo me parecía adecuada Garamond, con un 86,47% de soporte en Windows y, eso sí, un pobre 49,91% en macOS, bastante bajito. Podría ir a una Times New Roman mucho más segura, como ocurre con Georgia o Palatino, pero ninguna de ellas me acaba de convencer en las pruebas preliminares. De hecho he puesto un rato Garamond y si habéis accedido a Incognitosis de nuevas hoy habréis visto que la cosa cambiaba bastante:

Si pincháis en la imagen podréis verla a tamaño completo. A la izquierda, Garamond. A la derecha Linux Libertine.

La verdad es que de primeras choca, porque con una Garamond 26px/36px el texto  está casi como medio borrado frente a una mucho más consistente Linux Libertine 22px/32px. No se lee mal, y de hecho la lectura es como más “ligera”, por decirlo de algún modo, pero no sé si me convence. Y aquí, claro, es donde llega la pregunta. Creo que voy a dejar Linux Libertine, pero ¿cómo veis el cambio?

Actualización: los experimentos, mejor con gaseosa. Volvemos a Linux Libertine (puede que tarde un poco en refrescar aspecto por caché). Quizás más adelante vuelva a probar cosas de este estilo con algo más de calma.


Incognichollos

Esta es una selección con las mejores ofertas tecnológicas actualizadas casi diariamente, como expliqué aquí. Aunque estés en un post “antiguo” las ofertas son de última hora, los Incognichollos los actualizo aparte. Aprovecha, que no suelen durar mucho tiempo 🙂

  • iPhone SE 16 GB: si os gustan los teléfonos compactos, este es el mejor de la historia. Los 16 Gb se quedan cortos, pero este precio es brutal, aunque sea el modelo rosa dorado. 349 euros en eBay.
  • Portátil Yepo 737S: a ver, la marca es cero conocida y no da demasiada confianza, pero es que estamos ante un Intel Atom Z8350 (como el del Chuwi Hi12), pantalla 1080p de 13,3 pulgadas, y todo por 164,30 euros en GearBest con el cupón YEPO737S. Poco que perder, ¿no creéis?
  • ZTE Axon 7: el teléfono que elegiría si quisiera escuchar mucha música en él. Snapdragon 820, 4 GB de RAM, 64 Gb de capacidad ampliables, gran pantalla. Fantástico en todo (quizás un pelín por debajo en cámara que los top) y a precio chollo: 346,88 euros en GearBest con el cupón ZAXON7
  • LG Watch Urbane: este es mi reloj inteligente, así que puedo recomendarlo con criterio, sobre todo a este precio: 169 euros en Amazon. Elegante y funcional, aunque no tiene GPS así que como reloj deportivo no cumple.
  • Rasbperry Pi 3: el miniPC por excelencia, que sigue destacando por integrar WiFi y por ser perfecto para todo tipo de pequeños (y grandes experimentos). Está de rebajas, y cuesta 36,50 euros en GearBest con el cupón ABDIYPIES. Si preferís una alternativa más rápida y segura, en Amazon está a 39,90 euros, que tampoco está nada mal.
  • Huawei Mate 9: telefonazo que analicé con muy buenas sensaciones. Kirin 960, 4 GB de RAM, 64 GM de capacidad (ampliables), súper pantalla de 5,9 pulgadas (en un cuerpo compacto) y una doble cámara muy, muy llamativa. Está de oferta, 529 euros en GearBest.
  • Chuwi HiBox: como sabéis lo tengo desde hace tiempo. Llega con un Intel Atom x5-8350, 4 GB y 64 GB de capacidad además de tener Windows 10 y Android 5.1 preinstalado.  Está además a muy buen precio: 114,10 euros en GearBest con el cupón GBHIBOX4.
  • Android TV Mini M8S II: con el ya conocido procesador Amlogic S905X, 2 GB de RAM y 8 GB de capacidad, uno de los mejores TV Box del momento, dicen. A disfrutar (más) de la tele, por 36,50 euros en GearBest.
  • Samsung Galaxy S7: yo me lo compré hace un par de meses, qué os voy a decir. Una maravilla que ahora ya está a precios muy llamativos: 459 euros en Amazon. Tenéis que ir a “Nuevos desde 459 euros” para que os salgan las tiendas que lo venden a esos precios.
  • Xiaomi Air 13: el portátil más chollo de los últimos tiempos vuelve a estar a precio destacado. Ya sabéis, no tiene desperdicio y es una gran opción si buscáis portátiles de esta gama. Está a 611,60 euros en GearBest con el cupón XAIR13s.
  • Disco duro externo Maxtor 1 TB: Backups al poder, chicos. 39,44 euros en Amazon (43% dto.). 2 TB a 76,09 euros en Amazon (29% dto.). Si la marca Toshiba os da más confianza, el modelo Canvio Basics de 1 TB está a 52,50 euros (17% dto.) y el de 2 TB a 76,33 euros (17% dto.)
  • Xiaomi Mi5 64 GB: la versión internacional de este móvil tope de gama y con precio absolutamente ridículo. Ni Motorolas G5s ni leches. Si buscáis un móvil de garantías compradlo ya. Está a 209,95 euros en GearBest con el cupón RMi5.
  • Xiaomi Mi Note 2 64 GB: una alternativa barata al Galaxy Note 7 que no explota. Está a 365 euros en GearBest con el cupón MiNoteS.
  • Chuwi Hi13: Un Celeron N3450, 4 GB de RAM, 64 GB de capacidad ampliables vía micro SD, y esa pantalla de 13,5 pulgadas y resolución alucinante: 3.000 x 2.000 píxeles, aparte de conectividad 802.11ac. Está a 279,59 euros en GearBest con el cupón CHUWI25%OFF. El teclado oficial lo podéis conseguir en GearBest por 48,37 euros y el stylus HiPen H3 con 1024 niveles de presión (mejor que el del Hi12) sale por 22,37 euros.

¿Quieres recibir un correo de aviso cuando publique nuevas entradas?

Standard

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

15 comentarios en “Tipografías y el balance entre rendimiento y diseño web

  1. Korso dice:

    La tipografía de tu blog -y el diseño en general- es de lo más agradable de leer que se puede encontrar (con permiso de Medium, que otra cosa no, pero es muy agradable de leer). Eso sí, estoy en Linux y estoy leyendo el blog en Arial. Javi, por favor xD

    • Hola Moronguer

      Claro que acepto sugerencias 😉 Los textos justificados funcionan para según qué cosas, pero creo que no son buenos para una narrativa como la de un blog en la que justificar párrafos invita a una lectura monótona. Que una línea acabe antes o después hace que el recorrido visual sea más entretenido en mi opinión, y ayuda a que no te pierdas si el texto es largo (o denso). Lo consideré en su momento y lo descarté.

      Gracias de todos modos, y no dudes en apuntar cualquier otra cosa que se te ocurra Moronguer!