SlideShare una empresa de Scribd logo
Tipografía y color Johnny Alexander Pinzón Velasco
Tipografía En general es muy importante una buena estructuración del texto a lo largo de la página, empleando párrafos cortos que faciliten la lectura y poniendo títulos destacados en las distintas secciones del texto. Además, es mejor no apurar mucho los bordes de la pantalla del ordenador: las líneas cortas se leen con mayor facilidad que las largas. Podemos forzar esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe solo el 85-90 % de la pantalla.
Tipos de Fuentes Hay una diferencia importante entre legibilidad y comprensión. Mientras que la legibilidad se refiere a la facilidad con la que los lectores pueden decodificar la información en un documento, la comprensión se refiere al contenido del mismo. Las dos tienen un efecto importante en el éxito o fracaso de la lectura del documento; la comprensión no puede ser adquirida sin la legibilidad.
Ajuste del espacio entre letras (kerning) El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta los textos son más legibles y el aspecto estético es mucho mejor. Respecto al espacio que ocupa cada letra existen dos tipos de fuente: las proporcionales y las no proporcionales. En las proporcionales este espacio depende del carácter, por ejemplo una "i" ocupa menos espacio que una "M".  En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
Color y contraste con el fondo La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En pocos casos se recomienda utilizar un color de fondo, en cualquier caso para textos largos siempre es más adecuado texto oscuro sobre un fondo claro. Solo es adecuado usar fondo oscuro y texto claro para títulos, cabeceras o celdas, sin embargo el problema es que los fondos oscuros con texto claro son muy empleados en publicidad y ello puede provocar que contenidos no publicitarios sean afectados por la ceguera a los banners y por tanto ignorados por los Usuarios.
Negritas Las negritas deben utilizarse solo para enfatizar algunas palabras, siempre de manera muy restringida y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información. Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas Webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.
Tamaños de letra Un tamaño de entre 10 y 12 puntos suele ser el estándar para la mayoría de textos, sin embargo lo realmente importante es que el tamaño de fuente no sea fijo y pueda ser modificado libremente por los usuarios mediante la opción correspondiente del navegador.
Color de los textos Uno de los factores más importante de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se sitúan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condición muy importante en obras de contenido textual importante. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de contraste de color.
La Teoría del color Define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
Contraste de Tono Está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color. Así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.

Más contenido relacionado

Similar a Tipografía y color

Eq4 tipografia
Eq4 tipografiaEq4 tipografia
Eq4 tipografia
gonzalo canales
 
T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenografico
AnnabellYar
 
La legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráficoLa legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráfico
Gráficas Azorín
 
Presentaciones efectivas
Presentaciones efectivasPresentaciones efectivas
Presentaciones efectivas
bitwbyk
 
Crear textos en lectura fácil
Crear textos en lectura fácilCrear textos en lectura fácil
Crear textos en lectura fácil
amluise
 
2. elem graficos 2003
2. elem graficos 20032. elem graficos 2003
2. elem graficos 2003
Martin Gonzalez
 
Tipografia
TipografiaTipografia
Tipografia
Julietha Gomez
 
el texto en multimedia
el texto en multimediael texto en multimedia
el texto en multimedia
65519584
 
Periodismo digital
Periodismo digitalPeriodismo digital
Periodismo digital
escenaenelmar
 
4.2 composición
4.2 composición4.2 composición
4.2 composición
Luis Amaya
 
4.2 composicion
4.2 composicion4.2 composicion
4.2 composicion
Luis Amaya
 
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacionRequisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
tateii
 
Consejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpointConsejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpoint
John Carabal
 
Pautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPointsPautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPoints
pruebas
 
Cuadro (alternativa)
Cuadro (alternativa)Cuadro (alternativa)
Cuadro (alternativa)
lolopop123
 
cuadro conceptual
cuadro conceptualcuadro conceptual
cuadro conceptual
Juan Pablo Ortega Villa
 
Tipografia
TipografiaTipografia
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptx
Johanna767825
 
Power point
Power pointPower point
Power point
arely950111
 
