Frogx.Three » tipografias...

Infografía: Guia Tipográfica

Jorge — Thu, 09 Feb 2012 14:00:39 +0000

Que les parece esta infografía, es una guia tipográfica bastante sencilla de entender, en ella se muestran las características de las tipografías y algunos ejemplos de estilos tipográficos, sinceramente no es la más completa pero puede servir como una introducción explicada sin tantos tecnicismos de diseñadores que luego pueden revolver a un diseñador novato.

Visto en: Co.Design

Excelente diseño de poster Comic Sans

Jorge — Mon, 06 Feb 2012 19:15:58 +0000

Excelente diseño de poster Comic Sans, que no utiliza la tipografía, quizas una de las tipografías que mas evitamos los diseñadores, pero en este caso fue utilizada como inspiración, en realidad el poster es parte de la campaña publicitaria de la Universidad Shillonton de Nueva York, el poster lleva el titulo de “Exceed your potential” o lo que sería lo mismo “Excede tu potencial”, fue diseñado por Rodrigo Burdman.

Enlace: Rodrigo Burdman Behance

Video Documental: A Letterpress Film

Jorge — Mon, 06 Feb 2012 15:00:13 +0000

Increíble video documental que nos remontan un poco en la historia de los principios de la imprenta y tipografía, el como se imprimían los periódicos utilizando pequeñas piezas de metal que presentaban una letra, el ordenarlas para formar palabras y el uso de la tinta, es realmente interesante, el video me ha fascinado ya que muestra el proceso de imprenta del pasado, el video lleva el titulo de “Upside Down, Left to Right. A Letterpress Film“, y fue producido por Danny Cooke .

Enlace: Danny Cooke | Ver con Subtítulos

Fuentes Web, soluciones y como utilizarlas

Jorge — Fri, 27 Jan 2012 15:04:30 +0000

Cada día son mas las paginas que utilizan HTML5 y CSS3, y también los navegadores cada vez ofrecen mayor compatibilidad con estos estándares web, una de las características que estos estándares integran es el soporte para fuentes web desde el servidor via CSS utilizando @font-face y no desde el cliente (la maquina del usuario).

Antes en diseño web los diseñadores nos teníamos que limitar a utilizar fuentes comunes que podían ser visualizadas desde cualquier navegador y sistema operativo, las más comunes eran: Arial, Times New Roman, Impact, Serif, Andale Mono, Trebuchet MS y Verdana.

En la actualidad las necesidades en diseño web, son distintas y los diseñadores buscamos poder utilizar tipografías mas estilizadas que tengan un mayor impacto visual en los visitantes, para lograr esto han aparecido en los últimos años algunas herramientas, de las cuales vamos a hablarles un poco y como utilizarlas.

sIFR

Los diseñadores siempre peleamos la posibilidad de usar otro tipo de fuentes mas estilizadas en nuestros diseños sin tener que usar imagenes, al principio la primera alternativa que salió fue sIFR que te permitia utilizar otras fuentes diferentes a las básicas mediante Flash, esta te permitia embeber un objeto flash el cual imprimia tu texto con la fuente que previamente le habías configurado en el código.

Pero el primer problema como siempre con Flash era que aumentaba el consumo de recursos del servidor y en ocasiones la compatibilidad del navegador provocaba que el texto saliera en blanco, y por ultimo sIFR ha quedado rezagado ya que Flash no es compatible con los navegadores para móviles y la gran mayoría de estos le han dado la espalda al soporte para Flash, de este modo sIFR se ha convertido en una alternativa pero que no es “todo terreno”.

Pero como todo, el desarrollo y la integración de los estándares en los navegadores cada vez fue mayor, y también surgió un problema el 90% de los usuarios que teníamos una enorme biblioteca de fuentes las teníamos en formatos legibles para nuestro sistema operativo especifico, y en web los navegadores entre su guerra había optado por ofrecer soporte para distintos formatos: EOT, WOFF, SVG, etc.

Como utilizar sIFR 3.0

