Css letras

Las letras toman un papel muy importante en el diseño de las paginas, por eso hoy vamos a ver los distintos tipos de letras que hay, los estilos, tamaños, etc..

Los colores de las letras

Para elegir el un color basta con poner en el css color:codigo, donde codigo es el codigo hex o rgb del color.
Ejemplos:

Esto es un ejemplo de letra color rojo, utilizando el nombre del color en ingles

color:red

Esto es un ejemplo de letra color blanco, utilizando codigo hex

color:#fff

Esto es un ejemplo de letra color gris oscuro, utilizando codigo hex

color:#242424

Esto es un ejemplo de letra color amarillo, utilizando codigo rgb

color:rgb(255,255,0)

Tipos de letras o fuentes

Para elegir el tipo de letra hay que poner font-family y como valor el nombre de la fuente.
Las mas conocidas son:

Esto es un ejemplo de la fuente arial serif

font-family: arial, serif

Esto es un ejemplo de la fuente Homer Simpson cursive

font-family: Homer Simpson, cursive

Esto es un ejemplo de la fuente Tahoma sans-serif

font-family: Tahoma, sans-serif

Esto es un ejemplo de la fuente Palatino

font-family: Palatino

Esto es un ejemplo de la fuente Verdana

font-family: Verdana

Esto es un ejemplo de la fuente Courier

font-family: Courier

Los tamaños

Para definir el tamaño vasta con poner en el css font-size:Valor, donde el valor sera el numero en px que definira el maño.
Ejemplos:

Esto es un texto en tamaño de 8px

font-size:8px

Esto es un texto en tamaño de 14px

font-size:14px

Esto es un texto en tamaño de 24px

font-size:24px

Estilos de letras

Hay tres estilos de letras: normal, italic y oblique.

Esto es un texto con estilo normal

font-style:normal

Esto es un texto con estilo italic

font-style:italic

Esto es un texto con estilo oblique

font-style:oblique

Grosor del texto

Para especificar el grosor del texto se utiliza font-weight: valor, donde valor es el numero entre 100 a 900, mientras mas alto el numero, la letra sera mas gruesa.

Esto es un texto con una letra con grosor de 100

font-weight:100

Esto es un texto con una letra con grosor de 400

font-weight:400

Esto es un texto con una letra con grosor de 800

font-weight:800

La altura de la linea del texto

Para especificarla se utiliza line-height:valor.

Ejemplos:

Esto es un texto con una altura de linea de 11px

line-height:11px

Esto es un texto con una altura de linea de 20px

line-height:20px

Esto es un texto con una altura de linea de 30px

line-height:30px

Esos es todo, por ultimo si quieren simular el efecto de letras pixeladas como tengo el los titulos de los post solo tienen que poner lo siguiente:

CSS

.pixel {font-family:small fonts; font-size: 7px; letter-spacing: 0px; line-height: 10px;text-transform: uppercase;}

HTML

<span class="pixel">Ejemplo de letra pixelada</span>

FIN DEL POST