Power point
Power pointPower point
Power point
arely950111
 

Similar a Tipografía y color (20)

Eq4 tipografia
Eq4 tipografiaEq4 tipografia
Eq4 tipografia
 
T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenografico
 
La legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráficoLa legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráfico
 
Presentaciones efectivas
Presentaciones efectivasPresentaciones efectivas
Presentaciones efectivas
 
Crear textos en lectura fácil
Crear textos en lectura fácilCrear textos en lectura fácil
Crear textos en lectura fácil
 
2. elem graficos 2003
2. elem graficos 20032. elem graficos 2003
2. elem graficos 2003
 
Tipografia
TipografiaTipografia
Tipografia
 
el texto en multimedia
el texto en multimediael texto en multimedia
el texto en multimedia
 
Periodismo digital
Periodismo digitalPeriodismo digital
Periodismo digital
 
4.2 composición
4.2 composición4.2 composición
4.2 composición
 
4.2 composicion
4.2 composicion4.2 composicion
4.2 composicion
 
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacionRequisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
 
Consejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpointConsejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpoint
 
Pautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPointsPautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPoints
 
Cuadro (alternativa)
Cuadro (alternativa)Cuadro (alternativa)
Cuadro (alternativa)
 
cuadro conceptual
cuadro conceptualcuadro conceptual
cuadro conceptual
 
Tipografia
TipografiaTipografia
Tipografia
 
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptx
 
Power point
Power pointPower point
Power point
 
Power point
Power pointPower point
Power point
 

Último

Proyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en planoProyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en plano
jordanodominguez
 
Recetas_bioplasticos con materiales organicos
Recetas_bioplasticos con materiales organicosRecetas_bioplasticos con materiales organicos
Recetas_bioplasticos con materiales organicos
VivianaPoncedeLen1
 
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIAACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
EmilyHumbria
 
Característica del Arte Gótico breve reseña
Característica del Arte Gótico breve reseñaCaracterística del Arte Gótico breve reseña
Característica del Arte Gótico breve reseña
bonillacaceress
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
tatianezpapa
 
Portfolio UX/UI & Branding Designer 2024 de Sonya Palma
Portfolio UX/UI & Branding Designer 2024 de Sonya PalmaPortfolio UX/UI & Branding Designer 2024 de Sonya Palma
Portfolio UX/UI & Branding Designer 2024 de Sonya Palma
Sonya Palma
 
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdfPresentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Rubi Caballero pizarro
 
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptxPlantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
carlosarmandocoronas
 
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
lucianolinovalle
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Soleito
 
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICAUNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
suclupesanchezm
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
jeanlozano33
 
Catalogo General Cosmic Amado Salvador distribuidor oficial Valencia
Catalogo General Cosmic Amado Salvador distribuidor oficial ValenciaCatalogo General Cosmic Amado Salvador distribuidor oficial Valencia
Catalogo General Cosmic Amado Salvador distribuidor oficial Valencia
AMADO SALVADOR
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
GuillermoAlejandroCh6
 
Lab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docxLab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docx
MarcosAntonioAduvire
 
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDFBARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
Brbara57940
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
AlbertoGarcia461436
 
Centro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónicoCentro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónico
OmairaQuintero7
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
RofoMG
 
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdfROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
JesusFlores151669
 

Último (20)

Proyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en planoProyecciones, vistas isométricas y en plano
Proyecciones, vistas isométricas y en plano
 
Recetas_bioplasticos con materiales organicos
Recetas_bioplasticos con materiales organicosRecetas_bioplasticos con materiales organicos
Recetas_bioplasticos con materiales organicos
 
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIAACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
ACT 1 DISEÑO: ECONOMIA NARANJA CONTADURIA
 
Característica del Arte Gótico breve reseña
Característica del Arte Gótico breve reseñaCaracterística del Arte Gótico breve reseña
Característica del Arte Gótico breve reseña
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
 