Descargar la ultima versión de sIFR (Actualmente es 3.436 estable) (Link)
Sube lor archivos que descomprimiste del archivo que descargaste y agrega el siguiente código HTML, entre las etiquetas

Por ultimo en tu archivo CSS debes incluir esto para asignar tu fuente a las etiquetas deseadas.

.sIFR-active h1 { visibility: hidden; font-family: Verdana; line-height: 1em; font-size: 18px; }

Convertir fuentes TTF a EOT

Entonces aparecieron las aplicaciones para convertir fuentes TTF (las mas comunes) a estos formatos, pero eran muy complicadas o costosas, entonces los usuarios exigimos algo de acuerdo a nuestras necesidades, porque claro no todos los diseñadores gráficos o web somos programadores o expertos frente a una computadora.

Tras las exigencias aparecio Font Squirrel con un convertidor de fuentes, el cual permite convertir fuentes TTF a EOT y los otros formatos ofreciendo la posibilidad de utilizar nuestras fuentes en nuestra pagina web utilizando @font-face de tal modo que todos los usuarios vean el mismo estilo tipografico en nuestro diseño y que puedan interactuar con el texto copiando y seleccionando los fragmentos deseados, pero (mas peros) ahi no acaba también tiene sus carencias el sistema de Font Squirrel y no quiere decir que sean errores o este sea malo, de hecho no son carencias es respeto a las licencias, el convertidor para fuentes web no permite convertir cualquier fuente, por ejemplo si intentas convertir Helvetica para Web el sistema no te va a dejar porque esta tiene licencias comerciales que no permiten dicho proceso. Para entonces CSS3 ya se empezaba a esparcir cada vez mas por la web, entonces en Font Squirrel empezaron a generar un repositorio de fuentes web gratis que podemos descargar para utilizarlas en nuestro equipo o podemos descargar los formatos necesarios para utilizarlas en nuestra pagina web, este movimiento fue algo genial para muchos diseñadores.

Como utilizar fuentes descargas de Font Squirrel utilizando @font-face

Ir a Font Squirrel y descargar la fuente que deseas o convertir tu fuente (generador).
Ahora sube la fuente que descargaste o creaste a tu servidor
Y en el archivo CSS debes incluir un código similar a este, recuerda reemplazar “myfont-webfont” por el nombre de archivo de la fuente que subiste.

