Tipografía

Si ya estás ducho en la materia del diseño web, esto te va a sonar mucho. Pero si eres nuevo uno de los mejores consejos que te pueden dar a la hora de establecer un diseño correcto es que le prestes atención al texto. Y no me refiero sólo a una buena selección de fuentes.

Por ejemplo tenemos Baseline para juguetear un poco. Incluso puedes recurrir a Typetester para comprobar cómo se ven esas fuentes “estándar” del sistema.

Pero este artículo que enlazo a continuación es bastante completito y desarrolla una serie de puntos importantes a tener en cuenta para una correcta maquetación de texto en web. Incluso me ha descubierto lo del Hyphenator.js que no conocía y tendré que probar en algún momento :)

Lo dicho, lectura recomendada.

:: Type Tips, consejos para la tipografía en web :: (Vía Nudonation)

Me gustaría hacer de este post algo más introspectivo. No alzar la vista fuera sino quedarme con “lo de dentro”. ¿Por qué sugeriros the 30 most awesome typos you can use to be a perfect designer and a handsome boy cuando en realidad no existe algo como tal? Prefiero contaros cuáles son las que yo vengo usando porque el tiempo me ha demostrado que funcionan bien. Son sólo una pequeña muestra pero creo que es la más representativa. Sobra decir que porque las use yo, no quiere decir que sean mejores o peores, además siempre habrá proyectos que requieran usar otro estilo totalmente diferente. Pero siempre agradezco cuando me cuentan este tipo de cosas y he pensado en hacer lo mismo.

Por tanto quiero dar paso a las protagonistas que aparecen listadas bajo un criterio totalmente aleatorio (según me voy acordando). No sé cuantás serán pero seguro que no pasan de 10-12. Por cierto, en un principio iba a separarlas en dos categorías: web e impresión. Pero con cositas que ya conocemos no creo que haga falta discernir entre fuentes seguras y las que no lo son.

(more…)

El test chorra del día para despedir la semana. Si sigo así esto va a parecer Facebook xD. Me ha salido la Bifur [en] aunque realmente yo me siento mucho más identificado con ésta [en]. Y tú, qué tipografía eres?

:: What type are you? [en] ::

PD: La contraseña es character

Leo en la Iguana Ilustrada que el Ministerio de Industria, Turismo y Comercio creó en su momento un Flash para presentar el proyecto de Ibarra Real. Esta tipografía, que pretende ser la tipografía de referencia española, ha sido desarrollada a partir de la que diseñó Francisco Javier de Santiago Palomares, obtenida “según muestras de punzones de Gerónimo Gil fundidos para el Quijote de la Academia que fue impreso por Joaquín Ibarra en 1780.”

Además de la tipografía, según Wikipedia, las viñetas fueron diseñadas por: Manuel Álvarez Junco, Andreu Balius Planelles, Dídac Ballester, Paco Bascuñán, José María Cerezo, Alberto Corazón, Oyer Corazón, Pablo Cosgaya, Rubén Fontana, Javier García del Olmo, José Gil-Nogués Villén, Pepe Gimeno, Fernando Guitérrez, Juan Martínez, Laura Meseguer, Juan Antonio Moreno, Juan Nava, Miguel Ochando, Josep Patau Bellart, Alejandro Paul, Marc Salinas, Emilio Torné, Alex Trochut y Roberto Turégano Moratalla.

Al parecer hay incluso un convenio para que Microsoft la incluya en sus productos. Aunque aún no está disponible la versión oficial si hay algunas referencias anteriores

::Proyecto Ibarra Real:: Via Iguana Ilustrada

La curiosidad del día. No sé si recordaréis el Spell with Flickr [en]. Ponías una palabra, le dabas a buscar y ale…te aparecía tu conjunto de letras en un bonito combinado de fotografías alojadas en Flickr.

Pues ahora lo mismo…pero con GoogleMaps. Pon tu palabra y luego haz clic sobre el PHP generado. Et voilá!

Me traigo de g:lou este curioso link que muchos verán como algo similar a las batallas que se montaban en Layer Tennis [en] o cualquier evento similar. En este caso todo gira en torno a la tipografía. Se da un tema y listo! A ver qué sale de los participantes.

Para pasar un rato entretenido.

:: Type Battles [en] ::

