Cómo elegir la mejor tipografía para tu diseño


Cómo elegir la mejor tipografía para tu diseño
diseño
la mejor
paginas web
tipografía
como elegir
Cómo elegir la mejor tipografía para tu diseño

1- Informacion

2- ¿Pequeña o grande?

3- ¿Fina o ancha?

4- ¿Colores claros u oscuros?

5- ¿Estilo elegante o desenfadado?

6- ¿Sans serif o serif?

7- ¿Aplico text-shadow, degradados…?

8- Conclusión

9- Top 10 de las mejores tipografias



diseño

la mejor
paginas web
tipografía


1- Informacion

Existen una lista interminable de tipografías, pero sólo unas cuantas encajarán con el estilo que tenemos en el sitio web. Desde aquí os mostraré algunos puntos que os pueden resultar útiles para distinguir entre una tipografía aceptable y otra que no es buena para nuestro sitio.
En las tipografías para títulos, se podrían seguir estos criterios:


como elegir

2- ¿Pequeña o grande?

Los títulos son algo que deben verse rápidamente, sin esforzarse mucho, así que es altamente recomendable que sean lo suficientemente grandes como para que el lector no tenga que fijarse mucho en ellos para verlos. Eso sí, los extremos también son malos, yo recomiendo establecer un mínimo de 17 píxeles a la tipografía de los títulos.

Cómo elegir la mejor tipografía para tu diseño

diseño

3- ¿Fina o ancha?

Normalmente, las tipografías finas se utilizan para sitios con una combinación de tonos claros, debido a la ligereza que supone. Los sitios oscuros tienden a utilizar estilos de tipografías más anchas.

la mejor

paginas web

tipografía

4- ¿Colores claros u oscuros?

En los sitios con combinaciones de colores oscuros, se usa mayoritariamente tipografías claras, debido a que destacan más. Las tipografías oscuras se deberían utilizar en sitios con combinación de colores claros, por el mismo motivo que el anterior.

como elegir

Cómo elegir la mejor tipografía para tu diseño

diseño

5- ¿Estilo elegante o desenfadado?

Esto ya puede depender de cada persona, aunque personalmente concuerdo con que en sitios claros se utilicen tipografías más firmes, mientras que en sitios con colores oscuros se apliquen tipografías más divertidas y amigables, aunque, como digo, depende de cada persona.

la mejor

paginas web

tipografía

6- ¿Sans serif o serif?

Sans serif significa sin serifa, o terminación en las letras, como queramos llamarlo. En sitios con temáticas actuales, como diseño web, nuevas tecnologías, recomiendo usar fuentes sans-serif. En sitios con temas como viajes, museos, podría ser una buena opción utilizar fuentes serif.

como elegir

Cómo elegir la mejor tipografía para tu diseño

7- ¿Aplico text-shadow, degradados…?

Generalmente las propiedades CSS3 todavía no han sido aplicadas en todos los navegadores web. Si la temática que estamos tratando es sobre desarrollo web, diseño, el uso de propiedades CSS3 puede estar aceptado (hablando en la actualidad, ya que la mayoría de los navegadores no han conseguido todavía la compatibilidad con todas las propiedades CSS3). En otros sitios con temáticas como viajes, hoteles, restaurantes, deportes, todavía no encaja mucho aplicar este tipo de propiedades, según mis criterios.
Consejos de fuentes para los parrafos:
No utilices tipografías demasiado finas, dificultará su lectura. Tampoco muy pequeñas, como mínimo 10 píxeles de tamaño.
Intenta seguir el mismo estilo que en los encabezados, aunque varíe un poco. No cambies a otra tipografía totalmente distinta, intenta usar la misma.
La tipografía debe verse bien por sí misma, no puedes usar efectos como text-shadow u otros para que se visualice bien. Debe mostrarse correctamente sin usar estos efectos. Esto se puede aplicar a las tipografías en los títulos también.
Utiliza distintos tamaños de tipografía, dependiendo que sea un párrafo de contenido, bloque en la barra lateral o título. Debe diferenciarse. Generalmente el tamaño más grande lo tiene el título, seguido por el título en los bloques laterales y el texto en los párrafos.
Debes distinguir los enlaces de texto en los párrafos. Generalmente se aplica otro color al enlace (por ejemplo, azul, frente al negro del texto) o una decoración subrayado, especialmente).


diseño

8- Conclusión

Si sigues estos consejos darás una estructura más organizada a tu sitio, a la vez que ayudarás al lector a que se sienta bien leyendo tus artículos o lo que muestres. Todo depende de cada uno, así que si estás en desacuerdo con alguno de estos puntos, no lo sigas, quizás tengas otra idea mejor. Pero ante todo, recuerda, el contenido es el rey. Si deseas aplicar a tu página tipografías que no tengan los usuarios, utiliza la propiedad CSS3 @font-face. Ya sabes que tienes una lista de recursos muy útiles en este blog para desarrollar inspiración u obtener tipografías, texturas y fondos.

