WEBASTICA l 10 hermosos ejemplos de composiciones tipográficas en CSS

Inicio » Tipografías » 10 hermosos ejemplos de composiciones tipográficas en CSS

10 hermosos ejemplos de composiciones tipográficas en CSS

septiembre 8, 2009 | No comments | Tipografías

Últimamente he estado muy interesado en qué medida podemos crear y mostrar atractivas composiciones tipográficas sólo con CSS. Claro que se pueden utilizar imágenes o sIFR para producir tipografías muy hermosas, pero hay algo único y especial en el uso de CSS. Usar CSS también resulta sumamente útil, si tomamos en cuenta el poco peso y gran flexibilidad del mismo, especialmente en los sitios web impulsados por un CMS.

Piense en lo difícil de obtener imágenes sIFR o cuando se desea reproducir la tipografía o tipo de letra en más de 100 páginas de alimentación a través de un CMS. Si podemos conseguir que a través de composiciones tipográficas hechas en CSS esta situación sea fácil y sin compromiso.

Hay muchos grandes sitios que muestran hermosas tipografías utilizando sólo CSS, entonces nos preguntamos como lo hicieron y como obtuvieron esos hermosos resultados, para ello es necesario primero comprender la lógica del buen uso del CSS, para presentar hermosas composiciones tipograficas.

En esta primera entrada te muestro 10 ejemplos de lo que podemos lograr haciendo un uso creativo de las propiedades CSS en la personalizacion de los textos.

Ejemplo 1

Pequeño encabezado
font-family: Gill Sans, Verdana;
font-size: 11px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;

Titulo principal
font-family: times, Times New Roman, times-roman, georgia, serif;
color: #444;
margin: 0;
padding: 0px 0px 6px 0px;
font-size: 51px;
line-height: 44px;
letter-spacing: -2px;
font-weight: bold;

Ejemplo 2

Encabezado
font-family:Georgia,serif;
color:#4E443C;
font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0;

Parrafo
font-family: “Helvetica Neue”, “Lucida Grande”, Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
margin-top: .5em; color: #666;

Inicio de parrafo
font-family:Georgia,serif;
font-size: .8em;
font-weight: bold;
text-transform:uppercase;
letter-spacing:2px;

Ejemplo 3

Encabezado medio
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 28px;
line-height: 40px;
letter-spacing: -1px;color: #444;

Parrafo
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #444;

Encabezado grande
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 48px;
line-height: 40px;
letter-spacing: -1px;
color: #444;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-weight: 100;

Ejemplo 4

Parrafo superior
p:first-letter{
text-transform: uppercase;
}

p {
color: #424242;
font-family: “Adobe Caslon Pro”, “Hoefler Text”, Georgia, Garamond, Times, serif;
letter-spacing:0.1em;
text-align:center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 14pt;
font-variant: small-caps;
}

Encabezado Twitter
font-family: “Adobe Caslon Pro”, “Hoefler Text”, Georgia, Garamond, Times, serif;
font-style: italic;
color: #424242;}

a {
font-style: normal;
font-variant: small-caps;
text-decoration: none;
color: #afafaf;
font-size: 14px;
}

Ejemplo 5

Encabezado
font-family: Georgia,”Times New Roman”,serif;
font-size: 12px;
font-weight: bold;
color: #600;
line-height: 22px;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px

Fecha
font-family: Georgia,”Times New Roman”,serif;
font-size: 10px;
line-height: 22px;
text-transform: uppercase;
letter-spacing: 2px;

Ejemplo 6

Fecha
font-size: 12px;
font-family: Georgia, ‘Times New Roman’, serif;
color: #000;
text-align: center;
font-weight: 100; }

Bloque de parrafo
font-family: ‘Hoefler Text’, Georgia, ‘Times New Roman’, serif;
font-weight: normal;
font-size: 1.75em;
letter-spacing: .2em;
line-height: 1.1em;
margin:0px;
text-align: center;
text-transform: uppercase;

Ejemplo 7

Texto blanco
margin: 0px;
padding: 0px;
font-size: 11px;
color: #fff;
clear: both;
padding-bottom: 6px;

Titulo gris
display: block;
color: #666;
font-size: 9px;
padding-top: 5px;

Encabezado
margin: 0px;
padding: 0px;
display: block;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
letter-spacing: -1px;
color: #fff;
line-height: 24px;

Ejemplo 8

Encabezado
font-family: Georgia, “Times New Roman”, Times, serif;
font-size:24px;
margin-top: 5px; margin-bottom: 0px;
text-align: center;
font-weight: normal;
color: #222;

Sub-titulos
font-family: “Lucida Grande”, Tahoma;
font-size: 10px;
font-weight: lighter;
font-variant: normal;
text-transform: uppercase;
color: #666666;
margin-top: 10px;
text-align: center!important;
letter-spacing: 0.3em;

Ejemplo 9

Fecha
font-size: 85%;
text-transform: uppercase;
letter-spacing: 1px;
color: #bbb;
font-size: 10px;
font-family: “Lucida Grande”, Verdana, Helvetica, Arial, sans-serif;
font-weight: 100;

Encabezado
font: bold 34px “Century Schoolbook”, Georgia, Times, serif;
color: #333;
line-height: 90%;
margin: .2em 0 .4em 0;
letter-spacing: -2px;

Etiqueta
color: #76879b;
font-size: 10px;
margin: 5px;
font-family: “Lucida Grande”, Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;

Ejemplo 10

Encabezado
font-family:georgia, serif;
color:#381704;
font-size:10px;
letter-spacing:0.1em;
line-height:200%;
padding-top:11px;

Numero
font-family:georgia, serif;
color:#3B200F;
font-size:16px;
font-weight:bold;
line-height:125%;
text-align:center;

Autor
font-family:georgia, serif;
color:#786E69;
font-size:10px;
font-weight:bold;
letter-spacing:.1em;
text-transform:uppercase;
padding-bottom:3px;

font-family:georgia, serif;
color:#786E69;
font-size:10px;
font-weight:bold;
font-style:italic;
letter-spacing:.1em;
padding-bottom:35px;

Parrafo
font-family:georgia,serif;
color:#381704;
font-size:12px;
font-weight:normal;
line-height:150%;
padding:0px;

Henry Ramirez Devanyhenry@ramirezdevany.comwww.ramirezdevany.com

¿te gusta-?