Portfolio UX/UI & Branding Designer 2024 de Sonya Palma
Portfolio UX/UI & Branding Designer 2024 de Sonya PalmaPortfolio UX/UI & Branding Designer 2024 de Sonya Palma
Portfolio UX/UI & Branding Designer 2024 de Sonya Palma
 
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdfPresentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
Presentación Proyecto libreta Creativo Doodle Rosa_20240615_180431_0000.pdf
 
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptxPlantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
Plantilla_para_sustentación_de_tesis_Universidad_de_la_Amazonia.pptx
 
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
Fundamentos Filosóficos de la Metodología de la Enseñanza y de los Recursos p...
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
 
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICAUNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
UNIDAD 1. DE DPCC DESARROLLO PERSONAL CIUDADANIA Y CIVICA
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
 
Catalogo General Cosmic Amado Salvador distribuidor oficial Valencia
Catalogo General Cosmic Amado Salvador distribuidor oficial ValenciaCatalogo General Cosmic Amado Salvador distribuidor oficial Valencia
Catalogo General Cosmic Amado Salvador distribuidor oficial Valencia
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
 
Lab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docxLab 0 - Instalación Hidráulica (Completo).docx
Lab 0 - Instalación Hidráulica (Completo).docx
 
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDFBARBARA PADILLA DETALLES ESTRUCTURALES.PDF
BARBARA PADILLA DETALLES ESTRUCTURALES.PDF
 
manual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargadosmanual_civilcad y uso de modulos cargados
manual_civilcad y uso de modulos cargados
 
Centro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónicoCentro Veterinario Público CVP Diseño arquitectónico
Centro Veterinario Público CVP Diseño arquitectónico
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
 
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdfROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
ROTAFOLIO CONSEJOS PARA PREVENIR LA ANEMIA.pdf
 

Tipografía y color

  • 1. Tipografía y color Johnny Alexander Pinzón Velasco
  • 2. Tipografía En general es muy importante una buena estructuración del texto a lo largo de la página, empleando párrafos cortos que faciliten la lectura y poniendo títulos destacados en las distintas secciones del texto. Además, es mejor no apurar mucho los bordes de la pantalla del ordenador: las líneas cortas se leen con mayor facilidad que las largas. Podemos forzar esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe solo el 85-90 % de la pantalla.
  • 3. Tipos de Fuentes Hay una diferencia importante entre legibilidad y comprensión. Mientras que la legibilidad se refiere a la facilidad con la que los lectores pueden decodificar la información en un documento, la comprensión se refiere al contenido del mismo. Las dos tienen un efecto importante en el éxito o fracaso de la lectura del documento; la comprensión no puede ser adquirida sin la legibilidad.
  • 4. Ajuste del espacio entre letras (kerning) El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta los textos son más legibles y el aspecto estético es mucho mejor. Respecto al espacio que ocupa cada letra existen dos tipos de fuente: las proporcionales y las no proporcionales. En las proporcionales este espacio depende del carácter, por ejemplo una "i" ocupa menos espacio que una "M". En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
  • 5. Color y contraste con el fondo La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En pocos casos se recomienda utilizar un color de fondo, en cualquier caso para textos largos siempre es más adecuado texto oscuro sobre un fondo claro. Solo es adecuado usar fondo oscuro y texto claro para títulos, cabeceras o celdas, sin embargo el problema es que los fondos oscuros con texto claro son muy empleados en publicidad y ello puede provocar que contenidos no publicitarios sean afectados por la ceguera a los banners y por tanto ignorados por los Usuarios.
  • 6. Negritas Las negritas deben utilizarse solo para enfatizar algunas palabras, siempre de manera muy restringida y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información. Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas Webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.
  • 7. Tamaños de letra Un tamaño de entre 10 y 12 puntos suele ser el estándar para la mayoría de textos, sin embargo lo realmente importante es que el tamaño de fuente no sea fijo y pueda ser modificado libremente por los usuarios mediante la opción correspondiente del navegador.
  • 8. Color de los textos Uno de los factores más importante de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se sitúan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condición muy importante en obras de contenido textual importante. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de contraste de color.
  • 9. La Teoría del color Define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
  • 10. Contraste de Tono Está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color. Así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.