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:

  • Monitor Lenovo 21,5 pulgadas: un monitor 1080p de 21,5 pulgadas con conexión VGA. Básico, pero es que vaya precio: 79 euros en Amazon. Tenéis un modelo algo mejor, el BenQ GW2270H con entrada dual HDMI, por 118 euros en Amazon. Y si queréis ir a un monitor gaming, el BenQ XL2411P ZOWIE con soporte de 144 HZ está a 246 euros en Amazon.
  • Tablet Amazon Fire HD 10: una tableta de 10 pulgadas 1080p con 32 GB de capacidad y un precio estupendo: 113 euros en Amazon Alemania, envío incluido.
  • PlayStation PSVR: las gafas de realidad virtual de la PS4 con la cámara y el juego VR Worlds están a 186 euros en Amazon Italia, envío incluido.
  • Portátil gaming Medion Erazer P6705: con pantalla de 15,6 pulgadas 1080p, un Core i5-8300H, 8 GB de RAM, 1 TB de disco, 128 GB de SSD, una GTX 1050 Ti para darle vida a los juegos y Windows 10. Teclado en español, por cierto. Está a  749 euros en Amazon.
  • Xiaomi Mi A2 Lite: el telefonazo chollo por excelencia, 5,84 pulgadas, Snapdragon 625, 4 GB de RAM, 64 GB de capacidad, cámara dual 12+5 MP, batería de 4.000 mAh, sin NFC eso sí pero aún así triunfada. Atentos porque el modelo de 3 GB y 32 GB es impresionante en precio: 142,32 euros en GearBest. Acaba de aparecer la actualización a Android 9.0 Pie para este móvil, lo que lo destaca aún más. Dos años de garantía en España, y recordad que tenéis que desactivar el seguro de envío predefinido.
  • Ratón Logitech G402: para jugones, con 8 botones programables, está a 28,99 euros en Amazon.
  • Unidad SSD Crucial BX300: una unidad de 120 GB con prestaciones estupendas y que sale por un precio ridículo: 25,99 euros en Amazon.
  • Unidad SSD Samsung 970 EVO: genial con 250 GB y velocidades de transferencia brutales: está a 72,99 euros en Amazon, nunca la vi tan barata. Es la que tengo en mi PC, y me salió a 95 euros como súper ganga, así que imaginad. La versión de 500 GB está a 119,98 euros, gran precio también.
  • Motorola One: un smartphone basado en Android One con pantalla de 5,9 pulgadas, un Snapdragon 625, 4 GB de RAM, 64 GB de capacidad, cámara dual 13+13 MP. Está a 269 euros en Amazon.
  • Monitor LG UltraWide 29 pulgadas: un modelo muy curioso para vuestras sesiones de trabajo y juego. Con resolución 2560×1080, AMD FreeSync, conectores USB-C y HDMI. Está a 219 euros en Amazon.
  • Patinete Eléctrico Ninebot ES1 No. 9: otro patinete similar al anterior pero algo menos potente. Hasta 20 km/h y hasta 25 km de autonomía, muy bien también por su precio, 277 euros en GearBest con el cupón GB12ES1 con dos años de garantía en España. Desactivad el seguro de envío, eso sí.
  • Reloj inteligente Huawei Honor Magic: un reloj curioso con pantalla AMOLED, soporte GPS, autonomía de una semana, NFC (¡pagos móviles!), sensor de ritmo cardiaco, monitorización del sueño, barómetro, brújula y notificaciones. Muy curioso por 101,06 euros en GeekBuying con el cupón EGWQNPDV.
  • Tarjeta gráfica Zotac GeForce GTX 1060 6 GB: una gráfica estupenda para animar vuestras sesiones de gaming. Está a 230 euros en Amazon Alemania, gastos de envío incluidos.
  • Portátil Xiaomi Mi Air: el equipo que rivaliza con los grandes fabricantes del mercado a menor precio vuelve a ponerse interesante. Pantalla de 13,3 pulgadas, Core i5-8250U, 8 GB de RAM, 128 GB de SSD, gráfica NVIDIA GeForce MX 150, lector de huellas, todo por 710 euros en GearBest.
  • Smartwatch Huawei Watch 2: con WiFi y 4G nada menos, este reloj tiene también GPS, Wear OS 2.0 para gobernarlo y un precio fantástico de 199,99 euros en Amazon. Brutal por lo que ofrece, os lo aseguro que lo sé de buena tinta: lo analicé hace tiempo.
  • Auriculares Gaming Sennheiser Game Zero: calidad de sonido a lo bestia, reducción de ruido y un micrófono de calidad para las comunicaciones durante las partidas. De esta marca se puede uno fiar, y el precio es estupendo, 109 euros en Amazon frente a los +140 que cuesta normalmente.
  • Televisión Haier 4K 55 pulgadas: vale que no es una marca top, pero tener una Smart TV de 55 pulgadas con resolución  4K/UHD (sin HDR, parece por lo que he visto) por este precio es de locos. Cuenta con Netflix preinstalado, WiFi y TDT2, además de altavoces con soporte Dolby Digital+. Se envía desde UK con garantía de Haier, y está a 365,32 euros en Banggood EU con el cupón e2bcea.
  • Xiaomi Mi 8 (Global): con dos años de garantía en España, envío inmediato. Pantalla AMOLED de 6,21 pulgadas FHD+, Snapdragon 845, 6 GB de RAM, 64 GB de capacidad, cámara trasera 12+12 MP, cámara frontal de 20 MP, lector de huellas trasero, batería de 3.400 mAh. Está en color azul a 328,52 euros en GearBest con el cupón GBMPKBG2 y en color negro a 328,52 euros en GearBest con el cupón GBMPKBG3. Desactivad el seguro de envío, ya sabéis.
  • PocoPhone F1: telefonazo que Xiaomi se acaba de sacar de la manga. Un Snapdragon 845, 6 GB de RAM, 64 GB de capacidad (ampliables), pantallón de 6,18 pulgadas y dos cámaras de 12+5 Mpíxeles, además de batería de 4.000 mAh y conector de auriculares. Si no os importa que no tenga NFC, compra estrella de la temporada, sobre todo a este precio. La edición de 6 GB y 64 GB de capacidad está a 259,72 euros en AliExpress, uauh.
  • Xiaomi Mi 8 Pro: la versión más brutal del telefonazo de Xiaomi: 6,21 pulgadas, el célebre diseño con la carcasa semitransparente (de pega, pero es curiosa), Snapdragon 845, 8 GB de RAM, 128 GB de capacidad, cámara dual de 12+12 MP, cámara frontal de 20 MP, sensor de huella bajo la pantalla, en fin, de todo. Está a 452,83 euros en GearBest.
  • Xiaomi Mi Mix 3: el móvil de gama alta más reciente de esta empresa está ahora a precio llamativo. Con pantalla 6,39 pulgadas casi sin marcos (ni notch), Snapdragon 845, 6 GB de RAM, 128 GB de capacidad, cámara trasera 12+12, cámara frontal 24+2 MP  (deslizable, un sistema curioso para esconderlas), batería de 3.850 mAh, desbloqueo facial, soporte carga inalámbrica. Muy chulo, y está a 497,22  euros en Gearbest con 2 años de garantía en España. Desactivad el nuevo seguro de envío activado por defecto, ya sabéis.
  • Unidad SSD Netac 480 GB: mucho más barata que las que os pongo al final, casi medio terabyte a precio de 200 GB en unidades de marcas reputadas. Difícil no sentirse tentado porque cuesta 48,861 euros en JoyBuy. Para que veáis la diferencia, la Samsung 860 Evo de 250 GB (casi la mitad de capacidad) cuesta más: está a 51,90 euros en Amazon… y este último no es mal precio. El otro es ya la locura, aunque la marca, claro, no es muy conocida.

¿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