Las tipografías de los sitios más populares

Todos vemos  los logos de Facebook, Skype, YouTube, Last.fm, etc,  en todas partes y quizás en alguna ocasión nos hemos preguntado con que tipografía se han realizado estos logos, es por eso que decidimos hacer una lista de las marcas más  conocidas de internet y su tipografía, para que nunca se encuentren enterados y les pueda servir a la hora de hacer un trabajo en la Universidad o en algún proyecto laboral:

·        Twitter: Pico Alphabet (modificada)

·         Last.fm: National (modificada)

·         Vimeo: Black Rose

·         Flickr: Frutiger Black

·         Facebook: Klavika (modificada)

·         Grooveshark: FF Nuvo

·         Envato: Agenda Italic

·         Tuts+ Network: Lubalin Graph

·         Technorati: Neo Sans Medium

·         Youtube: Alternate Gothic No. 2

·         Google: Catull BQ

·         Yahoo: Yahoo Font

·         Hulu: Futura MDd BT (modificada)

·         Bebo: Neuropol (modificada)

·         TMZ: Amelia

·         The ONION: Eagle Bold

·         Mapquest: Cheap Motel

·         Linkedin: Myriad Pro Bold

·         Skype: Helvetica Rounded Bold

·         Revision 3: VAG Rounded Black

 

http://www.ateneupopular.com/tipografia/las-tipografias-de-los-sitios-mas-populares/

Carolina Bracale

Como usar tipos de letra de calidad para tu página web

Durante mucho tiempo los desarrolladores estabamos limitados a usar un número muy reducido de tipos de letra en nuestras páginas web. Esto se debe a que los tipos de letra que podemos ver en nuestras computadoras dependen de que tengamos los archivos necesarios para representarlas en nuestro sistema operativo. Si usan Windows habrán visto que hay una carpeta llamada FONTS en la carpeta de sistema de su disco duro. El usuario promedio se conforma con los tipos de letra que vienen por defecto al instalar el sistema operativo y nunca le agrega tipos nuevos. Esto hacía que si usábamos un tipo de letra que el visitante a nuestra web no tenía en su sistema operativo entonces era reemplazado por el tipo de letra asignado por defecto. Lo malo era que el tipo de letra por defecto era muy feo y nuestra web terminaba viéndose muy mal.

Por esta razón había que ir a lo seguro y usar un tipo de letra que sabíamos que de todas maneras iba a estar presente en toda PC, es decir: Arial, Verdana, Comic Sans y Times New Roman. Pero esto ocasionó que durante mucho tiempo tuviéramos páginas muy uniformes y pobres en cuanto a tipografía. Desde hace un tiempo este panorama cambió con la aparición de formas para convertir nuestros Fonts a otros más sofisticados mediante el uso de técnicas que empleaban javascript o flash.

Desde mayo del 2010 Google puso a disposición de los desarrolladores un API que permite usar tipos de letra que se cargan desde los servidores de Google. Desde su aparición este servicio ha ido incrementando su listado de fuentes disponibles llegando a superar los 200 fonts entre los cuales podemos encontrar muchos de gran calidad y vistosidad.

La forma de incluirlos es muy sencilla y al estar alojados en los servidores de Google el tiempo de carga es muy rápido.

Para ello primero deben dirigirse al siguiente enlace:
www.google.com/webfonts

fuente: http://www.ajaxperu.com/contenido/50/1/como-usar-tipos-de-letra-de-calidad-para-tu-pagina-web

NATALIA ARRIZ 

 

 

Los mejores sitios web para Tipografías
 

En la web existen diversas paginas donde podras encontrar varios típos de tipografías (arriesgadas y seguras). Entre ellas se pueden encontrar sitios donde puedes descargar el contenido gratuitamente y otros donde tienes que pagar para poder acceder a ella. Entre las mas conocidas estan: DaFont, Veer, My Fonts, I love typograpfy y 1001 free fonts. 

 

 
 

En Veers, por ejemplo, hay mas de 12000 de tipografías desde $10.00. Encuntras entre las clasicas y modernas.
 

 

Da font es una de las mas populares debido a que su descarga es gratuita y su sencilla navegación. Las encuentras variadas, desde letras japonesas hasta algunas pensadas para puestos de tacos. Todo en una interfaz sencilla y sin mucha decoración.
 

 