la mejor

9- Top 10 de las mejores tipografias


1- HELVETICA| Para muchos la Nº1

paginas web

tipografía

2- DIN | Muy manida pero efectiva

como elegir

Cómo elegir la mejor tipografía para tu diseño

3- AVENIR | Clara, sencilla y natural

diseño

la mejor

4- BODONI | Glamour por los 4 costados

paginas web

tipografía

5- FRANKLIN GOTHIC | Sobria, seria y sencilla

como elegir

Cómo elegir la mejor tipografía para tu diseño

6- FRUTIGER| Legible y reconocible

diseño

la mejor

7- GILL SANS

paginas web

tipografía

8- UNIT (FF UNIT) | Efectiva y moderna

como elegir

Cómo elegir la mejor tipografía para tu diseño

9- GOTHAM | Neoyorkina, facilona y la preferida de Obama

diseño

la mejor

10- BREE | Corporativa, divertida y guay

paginas web


tipografía

como elegir
Cómo elegir la mejor tipografía para tu diseño
diseño



la mejorpaginas webtipografía

88 comentarios - Cómo elegir la mejor tipografía para tu diseño

@DenLiz +3
como elegir Excelente post amigo +10 Favs y Reco
@RodryInter777 +1
muchas gracias!
@growanks +2

Me viene muy bien
Recomendado y a favorito
@RodryInter777 +2
gracias!
@Nightcold +1
Graciassss, a fav y ptos!
@Krieg- +1
Muy bueno, a la noche paso con pts!!
@RodryInter777 +1
gracias amigo!
@_Behringer_ +1
muy buen aporte, mañana me paso con tus +10, salu2
@RodryInter777
gracias amigo! no me dejes puntos
@Squall70 +1
Genial amigo! Muchas gracias!
@RodryInter777 +1
gracias a vos amigo!
@cofler1 +1
muy buen post Bro!

reco y a favoritos!

luego paso con los merecidos puntines
@RodryInter777 +1
gracias amigo!
@cofler1 +1
volvi Bro! con los merecidos +10

saludos!
@RodryInter777 +1
@cofler1 muchas gracias amigo!
@danigolosina +1
Muy util amigo! Me lo llevo pa la saca y mañana regresare con regalitos!!
@RodryInter777 +1
gracias amigo!
@danigolosina
Se me olvido pero regrese
@lu_PR +1


reco... a la noche te dejo +10 Besis!
@RodryInter777
gracias amiga!
@Distolo +1
Muy bueno, seguramente algo me va a servir. +10
@RodryInter777
gracias amigo!
@Sephiroth_77 +1
Gracias por este buen post

+10 y reco!!
@RodryInter777
gracias a vos amigo!
@mpkos +1
Buen aporte che!! te dejo Reco y +10pts a mucha gente le sera util!
@RodryInter777
muchas gracias amigo!
@fullstone +1
Excelente post!

Reco+10!
@RodryInter777 +1
muchas gracias amigo!
@scars121 +1
buscare como aplicar esto en algo paginas web
tipografía
@RodryInter777 +1
muchas gracias amigo!
@juliodavidkpo15 +1
Recomendado! Exelente post amigo! +8 que me queda como elegir
@RodryInter777 +1
muchas gracias amigo!
@YellowLimon +1
buenisimo ! Gracias!
@RodryInter777 +1
muchas gracias a vos amiga!
@hundra55 +1
Mi favorita es la "Monotype Corsiva"

Cómo elegir la mejor tipografía para tu diseño
@RodryInter777 +1
muchas gracias amiga!
@Mishino +1
Muy bueno loco! Lástima que me quedé sin puntos! A la noche regreso
diseño la mejor
@RodryInter777 +1
muchas gracias amigo!
@ragironaj +1
Buen aporte amigo!

reco +10
@RodryInter777
muchas gracias amigo!
@djmaster777
Excelente aporte, +10 y recomendado.
@RodryInter777 +1
muchas gracias amigo!
@WAN067
Excelente post!! y muy buena info!! +10 y reco!!
@RodryInter777 +1
muchas gracias amiga!
@Ek_22 +1
Buen post! recomendado
@RodryInter777
muchas gracias amiga!
@Valeryc +1
Muy buena la información!
@RodryInter777 +1
muchas gracias amiga!
@baterius +1
buenisimo! es lo que necesitaba, un empujoncito! puntines!
@RodryInter777
Muchas gracias!
@RodryInter777
muchas gracias amigo!
@TigerLand +1
Muy bueno! +10 y reco
@RodryInter777
muchas gracias amigo!