Color, tamaño y tipo de letra

Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado.

Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir. A continuación os comentamos los atributos principales de esta etiqueta:

Atributo face

Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan.

Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>

Que se visualizaría así en una página web.

Este texto tiene otra tipografía

Nota: Aquí tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habíamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es así siempre. Si el valor del atributo contiene espacios, como es el caso de:
face="Comic Sans MS,arial,verdana"

debemos colocar las comillas para limitarlo. En caso de no tener comillas

face=Comic Sans MS,arial,verdana

se entendería que face=Comic, pero no se tendría en cuenta todo lo que sigue, porque HTML no lo asociaría al valor del atributo. En este caso HTML pensaría que las siguientes palabras (después del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimará.

Atributo size

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.

Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande.

<font size=4>Este texto es más grande</font>

Que se visualizaría así en una página web.

Este texto es más grande

Podemos asimismo modificar el tamaño de nuestra letra con respecto al del texto mostrado precedentemente definiendo el número de niveles que queremos subir o bajar en esta escala de tamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamaño de la letra. Si estabamos escribiendo previamente en 3, pasaremos automáticamente a 4.
Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamaño de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en más de una ocasión resultarnos embarazosa ya que en muchos casos desearemos que el tamaño del texto permanezca constante para que éste quepa en un determinado espacio. Veremos en su momento que esta prefijación del tamaño puede ser llevada a cabo por las hojas de estilo en cascada.

Atributo color

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo: Los colores y HTML.

Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico:

Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

<font color="red">Este texto está en rojo</font>

Que se visualizaría así en una página web.

Este texto está en rojo

Con todo esto estamos ya en disposicion de crear un texto formateado de una forma realmente elaborada.

Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio consistente en una página que tenga las siguientes características:

  • Un titular con encabezado de nivel 1, en itálica y color verde oliva.
  • Un segundo titular con encabezado de nivel 2, también de color verde oliva.
  • Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que ésta no esté en el sistema que se coloque la fuente "Arial".
Se puede ver una posible solución del ejercicio en este enlace. (Ver el código fuente de la página para ver cómo lo hemos resuelto)

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

NANCY

26/9/2003
Me parece que tu pagina es interesante, ya que muestra todas las posibilidades para realizaciones de paginas web, para persoonas que estamos en este aprendizaje.

audel

26/8/2004
¡ De verdad que es una super pagina esta que he encontrado!, los quiero felicitar y hacerles saber que me han ayudado de una manera enorme y es un excelente trabajo este manual. Soy estudiante de ingenieria y me ha servido mucho.Bravo por ustedes y pues sigan fomentando el conocimiento que es un tesoro invaluable para el ser humano.

jose

25/12/2004
son tags obsoletos .. ^^

no habría que actualizar los manuales de vez en cuando ? :P

Isabel

11/5/2005
Hola, la verdad que gracias por tanta información ntregada, pero tengo dudas yo tengo una pag. ya diagramada pero con letra muy chica, y no muchos colores y no se como subir imagenes o fotografías, como ingreso todo esto que enseñan aca.

gracias

Alejandro

30/6/2005
Felicidades!!!! Excelente sitio para aprender a desarrollar webs, solamente una duda: como puedo hacer para que un texto sea flotante o se desplace por un frame?

Vanessa

04/10/2005
Bueno, pienso que la tecnología avanza sin parar y la verdad considero este manual, muy integral, y sobre todo que abarca todas las técnicas básica, el resto queda por parte de nosotros los usuarios. FELICIDADES...

ISRAEL

30/11/2005
desde mi punto de vista me parece una pagina bastante interesante
pero la deverian de hacer más practica para el usuario

kuvazs

04/2/2006
Saludos y felicidades por esta gran pagina me he adrentado en este mundo y aky un aporte para este articulo, que creo que a todos los que incursionan en el diseño web les interesara: http://www.hacha.org/spectrum.zip , ahy podran descargarse este fantástico programa que captura todos los colores del escritorio de windows y te muestra el codigo RGB en decimal y en hexadecimal, y saludos para el creador que se lleva todo el credito Dr. Software. Hasta la proxima...

Daniel

01/4/2007
me parece excelente y muy practico el programita desarrollado en javascript para el manejo de los colores, pero al igual que a la letra se le puede asignar el color al fondo de la pagina en genaral.

sofoke

17/5/2007
Tengo una duda existe alguna forma en que se pueda mediante el body dar el tamaño a todas las letras de una pag...¿?
Gracias...

Neo

26/6/2007
Hola primeramente felicitarlos por tan maravillosa Web...
Mi pregunta es la siguiente, como puedo evitar que las personas modifiquen el tamaño de la letra usando la ruedita del mouse???
o sea es que yo no quiero que ellos modifiquen el tamaño de letra, si no que se quede con la que yo le puse...GRACIAS

elbaile

23/9/2007
Es el manual mas magnifico que he encontrado en toda la red, es magnifico, no comprendía nada del html y con esto estoy adelantando una barbaridad, felicidades y muchas gracias por facilitarnos los conocimientos, el que ha hecho este manual se merece un premio.

javier

16/11/2007
Todo ok. Quise hacer el ejercicio de este tema pero me encuentro con la dificultad de lograr con las etiquetas un efecto...por ej en el ejercico me indican
un titular con encabezado de nivel 1 en italica y color verde oliva...como lo expreso??
<p><h1><i><font color=\"olive\">Cocina para todos</font></i></h1></p> Si quiero centrar el titulo tambien debo agregar la etiqueta...a ver si lo razono bien...o corrijanme

Alexia

25/12/2008
Muy útil el manual. Yo poseía conocimientos básicos sobre html y tenía mi página con el font=Tahoma, funcionó así algún tiempo, y luego se anuló la orden y puso la fuente de la letra como predeterminada y en un tamaño grande. Revisé el código y sigue estando bien colocado... ¿Qué pasó? ¿Cómo puedo solucionarlo?

Lucy

01/3/2009
Los procedimientos para cambiar color de letra y tamaño son muy buenos, gracias por compartir sus conocimientos con las demás personas.

felystar

18/8/2009
muchas gracias
muchas gracias no tendras por casualidad los tipos de letra
para ponerlos brillantes
es que tenia un patron y le perdi

HTML usuario

23/9/2009
Letras de HTML de "Graffity
El otro dia vi una pagina web, buscando manuales, que salian letras en forma de graffity en HTML.
Queria saber si podrian decirme como hacer estas o conseguir algun programa que lo haga.
Gracias.

albert

04/11/2009
muy bueno!!
Muchas gracias por esta pagina. He empezado de 0, y no creia que nunca hiciera algo en html y paso a paso flipaba con lo que se puede hacer, super sencillo y muy bien explicado.

Jorge

04/12/2009
tipo de letra
hola esta muy buena esta pagina informativa te felicito solo tengo una pregunta, este es mi ejemplo: yo coloque en una pagina un texto grande en azul con la fuente de letra "algerian" y se ve perfecto cada vez que lo abro, pero desde otra pc ese mismo texto se ve en times new roman (creo) o parecido, el punto es que pareciera que solo mi pc me la muestra con la letra original y en otros lados no, me podran ayudar por favor en saber que sucede?? mil gracias!!

Anonimo

30/1/2010
Tu tema
muxas asias me as sido de ayuda para la fuentes de color para mi pagina web!!

JHONY

08/2/2010
AGRADECIMIENTO
Que bueno haber encontrado esta página. Los felicito por su trabajo que es invaluable en realidad. Me ha ayudado muchísimo. Espero tengan mas material que el que hasta ahora he podido leer y poner en práctica.
Mil gracias y nuevamente felicitaciones!!!!!!!!

ricardorogelio

25/5/2010
felicitaciones
esta muy bien elaborado el resumen del texto
mas claro no pudo haver sido

alex

19/6/2010
comentario
oye los procedimientos que muestras son muy buenos.....a ver cuando selo aplico ami pagina http://aguilaviva.jimdo.com/

natalia

23/6/2010
tablas
me gustaria saber como poner color en una tabla no solo en texto aunque la pagina es muy buena

ALFA MH

05/9/2010
Problema con Font size y Color
hola aigos tengo un problema, Inserte el codigo de Color y Tamaño, pero al insertarlo, me Cambia de Ciolor y Tamaño todo lo que esta en el body

este es mi codigo

<p><font color="#04B404">mano loco<font>

en cuanto pongo ese codigo me cambia el color en todo el body, eh igual si uso el de Tamaño

<html>

<head>
<title>aprendiedno html</title>
</head>

<body>


<br>no se ke sea asi ek a probar</br>
<br>no se ke sea asi ek a probar</br>
<p><b>Bienvenido,</b></p>
<p>parrafo numero 1 <b>vamos bien</b>.</p>
<p>paso a paso llegare lejos.</p>

<center>el choncho</center>
<center>el choncho</center>

<p><font color="#04B404">mano loco<font>

<div align="center">
<div>probando div</div>
<div>etiketa</div>
<div>funciono</div>
<div>div</div>
</body>

<h1>hola</h1>

<b>test 1</b>

<strong>test 2<strong>

<strong>test 3</strong>
</html>

saludos espero su repuesta

Andrea

11/11/2010
Existe un codigo en el cual;
cambie mis subtitulos de fotos en myspace
k kambie el color y el tamaño es que e intentado am poner los
codigos pero lo que no entiendo es como ponerlo por que lo quise poner pero noce
si baa acomodado el color osea am kiero cambiar el color i el tamaño al mismo tiempo
como puedo acomodar el codigo html? si alguien me explicka XD
graciias..!!

Katzujari

22/12/2010
Tags Oblsoletos
Pues con respecto a esto, yo personalmente no croe que resulten "obsoletos" como dicen, pues son los tag, o etiquetas html mas básicas y no importa cuantas versiones nuevas saquen de este código, ni cuanto intenten simplificarlo, siempre resultara mejor programar con estos tags pues en su mayuoria (por no decir todos) vienen desde la versión 1.0 de HTML y son etiquetas que simplemente, reconocera todo navegador...

sebastian

04/2/2011
rd
me sirvio para mi examen de recuperacion...el unico ah

rodigo

02/3/2011
Obsoletos
Se entiende que se consideren obsoletos estos tags junto a css, pero tuve que volver a usarlos para enviar mails con formato html (que es la única forma de hacerlo para que se vea correctamente en yahoo, gmail y similares). Agradecido, entonces.

eduardo

05/7/2011
interesante
mmmm me parecio realmente interesante,la verdad nos sirvio mucho a mi ymis compañeros por q estamos en el cole y pos estamos viendo todo este tema.gracias por explotar todos sus conocimientos y hacernolos saber es de bastante AYUDA ENSERIO Q SIP.....to bn

nadiia

12/7/2011
hOlaaa!!! =)
amm tengO una pregunta estO se puede usar en facebook???

