Etiqueta: Fuentes tipográficas

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.

¿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.

Usando Google Web Fonts en WordPress

Estos días he realizado cambios en los diseños de este blog, de La Brújula Verde y Dylan.es. En todos ellos estoy usando alguna de las 180 fuentes tipográficas que Google tiene disponibles en Google Web Fonts.

Usarlas es tan sencillo como navegar por las 180 fuentes, añadir tus favoritas a tu colección, y obtener el código que hay que insertar los archivos header.php y style.css de WordPress.

Google Web Fonts

En La Brújula Verde y Dylan.es la fuente en uso en Arimo. En este blog es Open Sans Condensed. Me falta encontrar la fuente adecuada para Viajeros.

Aunque podemos hacerlo, no es necesario descargar nada para usar las fuentes, ya que se cargan desde los servidores de Google. Atención al indicador que aparece en la esquina superior derecha, que nos dice el impacto que tendrá su uso en la carga de la web.

Sencillo tip CSS: Helvetica & Arial

Cuantas veces, declarando fuentes con CSS, hemos puesto algo así:

body {
font-family: Helvetica, Arial, Sans-Serif;
}

En realidad, si escribimos sólo esto:

body {
font-family: Sans-Serif;
}

Mac tomará la fuente Helvética por defecto, mientras que un PC hará lo mismo con la Arial.

Vía CSS-Tricks