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. Aprovecha, que no suelen durar mucho tiempo:

  • Portátil Huawei Matebook 13: atentos a este maquinón, versión “lite” del Mateboox X. Con pantalla de 13 pulgadas 2K (1440p), un Core i5-8265U, 8 GB de RAM, 256 GB de capacidad, una GeForce MX150 y lector de huella dactilar. Lo tenéis a 745 euros en AliExpress. La batería de 41,7 Whr es algo limitada quizás, pero es que claro, es súper delgado (14,9 mm) y ligero (1,28 kg).
  • Portátil gaming Lenovo Legio Y530 + Monitor Lenovo L24q: un pack llamativo: el portátil de 15,6”, Core i5-8300H, 8 GB/1 TB (HDD), GTX 1050, Windows 10. Monitor 24 pulgadas 2560×1440 pixels. Muy bien todo por 793,50 euros en Amazon, y cambio SSD asumible
  • Tarjeta gráfica XFX Radeon RX-580: una gráfica seria, tipo GTX 1060, pero que se beneficia de esos 8 GB de memoria gráfica. Está a 199 euros en Amazon, nada mal.
  • Monitor Acer K192HQL: como pantalla auxiliar modesta es curiosa: 18,5 pulgadas con resolución 1366×768, entrada VGA. Muy, muy modesto, pero está en versión reacondicionada en Amazon por 50,5 euros
  • Apple Watch 4: el reloj inteligente de Apple en su versión Sport de 44 mm en color gris espacial (sin conectividad LTE). Hasta 2 días de autonomía, GPS integrado, sensor de frec cardiaca. Está a 399,99 euros en eBay
  • Convertible Lenovo Miix 700: curioso este portátil 2-en-1 reacondicionado (garantía Amazon). 12 pulgadas, Core M7-6Y75, 8 GB de RAM, 256 GB de SSD, Windows 10 pero teclado alemán QWERTZ. Si no os importa, brutal a 398,63 € (insisto, reacondicionado).
  • Xiaomi Mi Notebook Ruby: un portátil curioso. 15,6 pulgadas 1920×1200, Core i3-8130U, 4 GB de RAM, 128 GB de SSD (ampliables), USB 3.0, HDMI, Gigabit Ethernet, lector de tarjetas. Está a 477 euros en Banggood con el cupón B12G304
  • Pala pádel Royal Padel EFE Carbon Amarilla: offtopic, como juego al pádel se me ha ocurrido poner esta oferta que me tienta hasta a mí. Hablan muy bien de esta pala que cuesta 109 euros en Amazon en lugar de los 329 de otras tiendas (comprobado). Chollazo.
  • iPad 9,7 pulgadas (2018): el modelo más reciente con soporte para el Apple Pencil. Color gris espacial, 32 GB de capacidad y con WiFi. Está a 269,99 euros en eBay, el precio más bajo que he visto. En Amazon está a 309 euros.
  • 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,24 en AliExpress.
  • PC Medion Akoya PCC722: atentos que aquí tenéis un equipo sobre el que luego crecer mucho (un SSD y gráfica modesta por ej) y bien: Core i3-8100, 8 GB de RAM, 1 TB de disco HDD, sin sistema operativo. Está a 319 euros en Amazon.
  • Samsung Galaxy Tab A: buena tableta Android con pantalla de 10,1 pulgadas FullHD, procesador octa-core, 2 GB de RAM, 32 GB de capacidad, ANdroid 7.0 actualizable, color blanco. Está a 167,50 euros en Amazon.
  • Hub USB-C 7 en 1: para los que solo tenéis puertos USB-C en el portátil, este es un súper-dongle. Salida HDMI, 3xUSB 3.0, USB-C, lector SD y micro SD. Todo por 20,99 euros en Amazon con el cupón LGUZWW3D.
  • iPad Pro (2017): el de segunda generación, no el más reciente, pero atentos, CPU Apple A10X Fusion, 12,9 pulgadas, 256 GB de capacidad, WiFi y un precio estupendo, 881,39 euros en Amazon
  • iPhone XR: el telefonazo “económico” de Apple baja un poco de precio. Pantalla de 6,1 pulgadas (LCD), cámara de 12 MP, Face ID, CPU APple A12 Bionic, carga inalámbrica, resistencia al agua. Está a 749 euros en Amazon en color azul.
  • Intel NUC: un miniPC que solo incluye placa y procesador: tienes que comprar aparte RAM y SSD. Aún así curioso por formato y puertos. LLega con un Celeron J3455 y con HDMI, VGA, USB3, Ethernet y puertos M.2 y DDR3. Está a 119 euros en Amazon
  • Xiaomi PocoPhone F1: el móvil súper chollo de los últimos meses baja también en Amazon. 6,18 pulgadas, Snapdragon 845, 6GB de RAM y 128 GB de capacidad (ole) además de cámara dual 12+5 MP. Está a 305 euros en Amazon.
  • Xiaomi Mi Mix 3: el súper teléfono sin marcos baja de precio: con pantalla de 6,39” deslizable para la cámara selfie y Snapdragon 845, 6 GB de RAM 128 GB de ROM y cámara dual 12+12. Estupenda opción por 436,86 euros en AliExpress (aplicad cupón de 7 euros en la página).
  • PC Lenovo IdeaCentre AIO 330-20AST: un Todo-en-uno modesto pero estupendo para ahorrar espacio en el escritorio. 19,5”, CPPU AMD A6-9200, 4 GB de RAM; 1 TB de HDD, gráfica AMD Radeon R4, Windows 10, ratón y teclado. Todo por 259,99 euros en Amazon.
  • Móvil ProTruly D7: pantalla 5,5 pulgadas, Helio P20, 3 GB de RAM, 32 GB de capacidad (ampliables) pero atentos a la cámara VR de 26 MP que permite grabar vídeos en modo “panorama 360”, o eso promete. Está a 92,53 euros en Banggood. Curioso es, desde luego.
  • Nokia 8: pantalla de 5,3 pulgadas, Snapdragon 835, 6 GB de RAM, 128 GB de capacidad (y ampliables, uauh) y cámara dual 13+13. Curioso lo de su pantalla con 700 nits de brillo máximo. Está a 240 euros en Banggood. En Amazon esta versión está a 410 euros.
  • Acer RT280KABMIIPX: monitor de 28 pulgadas con panel TN, resolución UHD (3840×2160), 1 ms de respuesta, 2 x HDMI (2.0), 1 x HDMI (1.2), altavoces integrados. Está a 262 euros en Amazon Italia envío incluido.
  • Xiaomi Notebook Air 13,3”: el portátil con una CPU algo más antigua, el Core i5-7200U. Por lo demás, impresionante por sus 8 GB de RAM, 256 GB de capacidad y GeForce MX150 además de lector de huella. Brutal por 603,90 euros en Banggood con el cupón 12CRI01.
  • Reloj inteligente Huawei Watch GT: pantalla AMOLED 1,39” (454×454), GPS/Galileo, sensor de frec. cardiaca, notificaciones, sumergible. Está a 150 euros en AliExpress por 150 euros con el cupón HuaweiGT (en Amazon 199).
  • Mando Bluetooth para juegos móviles IPega PG-9076: con su soporte para el móvil, pero que también sirve para la tableta o el portátil, por ejemplo. Está a 16,98 euros en GearBest.
  • Xiaomi Notebook Air 13,3 pulgadas: precio/prestaciones casi sin parangón. 13,3 pulgadas FullHD, Core i7-8550U, 8 GB de RAM, 256 GB SSD, GeForce MX150, HDMI. Está a 763,76 euros en Banggood con el cupón 19BGA729.
  • Portátil Lenovo Ideapad 330-15IKB: 15,6 pulgadas HD (1366×768), Core i3-6006U, 4 GB de RAM, 500 GB de HDD y sin sistema operativo, así que perfecto para #Linux. Tiene Ethernet lector SD, USB, USB-C, HDMI ¡y grabadora de DVD! Está a 299 euros en Amazon.
  • Colorful iGame RTX 2060: esta marca es algo así como la Gigabyte china: toda una RTX 2060 con 6 GB de GDDR6 a un precio brutal, 352,56 euros en Banggood con el cupón fee6c3.
  • Xiaomi MiBand 3: con pantalla de 0,78 pulgadas (128×80 píxeles), batería de 110 mAh con autonomía de 20 días, sumergible hasta 50 metros y con Bluetooth 4.2. Envío desde España, está a 22,49 euros en Amazon.
  • Monitor gaming Aopen 24HC1QRPbidpx: atentos a su diseño curvo, diagonal de pantalla de 23,6 pulgadas, Full HD pero sobre todo soporte 144 Hz. Tiene entradas HDMI, DVI y DisplayPort y soporte para FreeSync. A jugar chicos. Está en Amazon a 179,99 euros.
  • Impresora Epson EcoTank ET-2650: no usa cartuchos de tinta, sino depósitos recargables que salen (teóricamente) mucho más baratos. Es una multifunción de inyección con WiFi. Está a 159 euros en Amazon  En PCComponentes cuesta 205 euros, por ej.
  • 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: 150 euros en GearBest. Pero es que atención: en Amazon está a 162 euros ahora mismo.
  • Pendrive USB Kingston DataTraveler 128 GB: atentos a esta llave USB con nada menos que 128 GB de almacenamiento por un precio absurdo: 18,32 euros en Amazon. El modelo de 64 GB está a 9,62 euros en Amazon, también muy interesante. Si no os gusta ese diseño, el pendrive SanDisk Ultra de 128 GB está a 19,99 euros en Amazon.
  • Disco duro externo Maxtor 4 TB: yo me compré hace tiempo uno igual por 130 euros. COn conexión USB 3.0-3.1 y sin necesidad de alimentación externa. La rebaja en precio es bastante importante, así que ahí lo dejo: ahora está a 96,89 euros en Amazon.
  • Fire TV Stick: el dongle HDMI de Amazon compatible con todo tipo de servicios de streaming mola por el mandito a distancia. Está  a 39,99 euros en Amazon.
  • Monitor HP 32s: si necesitáis un monitor grande, atentos al modelo de HP de 32 pulgadas con resolución FullHD, conectores VGA y HDMI por 251 euros en Amazon.
  • Huawei Mate 20 Pro: el súper teléfono de Huawei, incluso por encima del P20 Pro. Pantalla de 6,39 pulgadas, Kirin 980, 8 GB de RAM, 128 GB de capacidad, 4.200 mAh y una cámara triple que está entre las tres mejores del mercado. Está a 739,99 euros en eBay.
  • SSD SanDisk 1 TB: una unidad de estado sólido SATA de 1 TB a 131,43 euros en Amazon. No hay mucho más que decir. Otra opción: la unidad Crucial MX500 también de 1 TB por 121,92 euros en Amazon.
  • Monitor gaming BenQ XL2411P ZOWIE: un monitor estupendo para jugones con diagonal de 24 pulgadas, resolución 1080p, conectores HDMI y DisplayPort y sobre todo soporte de tasa de refresco de hasta 144 Hz. Fantástico por 247 euros en Amazon, el precio más bajo que he visto nunca.
  • Smart TVTelevisión Sharp 65 pulgadas 4K: si tenéis otras necesidades atentos, porque aquí tenemos un pedazo televisor con todo lo que se le puede pedir a un cacharro de este tipo. 65 pulgadas, 4K, HDR, 3 puertos HDMI, 2 USB, y sonido Harman Kardon. Todo por 799,99 euros en Amazon.
  • 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 negro a 363,22 euros en Banggood.
  • Smartwatch Huawei Watch 2: un reloj inteligente con Android Wear 2.0 y con pantalla de 1,2 pulgadas. Tiene GPS, es resistente al agua y tiene batería de 420 mAh. Está a 164 euros en Amazon Italia, envío incluido.
  • Forza Horizon 4: el juegazo de coches está de rebajas: 31,89 euros en CDKeys. Por poner otro buen chollo, el Grand Theft Auto V para PC está a 10,79 euros en CDKeys.
  • Monitor Acer V6 V226HQL: monitor de 21,5 pulgadas Full HD (1920 x 1080) con entradas VGA, DVI y HDMI. Atentos al precio: 83,48 euros en AliExpress Plaza, envío desde España y garantía de dos años.
  • 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, 288,51 euros en GearBest con dos años de garantía en España. Desactivad el seguro de envío, eso sí.

¿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