Categoría: Tipografía

Las 25 tipografías más admiradas por los tipógrafos

1-Georgia

8Faces preguntó a 64 renombrados diseñadores y tipógrafos por sus ocho tipografías favoritas, en entrevistas realizadas en su blog en los últimos cuatro años.

Ahora han publicado una lista de las 25 más nombradas, aquellas que afirmaron usar principalmente en sus proyectos.

El primer puesto es para la Georgia, una tipografía creada en 1993 para Microsoft, y que a mi personalmente me encanta porque es muy legible y elegante.

Reconozco que entre las 25 hay algunas que no conocía, como Akzidenz Grotesk (en el puesto número 8) y que al parecer fue la primera sans-serif utilizada a gran escala.

Merece la pena revisar el artículo detenidamente, y quizá encontremos algo de inspiración para nuestro próximo proyecto.

Las mejores tipografías de 2013

mejores tipografías

Typographica publicó su resumen anual seleccionando las mejores tipografías de 2013. Este año son 53 seleccionadas por diseñadores de 20 países.

Hay un poco de todo, incluso alguna bastante dudosa para mi gusto. Pero en general es un buen indicador de por donde van los tiros actualmente en diseño tipográfico.

Entre mis favoritas de la selección: Clear Sans (que por cierto es gratuita y se puede descargar), Balto y Program.

Smart Quotes for Smart People

Every time you use a malformed apostrophe or quote, someone consciously decides to use Comic Sans. That's two wrongs and both are your fault. And I know you're smarter than that.

Al hilo del Día Nacional de la Puntuación (si, uno de esos días de los norteamericanos), Jason Santa María ha creado Smart Quotes for Smart People, un sitio que propugna el uso de las smart quotes.

No obstante, los atajos de teclado que propone allí funcionan para el idioma inglés, no para el español.

Analizando seis tipografías: Superhero Superfamilies

Superfamilies are typically defined as being super-sized. They're a single family of typefaces that share the same basic look, feel, and personality but belong to different classes and have different finishing details. The most basic family comprises a Serif and a Sans Serif typeface, while a superfamily might also include Condensed, Script, Slab, Text, Display, Rounded (and many more) versions. But some superfamilies are more super than others

Dan Eden analiza en el blog de Typecast seis tipografías web que pueden darle un mejor aspecto a tu blog. Algunas están ya muy extendidas, como Próxima Nova, y otras son algo dudosas como Museo.

Pero es un buen ejemplo de análisis. Nunca está de más el consejo de un experto a la hora de elegir una tipografía.

Hace tiempo que uso Typekit, que también ofrece análisis de tipografías en su directorio de fuentes. Pero viendo los estupendos posts que hacen en Typecast me dan ganas de cambiarme.

Optimizar la tipografía del blog

La tipografía es el elemento más importante de un blog basado en los contenidos. Así que un buen uso de la misma puede ser la diferencia, no sólo entre una estética bella o desagradable, sinó también entre una web legible o no.

Soy un maníaco de la tipografía, suelo cambiar las fuentes muy a menudo en mis blogs, buscando siempre el equilibrio entre belleza y funcionalidad. Creo que de momento he encontrado el equilibrio con la familia de tipografías Tisa Web Pro, que son las que uso aquí. Eso tras muchos experimentos y ajustes.

Porque implementar una tipografía concreta requiere probar muchas configuraciones, de tamaño, alto de línea, ancho del contenido, etc., hasta dar con la que nos gusta o encaja a la perfección.

Pero si no quieres perder mucho tiempo en ello hay una solución genial de la mano de Pearsonified. Se trata de la Calculadora de Proporción Aúrea para Tipografía, una herramienta que permite especificar una tamaño de fuente, un ancho de contenido o los caracteres por línea deseados, y nos calcula el resto de configuraciones automáticamente.

Por ejemplo, para un tamaño de 18px de la tipografía Helvetica Neue nos recomienda un alto de línea de 29px, un ancho de párrafo de 829px y 104 caracteres por línea.

golden ratio typography 2

Y la Proporción Aúrea para los elementos de título serían 47px para los de primer nivel, 29px para los de segundo nivel, y 23px para los de tercer nivel.