Si hay una campaña online que realmente me pareció simpaticona fue la de Extensis [en] y su Max Kerning.

Amanda me ha escrito para comentarme que han colgado algunos nuevos spots [youtube] en los que Max hace acto de presencia para anunciar que Suitecase Fusion 2 [en] ya está disponible para plataformas Windows.

Los anuncios no es que sean la repanocha pero me alegro de enterarme que Windows cuenta con una opción más a la hora de gestionar fuentes. Y es que yo sigo anclado al AMP todavía :S

No negaré que me ha llegado más de un correo lo largo de todo este tiempo indicándome que se hacía un poco incómodo el uso de Flash en los titulares. Siempre respondía que era algo que sabía y que esperaba solucionar antes o después. Pues ale, manos a la obra.

Hasta la fecha yo venía usando sIFR [en] en el blog para dicha tarea y también para el portfolio (pero implementado con jQuery en este caso) Me parecía un punto importante mantener unos titulares y encabezados decentes aunque presentara ciertos problemas de uso como la escalabilidad del tamaño de letra (no era del todo correcto), la imposibilidad de hacer un efecto hover en condiciones (en las últimas versiones creo que ha mejorado) y, la más importante, que era una lata para copiar la url a la que se enlazaba o incluso a hacer clic sobre los titulares. Pero bueno, en este caso me tragué lo de “la forma sigue a la función” y dí preferencia a lo visual. Hasta ahora.

(more…)

Quizá uno de los elementos web a nivel de diseño en los que más se está pretendiendo avanzar es la fuente tipográfica. Actualmente nos vemos cuasi-limitados al uso de un puñado de ellas (Typetester [en] es un buen punto de partida para verlo) si queremos evitar problemas a menos que empleemos técnicas de reemplazo como sIFR [en] o Cufón [en] por citar un par. Esto amplia el abanico tipográfico enormemente y con ello también el debate de hacia dónde va la tipografía en la web [en].

Typekit pretende ofrecer una solución alternativa que deje agusto a todos: diseñadores, usuarios y creadores de tipografías mediante la gestión (alquiler mejor dicho) de fuentes para su uso en Internet. Una especie de licencia de uso only for web. Y funciona bastante bien [en].

De momento Typekit no está abierta al público y es cuestión de probar suerte para ver si mandan invitación y si termina por convertirse en una opción viable.

:: Typekit [en] ::

Como el otro día hablaba de una ayuda para buscar tipografías quizá te haya picado el gusanillo por saber más sobre las mismas.

Puedes pasarte por Typedia que pretender servirnos de ayuda para conocer todo lo que hay detrás de la creación de estas letritas. Año de creación, autores, un poco de historia… Actualmente rondan las 300 tipografías y más de 1000 usuarios registrados por lo que no empiezan nada mal.

Os dejo además un post del gran Jason Santa María [en] en el que comenta un poco el proceso de creación de la web.

:: Typedia [en] + Introducing Typedia [en] ::

Lo he visto en Swissmiss [en] y me lo he tenido que traer. Porque aunque tampoco he probado muchos frameworks CSS sí que me da a mí en la nariz que no se tiene especial atención en el aspecto tipográfico. Y no me refiero sólo a los tamaños sino más bien a los espaciados e interespaciados.

Porque un párrafo de texto puede pasar de ser un ladrillo infumable a algo comprensible y agradable con tan sólo modificar el line-height. Y parece que Baseline está preparado para lidiar con ello.

:: Baseline [en] ::

Mientras trasteaba un poco por la web de Adobe, me he encontrado con una nueva herramienta que no me suena pero que seguro lleva disponible mucho tiempo. Se trata de Font Finder, un asistente online que te ayuda a seleccionar el mejor estilo de tipografía en función de las opciones que marques.

Ya sea para un packaging o logotipo, si el estilo va a ser más estricto o liviano… hay un montón de opciones para configurar. Lo suyo es echarle un vistazo un par de veces y ver si os merece la pena usarlo. Eso sí, siempre muestra resultados de tipografías comerciales. Para los que busquéis otro tipo de soluciones, siempre estará a mano la gran Font Squirrel [en] o el más modernuqui Fontplore :D

:: Adobe Font Finder [en] ::