En I love typography podras encontrar Ilustraciones, consejos de diseño de tipografías, tutoriales, muestras y más, todo en un mismo sitio; el cual, si bien puede servirte de inspiración, puede llegar a ser tu referencia al momento de comenzar un diseño.
 

 
 

Y por ultimo encontramos 1001 free fonts. Aca encontramos tipografías baratas o gratuitas, clasificadas de manera ordenada y con posibilidad de búsqueda de manera sencilla, de iterfaz limpia y formatos para mac o PC, además, hay más de 5000 opciones de tipografía.

 

Rodrigo T

 

Usa Fuentes personalizadas en tu web, con Google Font Directory

¿Qué es?

Google Font API y Google Font Directory son dos proyectos, muy relacionados, de Google Labs. Ambos se encuentran en fase de desarrollo beta.

El objetivo, según sus propias palabras, es hacer la web más bella, por medio de la inclusión de tipografías no-estandar. Y es que uno empieza a cansarse de Ariales, Verdanas, Trebuchets y Comic Sans demás.

 

Google Font API

Google Font API es el cerebro de todo esto. Se trata de una conjunción de Javascript y CSS, diseñada de tal modo que su implementación en cualquier web es rápida, limpia e indolora.

Generalmente, lo único que tienes que hacer es incluir esta línea en algún lugar de tu contenido.

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

 

El código varía según la tipografía que quieres incluir; en el caso anterior se trata de Tangerine. Por supuesto, Google Font API es bastante más complejo, y de hecho puedes jugar con él con muchos más parámetros. Todo ello lo puedes encontrar en profundidad en la página de ayuda, llena de ejemplos y explicaciones.

Después de haber incluido alguna de las líneas anteriores, el resto del comportamiento es igual al que sería si fuera una fuente estándar. Es decir, no necesitas cambiar más en tu contenido: bastará con utilizar estilos que hagan uso de las fuentes que has cargado.

 

Google Font Directory

Por su parte, Google Font Directory es un listado donde puedes encontrar las fuentes, todas ellas de libre distribución, que puedes cargar en tu web mediante Google Font API.

La verdad es que no hay demasiadas todavía, apenas unas pocas más de veinte, sin contar las variaciones.

Desde el propio listado puedes ver una previsualización de la tipografía, así como el listado completo de carácteres. La buena noticia es que son fuentes de calidad, completamente preparadas para escribir con nuestra querida Ñ, así como otras muchas que seguramente nunca vas a utilizar (no obstante, puedes cargar sólo la parte que te interese).

Incluso tienes la opción de descargar la fuente a tu ordenador en formato TTF, para que puedas “jugar con ella” en tus diseños.

Para terminar, no se puede omitir la mención al previsualizador de fuentes en tiempo real, muy completo y funcional.

 

http://geekazos.com/usa-fuentes-personalizadas-en-tu-web-con-google-font-directory/

Carolina Bracale

Diferentes Plataformas

 

Estos tipos de letras fueron hasta el momento las básicas para la web, pero Microsoft, junto a Windows Vista, lanzó 6 nuevos tipos de letras y las dejó al alcance de todos aquellos que quieran hacer uso de ellas. Las fuentes son las siguientes y las pueden encontrar en Windows Vista: Cambria, Consolas, Calibri, Constantia, Candara y Corbel.

Otras tipografías de Vista, como Nyala o Segoe no están disponibles legalmente para ser utilizadas por personas que no sean usuarios del Vista. Para todos aquellos usuarios de XP u otra versión que quieran hacer uso de estas fuentes, se tienen que descargar el Microsoft™ PowerPoint Viewer, el cual instalará en el sistema estos nuevos tipos de letras. Más información (en inglés) en Hunlock. En la siguiente figura tienen una comparativa entre los diferentes tipos de letras de los tres sistemas:

 

 

 

http://www.cosassencillas.com/articulos/16-tipografias-web-estandares-para-usar-con-css

         Carolina Bracale

 



Fuentes Seguras

Siguiendo un poco lo escrito en el post anterior,  no solo nos tenemos que llevar por la presencia gráfica al elegir una tipografía, también tenemos que saber que la legibilidad juega un rol muy importante en esa elección.

“La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, el interlineado y otros factores tienen una influencia decisiva en la función del tipo.”

Lewis Blackwell (1998)