La herramienta permite seleccionar entre 15 de las tipografías más utilizadas, como Georgia, Arial, Verdana, o Tahoma. Para tipografías menos utilizadas, como la Tisa que uso aquí, habría que buscar analogías, en mi caso con la tipografía Georgia.

La historia del Calderón, el símbolo tipográfico que se suicidó

The fascinating study in obscure typography opens with the single symbol that inspired the entire book, a symbol that has ties to some of the greatest events in human history, including the rise of the Catholic Church and the invention of the printing press: the pilcrow. Also known as the paragraph mark, the pilcrow, for such a humble, rarely used mark, has a surprisingly complex history. Indeed, as Houston writes, the pilcrow is intertwined with the evolution of modern writing

En Design Decoded comentan el nuevo libro de Keith Houston Shady Characters: The Secret Life of Punctuation, Symbols & Other Typographical Marks, donde cuenta, entre otras delicias, la historia del Pilcrow (Calderón en castellano), el símbolo tipográfico de párrafo que hoy prácticamente está restringido a procesadores de texto.

¿Qué pasa con las fuentes gratuitas?

¿Qué pasa con las fuentes gratuitas?

¿Quién decide qué es o no es una buena tipografía? En este campo, el de la tipografía, la función debe primar sobre la forma y es por ello que una buena tipografía —en lo formal— puede convertirse en una mala tipografía si la exponemos a un escenario hostil. Así pues, lo honesto es fijar la función y en consonancia escoger la forma sin mirar la etiqueta del precio. A veces será de pago, pero otras veces no y por tanto habremos hecho «buena» una tipografía gratuita. ¡Sorpresa!(Pedro Arilla)

Usando Font Awesome More

Desde hace unos días comencé a usar en este blog la fuente tipográfica Font Awesome, que es una fuente de iconos mediante la que se pueden insertar algunos iconos sociales y símbolos en lugar de imágenes, con lo que la página es más ligera. Pueden ver el resultado al pie de este post, donde aparecen los iconos de Twitter, Facebook y Google Plus. No se trata de imágenes, como digo, sino de tipografía que se puede estilizar mediante css.

Buscando la manera de utilizar Font Awesome para incluir más iconos me encuentro la agradable sorporesa de que Guillermo Latorre había escrito hace algunas semanas un post al respecto, anunciando además la disponibilidad de Font Awesome More, que es la evolución de la otra.

Así que me la he descargado y he sustituido los archivos de la fuente antigua por la nueva versión, y ya estoy pensando en usarla para mis otros blogs. Las ventajas, como digo, son que al ser tipografías no cargan tanto la página como si fueran imágenes, y que existen iconos disponibles para prácticamente todas las redes sociales. Incluso el icono del enlace que pueden ver en las minientradas de este blog usa esa tipografía. Las posibilidades son muchas y sorprendentes.

Les remito al post de Guillermo Latorre en Hachemuda: Font Awesome 2.0: colección de iconos para la web en forma de tipo de letra, donde explica perfectamente cómo usar la fuente tipográfica.

Simplemente les comparto la manera en que la he implementado en este blog, y que consiste en los siguientes pasos:

1. Descargar la fuente Font Awesome More de la web oficial.

2. Subir los archivos a la carpeta del theme de WordPress que estoy usando.

3. Editar el archivo style.css del theme y añadir las siguientes líneas:

@font-face {
font-family: "FontAwesome";
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot');
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),
url('includes/fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
url('includes/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
url('includes/fonts/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}

Teniendo en cuenta que debes sustituir la ruta includes/fonts/fontawesome/ por aquella en la que hayas colocado los archivos de la fuente.

4. Insertar los iconos en el theme. Para ello, allí donde quieras que aparezcan debes insertar el siguiente código:

<i class="icon-twitter"></i>

En este ejemplo insertaríamos un icono de Twitter. Para ver todos los disponibles podemos consultar el listado de la web oficial: All Icons. Y debemos tener siempre en cuenta que al ser una fuente tipográfica tendrá por defecto el mismo tamaño y atributos que el texto, a menos que le apliquemos reglas css diferentes.

Belleza y fealdad en tipografía

Beauty and Ugliness in Type design : I love typography, the typography and fonts blog

At the time I was also interested in the idea of irreconcilable differences and how two extremes could be combined into a coherent whole. As an example, I looked for the most beautiful typeface in the history of typography — as well as the ugliest one — and for a way to meld them.