font-face es una propiedad CSS que permite definir una tipografía alojada en una URL de nuestra elección y así conseguir que nuestras webs se vean tal y como queremos, independientemente de si en nuestro sistema tuviéramos instalada la fuente o no. Aunque actualmente no está soportada por el amplio espectro de navegadores disponibles, se va avanzando en el asunto.

Debido a ello empiezan a surgir preguntas relativas al “libre albedrío” con el que empezarán a moverse fuentes de un lado para otro sin saber realmente si su licencia de uso lo permite. Por ello, The League of Movable Type nace con la idea de servir de nexo de unión para todos aquellos interesados en el desarrollo y distribución de tipografías open source. Ya tienen un par de ejemplos que podemos usar y con los que no tendremos que preocuparnos de estos temas.

:: The League of Moveable Type [en] :: (Vía Ventilate [en])

Cuando estuve haciendo las prácticas en la editorial de la Universidad de Oviedo, una de mis labores fue la correción ortotipográfica y de estilo, todo un tostón al principio que terminó por entretenerme mucho al final, como si de hacer sudokus estuviéramos hablando.

La ortotipografía viene a ser el conjunto de reglas y convenios que nos dicen qué está bien escrito y qué no lo está. Es lo que nos dice si los paréntesis van en cursiva si su contenido lo está o cuánto espacio hemos de dejar si hablamos de capitulares. Hay un sugerente listado de estas reglas aquí: ortotipografía.

Lo de los signos es otra cosa. Igual te has topado a la hora de maquetar un libro con alguno de estos símbolos. Es una notación que ayuda a agilizar el tema de la corrección de textos. Todo un código Matrix del género literario. En esta guía ortotipográfica se pueden ver los más usuales (creo que falta alguno) y una aplicación de los mismos.

Y dirás, ¿pero esto a qué viene? Pues que me ha picado el gusanillo tras ver el manual de Axel y pensé: “pues vamos a hablar de este tema un poquito”. Es mi blog, ¿no?

En Fubiz [en] nos sugieren un regalo por si tenemos cerca algún cumpleaños de un amiguete aficionado a la tipografía. Font Generator es el Rubik de la tipografía. Una lástima que simplemente se trate de un proyecto del ingenioso Jas Bhachu [en].

:: Font Generator [en] ::

Pues sí, desde el 2002 ha llovido mucho y yo casi ya ni me acuerdo. Pero ha vuelto con energías renovadas y mucha mucha pasión por la tipografía.

:: Typographica [en] :: (lo contaban en Surfstation [en])

Tengo un nuevo ídolo; el remilgado Max Kerning. Un cachondeo de campaña virtual para narrar los beneficios del Suitcase Fusion 2 [en].

Aviso que está en inglés pero es muy sencillote de entender. M A X K E R N I N G for president!

:: MAXKERNING [en] :: (Vía The Letter [en])

Vamooooos. Otro de estos jueguitos que tanto nos hacen perder el tiempo jajaja. Lo sé, lo sé, no lo tendría que haber puesto. Productividad laboral descenciendo en 3, 2, 1…

:: Deep Font Challenge [en] :: (Vía Serif de Chocolate)

PD: 83mil y pico la primera vez. Luego he visto las puntuanciones y me he echado a llorar.

Gozada de post para los amantes de las letritas. Primero por Typographic posters [en], una web centrada única y exclusivamente en enseñarnos más y más calidad en forma de…eso, carteles cuyo máximo exponente es la tipografía. (Vía A City InBox)

Y segundo por Typenuts [en], una atractiva opción para decorar nuestros iPhone o escritorios virtuales gracias a su selección de imágenes tipográficas. Una gozada que ya ha hecho que me quite el wallpaper que tenía hasta ahora.

El otro día me guardé en el portátil un enlace que no sé cómo encontré pero que sé que os va a venir muy bien a muchos y que voy a guardar automáticamente en la sección de apuntes. Se trata del blog de un estudiante de diseño y producción editorial (como fuí yo en su momento) en el que ha ido guardando un montón de información y teoría que se enseña en el ciclo.

Creo que es un enlace al que tendréis que echar un ojo si estáis dando primeros pasos en el mundillo. Y si no, uno de estos!

:: Apuntes personales sobre el curso de diseño y producción editorial ::