URIEL

30/8/2011
BUENO
ME PARECE MUY BUENA TU PAGINA, NOS AYUDA MUCHO A LAS PERSONAS QUE ESTAMOS COMENZANDO EN LA CARRERA DE INFORMATICA

aironpower

27/12/2011
Memotécnico
Hola, gracias por el artículo. Sólo quiero aconsejar no utilizar el término 'memotécnico' pues además de no existir, lleva a confusión. No es que no me haga gracia, pero creo que querías decir 'mnemotécnico'.

Enhorabuena por la página.

jASW

23/4/2012
COMETARIO
No me he enterado

cristina

24/4/2012
problemas con navegador caracteres corrompidos
en dreamweaver el código parece correcto sin embargo cuando se recibe en correo y se visualiza el html unos caracteres salen corrompidos unos errores que aparecen como: rumbos.

mike

27/4/2012
agradecimiento
jeje q buena sta la pagina!! gracias por ayudarme !!

wuendy

16/5/2012
mas omenos
orrible espantoson es la djm kb

pejota

16/7/2012
aumentar la letra del correo Yahoo
Por más que leo el artículo referente a este tema, no encuentro el icono o la opción donde debo clickar para lograr &quot;aumentar&quot; el tamaño de la letra del Correo de manera permanente.Gracias

