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. También puedes seguir los Incognichollos en Twitter o en el nuevo canal de Telegram 🙂 . Aprovecha, que no suelen durar mucho tiempo.

  • OnePlus 7 Pro: 6,67 pulgadas a 90 Hz (dicen que son la pera), 8 GB de RAM, 256 GB capacidad, cámara triple (48+16+8), cámara frontal retráctil 16 MP, lector de huella en apntalla, 4.000 mAh. Está a 599 euros en Banggood con el código BGOP7PRO
  • Xiaomi Mi 9: 6,39″ sin marcos, Snapdragon 855, 6 GB de RAM, 64 GB de capacidad, cámara triple de 48+16+12 MP, está a 358,66 euros a través de Amazon con el código D4WKHWVT. Alucinante.
  • Xiaomi Redmi Note 7: 6,3» Snapdragon 660, 3 GB de RAM, 32 GB de capacidad (ampliables vía MicroSD), 4.000 mAh, minijack y cámara dual de 48+5 MP realmente estupendo por 122,9 euros en Banggood con el código BGN73E. Si no os queréis complicar la vida la versión superior de 4 GB de RAM y 64 GB de capacidad está en Amazon a 171 euros.
  • Xiaomi Mi Band 4: la nueva pulsera cuantificadora con pantalla AMOLED 0,95?, hasta 50 m profundidad y 5 ATM, sensor cardíaco, comandos de voz, notificaciones, brutal por 33,06 euros en AliExpress. (Elegid la versión global, no la china).
  • Xiaomi Mi Air 13: un 13,3″ FullHD IPS con Core i5-8250U, 8/256GB, WiFi doble banda, salida HDMI, lector de huella, buena opción en Banggood: 621 euros con el código BGMI710
  • Xiaomi Mi A2: está de oferta. Pantalla de 5,99 pulgadas, Snapdragon 660, 4 GB de RAM, 64 GB de capacidad (no ampliables), cámara dual (12+20), está a 145 euros en Amazon. Jamás había estado tan barato allí.
  • LG Gram: un portátil ultraligero de tan solo 1,1 kg de peso. 15,6″ FullHD, Core i7-8565U, 8 GB de RAM, 256 GB capacidad, Windows 10 Home, 3xUSB, 1 xUSB-C (con Thunderbolt 3!!). Me parece brutal por 899 euros en Amazon.
  • Portátil HP Pavilion 15-bc450ns: un equipo de 15,6? Full HD con un Core i5-8300H, 8 GB de RAM, 1 TB de HDD, 128 GB SSD (uauh) y GeForce GTX 1050 (uauh!), sin Windows (hay incognichollo ahí de 1,5 euros para resolver). Está a 579 euros en Amazon.
  • Monitor BenQ GW2270: un 21,5″ Full HD con formato 16:9, conectores DVI y VGA, 5ms, color negro. Increíble por 69 euros en Amazon. La versión HDMI está a 95 euros.
  • MiniPC: atentos a este equipo en formato NUC con un Core i3-7100U, 8 GB de RAM, 120 GB de SSD, WiFi 300 Mbps, 6 x USB, RJ-45, Ethernet, VGA, HDMI, toma auriculares. Por 205,94 euros, nada mal en AliExpress. Te regalan montura VESA.
  • WD MyBook 8TB: un disco duro externo con una capacidad brutal e interfaz USB 3.0. Está a 149 euros en Amazon UK, envío incluido.
  • Disco Duro WD 250 GB: un disco duro convencional de 250 GB que oye, nos puede resolver bastantes papeletas, a un precio ridículo: 15,90 euros en Amazon. Dicho lo cual, esta unidad SSD Kingston SSDA400 de 2,5 pulgadas y 120 GB es bastante más rápida y aunque tiene la mitad de capacidad creo que es más interesante para la mayoría de los usuarios: son tan solo 18,99 euros en Amazon.
  • Memoria USB Sandisk IXpand Mini 64GB: un dispositivo para extraer datos del iPhone o el iPad y guardarlos en esta llave con puerto Lightning y puerto USB 3.0. Muy útil para copias de seguridad sin tener que conectar el móvil o tableta al PC. Está a 18,50 euros en Amazon
  • FIFA 19: terminan las temporadas reales, así que bajan los precios de los FIFA. Tanto en PS4 como en Xbox One están a 32,90 euros en Amazon
  • Xbox One X + Metro Exodus: la consola más potente de Microsoft está de rebajas, incluye Metro Redux, un mando, 1 TB de capacidad y también Metro 2033 y Metro Last Light. Está a 349 euros en Amazon Alemania, envío incluido.
  • Teléfono Nokia 3100 Mini: una réplica del antiguo móvil estrella de Nokia, perfecto para usar el teléfono móvil como eso, como un teléfono. Tiene conectividad 2G, teclado físico y minipantalla. Prodigioso por 10,78 euros (sí, 10,78) en TomTop.
  • Windows 10 Pro: una licencia para el sistema operativo de Microsoft. Te la mandan por correo junto a algunas instrucciones. Está a 1,99 euros en eBay, perfecta para este equipo que se venden sin sistema operativo
  • Xiaomi Mi 9 SE: 5,97 pulgadas, Snapdragon 712, 6 GB de RAM, 128 GB de capacidad (uauh), triple cámara (48+12+16), lector de huella en pantalla, está a tan solo 270 euros en GearBest
  • Amazfit Verge Lite: sin NFC, pero con una autonomía de hasta 20 días. Pantalla AMOLED de 1,3″ 360×360 Corning Gorilla Glass. Frecuencia cardíaca, gran variedad de modos deportivos. GPS + GLONASS. Está a 89,18 euros en AliExpress
  • OnePlus 7: la evolución del 6T con 6,41?, Snapdragon 855, 8 GB de RAM, mininotch, 256 GB de capacidad (uauh), cámara dual 48+5, 3700 mAh de batería, huella en pantalla. Está a 437,49 euros en AliExpress.
  • SSD Samsung 2 TB: una unidad SSD con esta capacidad y a este precio es tela. Velocidades de 550 MB/s, está a 195 euros en Amazon Francia, envío incluido.
  • PO Realme X: el rival a batir en gama media rompedora. Tremendo, 6,53? sin marcos, Snapdragon 710, 4 GB de RAM, 64 GB de capacidad, cámara dual 48+5, cámara frontal periscópica, 3765 mAh, lector de huellas en pantalla. Brutal por 257 euros en Banggood.
  • Xbox One S Digital + 3 juegos: la consola de Microsoft sin unidad de Blu-ray incluye un mando y Minecraft, Sea of Thieves y Forza Horizon 3. Está a 175 euros en AliexpressPlaza con el código «plazaoff«. Envío desde España, 2 años garantía.
  • Tablet Amazon Fire 7: la renovada tableta de Amazon con mejor procesador y sobre todo con el doble de capacidad que el modelo de 2017. La versión de 16 GB (ampliable vía microSD) está a tan solo 69,99 euros en Amazon.
  • Bolígrafo Xiaomi Mijia Pen + 3 recambios: el boli de 0,5 mm con tecnología suiza (o eso dicen) que enamora. Yo ya he comprado varios, y la verdad es que molan, y por este precio, más. El boli + tres recambios sale por 3,41 en AliExpress.

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

Standard

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

    • Sí, Lato efectivamente se me ha quedado porque la uso en los blockquotes y en la cajita del buscador. Quería probar quitando Linux Libertine, pero no parece que vaya muy bien la cosa :/

    • 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!

Comentarios cerrados