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:

  • Kindle Paperwhite: el lector de libros electrónicos de referencia baja de precio. Con pantalla de 6″ retroiluminada, 8 GB de capacidad, y esa resistencia al agua para llevártelo a la pisci/playa sin miedo. Está a 109,99 euros en Amazon.
  • Portátil Chuwi Lapbook Air: 14,1″ FullHD, Intel Celeron N3450, 8 GB de RAM, 128 GB SSD (ranura M.2), Windows 10, teclado inglés, WiFi, está a 281,04 euros en Banggood con el cupón BGair44
  • Repetidor WiFi dodocool: para mejorar la cobertura de tu red WiFi, soporte de redes 802.11b/g/n, antena integrada, enchufe europeo. Está a 16,99 euros en Amazon.
  • Lenovo Ideacentre 510A: un PC para trabajar y jugar con un AMD Ryzen 5 2400G, 8 GB de RAM, 1 TB HDD, una gráfica AMD Radeon RX 560 (4 GB GDDR5), y Windows 10 Home. Está a 599,99 euros en Amazon.
  • 48 cápsulas Nescafé Dolce Gusto: el sabor espresso intenso está de rebajas, un pack de 3×16 cápsulas está a 10 euros en Amazon
  • Patinete Xiaomi Pro: el modelo con batería ampliada (474 Wh, 18.650 mAh) que pasa de 30 a 45 km, sistema de frenos dual, ruedas de 8,5 pulgadas, más avanzado y seguro por 485 euros en Banggood con el cupón MIFANPRO
  • Ratón gaming Corsair M65 Elite: con cable, sensor óptico, hasta 18.000 PPP, retroiluminación RGB, sistema de pesos ajustables. Un ratón gaming muy llamativo y capaz, está a 49,99 euros en Amazon.
  • Lenovo Legion T530: un PC de sobremesa con un Core i5-8400, 8 GB de RAM, 128 GB de SSD, 1TB de HDD y gráfica GTX 1050. Sin sistema operativo, pero bien por 599 euros en Amazon. Pero que muy bien.
  • Zapatillas Lacoste Carnaby Evo: en color azul marino, disponibles en varias tallas, están a 59,99 euros en AliExpress Plaza.
  • Grand Theft Auto V: la edición para la Xbox One está de rebajas, solo 16,99 euros en Amazon.
  • Memoria USB SanDisk Cruzer 64 GB: conexión USB 2.0, buen diseño y capacidad estupenda sobre todo a este precio: 8,99 euros en Amazon.
  • Disco duro externo WD My Book 10 TB: vamos a por todas con esta unidad externa de nada menos que 10 TB con conexión USB 3.0 y un precio estupendo, 188,99 euros en Amazon. Brutal
  • Samsung Galaxy S10e: el telefonazo compacto con 5,8”, Exynos 9 Octa 9820, 6 GB de RAM, 128 GB de capacidad (ampliables), cámara dual 12+16 MP, 3.100 mAh lector de huella en el lateral. Está a 559 euros en eBay.
  • Windows 10 Pro: una licencia para el sistema operativo de Microsoft a 2,99 euros. Te la mandan por correo junto a algunas instrucciones. Está a 2,99 euros en eBay, perfecta para esos equipos que se venden sin sistema operativo.
  • Xiaomi Mi 9: atentos, chicos. AMOLED 6,39” , Snapdragon 855, 6 GB de RAM, 64 GB de capacidad, huella dactilar en pantalla, carga inalámbrica y rápida, cámara triple (48+12+16 MP). Está a 401 euros en Banggood con el cupón 4BGM964. Otra alternativa: está a 449 en Amazon.
  • Xiaomi Redmi Note 7: 6,3” (mininotch), Snapdragon 660, 4 GB de RAM, 128 GB de capacidad (ampliables), 4.000 mAh de batería, minijack y cámara dual de 48+5 MP realmente estupenda. Está a 201,63 euros en Banggood con el cupón 4BGN7128. La versión de 3 GB de RAM y 32 GB de capacidad del Redmi Note 7 está lógicamente más barata, tan solo 146 euros en AliExpress con el cupón “aliexpress19068. Y otra opción más, 4 GB de RAM, 64 GB de capacidad por 165 euros en AliExpress con el cupón AliExpress19215
  • Suscripción EA Access 12 meses: un año entero para disfrutar un catálogo estupendo de juegos para la Xbox One como si fueran tuyos. Los instalas y a disfrutar. Está a 18,89 euros en CDKeys.
  • Auriculares inalámbricos Xiaomi AirDots TWS: los competidores de los AirPods de Apple con Bluetooth 5.0, 4 horas de autonomía y 12 más en el estuche, control táctil. Están a 22,74 euros en GearBest con el código 321U9GID
  • PocoPhone F1: telefonazo de 6,1”, Snapdragon 845, 6 GB de RAM, 128 GB de capacidad, cámara dual (12+5 MP), 4.000 mAh. Nunca lo había visto a este precio en esa versión de 128GB. Está a 279 euros en GearBest envío desde España, garantía 2 años.
  • Unidad SSD SanDisk 2 TB: una estupenda opción para quienes necesitéis mucha capacidad y mucha velocidad. 2 TB en SSD es una pasada, creedme. Está a 207 euros en Amazon Alemania, envío incluido.
  • Módulo Ballistix Sport RAM DDR4 16 GB: sigue bajando la memoria, y este módulo de 16 GB lo demuestra: DDR4, PC4-2400, color gris, está a 81 euros en Amazon Alemania envío incluido. Póngame dos (por aquello de aprovechar las memorias dual-channel).
  • Impresora multifunción Canon Pixma TS3150: imprime, escanea y copia, con WiFi, Pixma Cloud Link, inyección, impresionane por 33 euros en AliExpress con el cupón plazaoff. En Amazon muy barata también, 39 euros.
  • Patinete eléctrico Xiaomi Mijia M365: el referente. Plegable, 30 km de batería, 25 km/h, doble freno, en color negro, está a 303 euros en Banggod con el código plrosku, en Amazon sale por 412 euros.
  • Auriculares gaming Logitech G432: unos cascos de diadema con micrófono, sonido envolvente 7.1 perfecto para detectar a tus enemigos en FPS solo con el audio. Está a 55 euros en Aliexpress con el código plazaoff.
  • Tarjeta gráfica Zotac RTX 2060: estupenda opción para jugar a toda potencia. Una GeForce RTX 2060 con 6 GB de memoria GDDR6, y todas las mejoras de la arquitectura Turing (Ray-tracing, DLSS). Está a 339,99 euros en Amazon.
  • Xbox Game Pass 6 meses: en un pack de dos códigos digitales de 3 meses cada uno. Rebaja del 50% para este servicio que te permite jugar a cerca de 200 juegos de la Xbox One como si fueran tuyos. Mola, y está a 29,99 euros en Amazon.
  • Xiaomi Mi A2: la versión global de este móvil de 5,99″ con un Snapdragon 660, 4 GB de RAM, 32 GB de capacidad (no ampliables), cámara dual 12+20. Está a 131,60 euros en AliExpress con el código aliexpress19084. El modelo con 4/64 GB está en Amazon a 152 euros
  • Auriculares i12 TWS: unos auriculares inalámbricos BT 5.0 con control táctil, diseño “inspirado” (ja) en los AirPods. Están a 15,15 euros en GeekBuying con el cupón JJVWTEUK
  • Office 2019 Professional Plus: licencia para un PC, solo para Windows 10, licencia perpetua, envío del código de licencia por correo. Se dan instrucciones para descarga, instalación y aplicación. Está a 10,60 euros en Amazon.
  • Portátil Chuwi HeroBook: un 14,1″ HD con un Intel E800 quad-core, 4 GB de RAM, 64 GB de capacidad (ampliable con SSD M.2), Windows 10, 38 Wh batería. Modesto pero simpático sobre todo por su precio, 191 euros en Aliexpress con cupones.
  • Portátil gaming Asus R570ZD: un 15’6” FullHD con un AMD Ryzen 5 2500U, 8 GB de RAM, 256 GB SSD, GTX 1050 (2GB), teclado en español, puerto RJ-45, USB-C, peso de 2,3 kg (no es una pluma). Sin Windows, ojo. El precio es estupendo, 554 euros en Amazon
  • Xiaomi Mi A2 Lite: versión global, 5,84” Snapdragon 625, 3 GB de RAM, 32 GB capacidad (ampliable), cámara dual 12+5 MP, 4.000 mAh batería, Android One puro. Increíble que cueste 126,89 euros en Banggood con el cupón 4BGA2L3
  • 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,57 en AliExpress.
  • Huawei Honor 10 Lite: 6,21”, CPU Kirin 710, 3 GB de RAM, 64 GB de capacidad (ampliables), cámara dual trasera (13+13 MP), frontal de 24 MP, 3.400 mAh, lector de huellas y hasta NFC para pagos móviles. Está a 194 euros en AliExpress con el cupón “plaza1
  • Portátil Xiaomi Mi Notebook Pro: 15,6 pulgadas FullHD, Core i5-8250U, 8 GB de RAM, 256 GB PCIe SSD, expansión M.2, GeForce MX150, lector de huella, teclado en inglés (te regalan pegatinas). Está a 765 euros en AliExpress. Envío desde España en 5 días.
  • Portátil Jumper EzBook 3 Pro: modesto pero perfecto para viajes o niños: 13,3 pulgadas FullHD (!!), Intel Celeron N3450, 6 GB de RAM, 64 GB eMMC (slot M.2), salida HDMI, peso 1,39 kg, Windows 10, teclado EEUU. Está a 199,78 euros 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