Anonimo.

09/9/2012
Hola
http://habbocity.es/refer/Mario029

laura

15/11/2012
tarea
esto no dise nada buenoç

mafervid

29/12/2012
thanks
muy buena gracias compi

karina ortiz murillo

12/4/2013
del trabajo
pues yo no le entiendo

Alex

08/10/2014
como se hace para modificar los 3 a la vez
Como se hace para modificar las 3 cosas a la vez...intente esto pero no me funcionó...
<font color="red"><font size=20><font face="Comic Sans MS,arial,verdana">SOMOS PROFESIONALES LÍDERES EN EL SECTOR CONSTRUCCIÓN Y CONSULTORÍA ENFOCADOS EN OFRECER SOLUCIONES FLEXIBLES QUE SE ADAPTAN A LOS REQUERIMIENTOS DE NUESTROS CLIENTES</font></font></font>

javier

19/10/2014
perfecto
amigo tu si sabes como hacerlo de una manera realmente clara y sin revolver las cosas muy bien

Roberto Torreón,

25/10/2014
respuesta duda
en lugar de poner esto: <font color="red"><font size=20><font face="Comic Sans MS,arial,verdana">SOMOS PROFESIONALES LÍDERES EN EL SECTOR CONSTRUCCIÓN Y CONSULTORÍA ENFOCADOS EN OFRECER SOLUCIONES FLEXIBLES QUE SE ADAPTAN A LOS REQUERIMIENTOS DE NUESTROS CLIENTES</font></font></font>
escribelo asi: <font color="red" size=20 face="Comic Sanz MS,arial,verdana">SOMOS PROFESIONALES LÍDERES EN EL SECTOR CONSTRUCCIÓN Y CONSULTORÍA ENFOCADOS EN OFRECER SOLUCIONES FLEXIBLES QUE SE ADAPTAN A LOS REQUERIMIENTOS DE NUESTROS CLIENTES</font>
te dejo el codigo que hice en este ejercicio, esta simple:
<!DOCTYPE HTML>
<html>
<title>formato de texto</title>
<head>
</head>
<body>
<h1><font color="olive"><i>Formato de texto<i></h1>
<h2><font size=2 color="olive">segundo encabezado</h2>
<div>
<font face="comic sans ms, arial" color="black" size= 5>
<p>
Este es todo el texto de la pagina que debera presentarse con una fuente distinta de la fuente por defecto
</p>

</div>

</body>
</html>

papito el negro

28/10/2014
me pica el culo
me gustas mucho besos

joker6577

06/11/2014
10
Hola, me gusta mucho tú página principal porque ayudas y explicas muy bien los diferntes atributos de las etiquetas, Gracias se agradece..para las personas que estamos comenzando el camino de las paginas Web

Pablo FM

08/12/2014
No me sirve una etiqueta
Hola saludos a todos.
Necesito ayuda con la etiqueta <br>
Cuando la quiero poner para saltarme una linea (Dejar un espacio) no me lo pone al final sino que queda todo pegado. Pero si pongo dos <br> me deja los 2, pero solo quiero que me deje una linea en blanco, no dos

miguel

15/12/2014
felicitaciones
LLevo tiempo leyendoos y ha llegado el momento de felicitaros por vuestra labor. Me está sirviendo de mucho vuestros manuales y artículos, gracias, seguir así. Un saludo.