El tipo de letra que se escoge puede generar dificultades para transmitir la información provocando rechazo en algunos usuarios. Un buen uso de la tipografía depende del contraste visual entre letras y bloques de texto con el blanco, y es natural ya que el ojo  se siente atraído por el contraste. Por ejemplo la utilización de colores demasiado parecidos  entre el texto y el fondo, dificultan la amenidad de lectura. Hay que buscar un contraste fuerte; colores claros con oscuros, colores muy saturados con poco saturados.

Las familias que consiguen mayor diferenciación entre caracteres parecen ser más legibles. Si el diseño de letras es muy homogéneo dificulta la lectura.

En esta tabla vemos cuales son las tipografias comunes y seguras para la web. Normalmente, las tipografías se trabajan en píxeles, que son equivalentes a puntos cuando la resolución de la pantalla es de 72 ppp (píxeles por pulgada). A modo de orientación, trabajar con 11 o 12 píxeles facilita la lectura de la mayoría de las tipografías, y casi nunca se trabaja con tipografías menores a 8 o 9 píxeles.

Rodrigo Tovar

A la hora de manejar fuentes en una página web tenemos que tener en cuenta las limitaciones que presenta este medio particular.

Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrán el mismo aspecto (o el más parecido posible) sea cual sea la pareja SO-navegador de cada usuario.
Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lógico diseñar nuestras páginas web buscando la mayor compatibilidad tipográfica entre ambos sistemas.
Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son:

En cuanto a Linux, el número de fuentes instaladas por defecto depende de la versión, aunque suelen ser pocas.

Estas fuentes por defecto se van ampliando según las aplicaciones instaladas posteriormente. Las aplicaciones de ofimática suelen instalar fuentes propias, así como los navegadores web, especialmente Internet Explorer.

Por otra parte, Microsoft, Apple y las distintas empresas involucradas en Linux ofrecen a sus usuarios paquetes gratuitos de fuentes, por lo que el número de ellas presentes en una máquina puede aumentar considerablemente. Un ejemplo de estos paquetes es Windows Font Pack, que facilita fuentes tanto para entornos PC y Mac.

Buscando siempre la máxima compatibilidad entre plataformas, en el diseño de páginas web deberemos usar tan solo fuentes seguras, prescindiendo de las adicionales que hayan podido instalar en los ordenadores aplicaciones complementarias o los propios usuarios.

fuente: http://www.desarrolloweb.com/articulos/1710.php

Natalia Arriz

Diseño para la Web

 

Las fuentes "Sans-serif" son aquellas sin esos pequeños remates en los extremos, por ejemplo: la letra Arial es una de este tipo de letra.

 

Así mismoo, en los monitores, por su menor resolucion en comparacion con el papel, los pequeños remates aparecen menos definidos y lo que hacen es dificultar la lectura, por tanto en la web es mas recomendable utilizar fuentes "sans- serif".

 

Por otro lado vemos otros factores que van de la mano junto a la fuente que sea seleccionada estos son:

 

1. Color y contraste con el fondo: la comibinacion mas adecuada para el 90% de los casoses texto negro sobre fondo blanco. En todo caso, si se decide utilizar color en el fondo, es aconsejable utilizar colores suaves y claros y siempre un color de texto oscuro, por supuesto, las cabaceras de un sitio web son una excepcion.

 

2. Alineacion de texto: se recomienda alineacion a la izquierda.

 

3. Uso de negritas: deben utilizarse solo para enfatizar algunas palabras, resaltar puntos claves dentro de la informacion o resaltar alguna frase de gran importancia.Si son utilizadas correctamente ayudan a ojear rapidamente el texto y facilitan rapida comprension de la informacion.

 

4. Tamaño de la fuente:  un tamaño de entre 10 y 13 suele ser el más adecuado para la mayoria de textos en la web, a excepcion de titulos y nombre de apartado, en los que perfectamente puede utilizarse un tamaño superior.

 

5. Uso de mayúsculas: son mucho mas difíciles de leer que las minúsculas por ellos no son recomendadas para textos largos sino para palabras sueltas.

 

6. El subrayado: es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la web no se debe emplear con este objetivo ya que da lugar a confusion con los vínculos.

 

7. Una página web no deberia utilizar mas de dos fuentes diferentes

 

 

 

 

 

 

 

www.guiawebmaster.com/diseno-web/tipografia-web.php

 

Carolina Bracale