@font-face {
	font-family: 'MyFontFamily_Squirrel';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Por ultimo para utilizar tu fuente en las etiquetas que desees utilizaras el valor que asignaste en el parametro font-family dentro del código mencionado anteriormente, ejemplo:

h1 { font-family: ‘MyFontFamily_Squirrel’, Arial, serif; font-weight: 400; }

Más información de como utilizar @font-face en: font spring

Este metodo tiene la limitante de compatibilidad con los navegadores web, sin embargo la gran mayoría de los navegadores modernos ya ofrecen soporte para @font-face, he aquí la lista: Safari 5.03+, IE 6-9+, Firefox 3.6-4+, Chrome 8+, iOS 3.2-4.2+, Android 2.2-2.3+, Opera 11+

Google Web Fonts

Y llego el grande, Google lanzo Google Web Fonts que en teoría ofrece el mismo servicio que Font Squirrel pero no, Google fue un poco mas halla, si para implementar las fuentes que descargabas necesitabas agregar 10 lineas en tu archivo CSS, google simplifico esto, y en su servicio ofreció la posibilidad de insertar fuentes web en tu pagina unicamente insertando un fragmento de código HTML, sin duda Google llego y ofreció mejores características, entre ellas: Simplifico la forma de uso y puso sus servidores para que no tengamos que descargar las fuentes y subirlas a nuestro servidor, de esta manera reducio el tiempo de carga de nuestras paginas.

El servicio de Google elimino la necesidad de descargar y subir archivos al servidor, también la necesidad de utilizar @font-face.

También Google ofrece la posibilidad de descargar las fuentes para utilizarlas en nuestro equipo, actualmente el directorio de fuentes gratis en Google Web Fonts incluye un total de 436 tipografías y la verdad son muy buenas, a diferencia del directorio de Font Squirrel muchas de las fuentes publicadas en Google Web Fonts son exclusivas del directorio.

Como utilizar Google Web Fonts

Debes entrar a Google Web Fonts
Selecciona la tipografía que deseas utilizar en tu pagina.

Quick Use: Si solo utilizaras una fuente
Add to Collection: Si utilizaras mas de una.
En la opción QuickUse se abrira otra pagina baja y encontraras un código similar a este:

Copia y pega tal cual entre las etiquetas de tu pagina, de este modo tu pagina le pedira a Google las fuentes que seleccionaste.
Ahora en tu CSS para aplicar las fuentes seleccionadas a tus etiquetas, en las propiedades CSS de font-family unicamente tendrías que añadir el nombre de tu fuente, por ejemplo:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

Listo de este modo tu sitio ya estaría mostrando las fuentes que seleccionaste, a estas fuentes puedes cambiarles el color, tamaño o agregarles efectos CSS tal como si lo hicieras con una fuente normal.

Otras soluciones que ofrecen fuentes web gratis y con costo

OpenType

Las tipografías usualmente poseen las características básicas, como Mayúsculas, Minúsculas, numerales, símbolos de puntuación y acentuación, sin embargo las tipografías profesionales tienen aun más características que permiten que las tipografías tengan mas estilo, algunas de las características extras son:

Common ligatures	“liga”
Discretionary ligatures	“dlig”
Small caps	“smcp”
Lining numerals	“lnum”
Old-style numerals	“onum”
Swash alternates (index number)	“swsh” n
Styleset (01–20)	“ss01–20”

CSS3 tiene soporte para utilizar estas caracteristicas sin embargo no asi todos los navegadores, los navegadores que ofrecen soporte a estas características son Firefox, Internet Explorer 10 y Google Ghrome para Windows, la siguiente imagen muestra un ejemplo utilizando la tipografía Magneta.

Como afecta OpenType en los programas de diseño? Bueno las siguientes tablas te dan una idea de en que programas puedes hacer uso de estándar para tipografías.

Mac OS
Application	OpenType Support
Microsoft Word®	Basic
Adobe InDesign®	Basic, Multilingual, Advanced
Adobe Photoshop®	Basic, Multilingual, Advanced
Adobe Illustrator®	Basic, Multilingual (.ttf only)
Quark XPress®	Basic
Macromedia Freehand®	Basic
Corel Draw®	Basic, Multilingual

Microsoft Windows
*Application*	*OpenType Support*
Microsoft Word	Basic, Multilingual (.ttf only)
Adobe InDesign	Basic, Multilingual, Advanced
Adobe Photoshop	Basic, Multilingual, Advanced
Adobe Illustrator	Basic, Multilingual (.ttf only)
Quark XPress	Basic
Macromedia Freehand	Basic
Corel Draw	Basic, Multilingual

Como utilizar OpenType en Web

Es muy sencillo en este caso no tenemos que instalar nada, solo agregar algunas lineas a nuestro código CSS, lo unico que necesitamos es que los navegadores del lado del cliente ofrezcan soporte para estas características y claro que las fuentes posean alguna de las características mencionadas arriba, les dejo el snippet:

h1 {

-moz-font-feature-settings: "liga=1, dlig=1";

-ms-font-feature-settings: "liga", "dlig";

-webkit-font-feature-settings: "liga", "dlig";

-o-font-feature-settings: "liga", "dlig";

font-feature-settings: "liga", "dlig";

Más Información sobre Open Type:

Espero que este articulo sea de utilidad para ustedes, hemos intentado cubrir la mayoría de los aspectos y principales fuentes para el uso tipografías en Web y como utilizarlas, así como OpenType un estándar que se empieza a utilizar con CSS3 que permitira agregarles aun mas estilo a las tipografías que usemos.

25 Tutoriales Illustrator para crear efectos de texto

Jorge — Sun, 22 Jan 2012 13:56:55 +0000

Tutoriales Illustrator para crear efectos de texto interesantes para practicar y hacer que las letras tengan otro sentido y tengan un mayor impacto visual, los tutoriales son bastante sencillos y repasan algunas de las herramientas mas básicas de Adobe Illustrator.

Son un total de 25 excelentes tutoriales Adobe Illustrator los que han recopilado en Naldzgraphics, como siempre les comparto algunos y al final la liga a la fuente donde pueden ver todos los tutoriales.

Tira de texto

Efecto de texto con bordes bordados

Texto bañado en oro

Efecto de texto en 3D con patrones

Visto en: Naldzgraphics

Identificar fuentes web utilizadas en Internet con Fount

Jorge — Thu, 12 Jan 2012 13:35:36 +0000

Fount es una excelente utilidad que te permite identificar las fuentes web que utilizan en las paginas de Internet que visitas, es muy sencilla de utilizar unicamente tienes que instalarla en tu navegador web, existen versiones para: Google Chrome, Firefox, Safari e Internet Explorer 8+.

Se instala como un marcador en tu navegador, cuando desees saber que tipografía es la utilizada en una pagina web, solo tienes que hacer click en el icono del marcador y luego click sobre la palabra o frase que utilize la tipografía que deseas conocer, muy interesante y útil la herramienta se las recomiendo mucho ya que sería de gran utilidad para diseño web y así poder identificar las fuentes web utilizadas por los sitios.

Enlace: Fount

Increíbles posters tipográficos

Jorge — Tue, 10 Jan 2012 12:05:51 +0000

Quienes admiren las tipografías seguro apreciaran lo geniales que están estos posters tipográficos, personalmente me gustan mucho y la tipografía y sus diseño igual, desafortunadamente para mi mi colección de tipografías no es muy buena así que aun no puedo hacer diseño como estos, así que me quedare admirando estos un tiempo mas.

Anteriormente ya habíamos publicado galerías de posters tipográficos, así que les invitamos a visitarlas y admirarlas.

Fuente: Vandelay Design

Las mejores tipografías gratis de 2011

Jorge — Mon, 26 Dec 2011 13:18:41 +0000

Continúan las recopilaciones del 2011, ahora toca una recopilación realizada por DesignDeep quienes juntaron 45 de las mejores tipografías gratis de 2011, hicieron un excelente trabajo todas son de excelente calidad y de todos los tipos y estilos, como siempre les dejo algunas de la recopilación que mas nos han gustado con los enlaces de descarga directos y al final la liga a la fuente donde podrán ver y descargar en su totalidad las 45 tipografías gratuitas.

Duke

RBNo2

Sansus Webissimo

Infinity

Core Humanist Sans

Fuente: 45 Free Fonts 2011

Más de 50 recursos navideños: Iconos, brushes, plantillas y tipografías.

Jorge — Mon, 19 Dec 2011 16:06:17 +0000

Ya ha dias para celebrar la navidad queremos dejarlos algunos recursos más para diseñar sus sitios web o algunas tarjetas navideñas que necesiten diseñar ya sea para enviarles a sus clientes o para algun proyecto pendiente, esta recopilación incluye más de 50 recursos de diseño entre iconos, brushes, plantillas web, tipografías, fondos web de navidad y uno que otro wallpaper.

Les dejo algunos enlaces directos a recursos que han llamado mi atención y al final el enlace a la fuente donde podrán elegir bien los recursos que ustedes prefieran, saludos.

Iconos navideños

Brushes de copos de nieve

Plantilla WordPress de Navidad

Tipografías navideñas

Fondos web de navidad

Fuente: PSD Blast

Tipografías gratis para descargar

Jorge — Fri, 09 Dec 2011 18:02:39 +0000

Antes de acabar la semana les dejo algunos recursos mas, para los que tengamos que trabajar fin de semana en algún diseño, les dejo alguna tipografías para descargar gratis, espero sean de utilidad para todos, algunas son versiones Demo es decir que posiblemente vengan en una densidad regular y no sus versiones italica y bold.

Bueno les dejo las imagenes con los preview, solo tienen que hacer click en la imagen para ir a descargar.