Hazmeweb Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Modifica la tipografía de tú web o blog con CSS

La tipografia es parte de la personalidad de nuestro sitio.

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla.

Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de fantasía con muchos giros etc en resoluciones pobres no son legibles.

Propiedades CSS de Tipografia

Mediante CSS podemos modificar por completo el aspecto de nuestra fuente:

Propiedad tipo de fuente:

Fuentes
Con esta propiedad definimos el tipo y la familia de la fuente. La fuente que escribimos en primer lugar es la que utiliza el navegador por defecto, en el caso de que el equipo no tenga instalada la primera utilizara la siguiente.
Con esta propiedad hay que tener en cuenta que si el equipo desde el que abrimos la web no tiene instaladas las fuentes que hemos elegido, el navegador utilizara por defecto.

font-family: Arial, Helvetica, sans-serif; 

Propiedad Color de la fuente:

Con esta propiedad definimos el color en el que se vera la fuente en nuestro sitio, lo podemos definir el color de las siguientes formas:
Usar colores resalta el mensaje del texto.


color: #369;

color: black;

color: #B1251E;

color: rgb(71, 98, 176);

&nbsp
&nbsp

Propiedad tamaño de la fuente:

Es la propiedad que define el tamaño de la letra, podemos definir tamaño absoluto(indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-small, x-small, small, medium, large, x-large, xx-large.) y tamaño relativo (indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (larger, smaller) que toman como referencia el tamaño de letra del elemento padre.)
Usar colores resalta el mensaje del texto.


Los valores que la definen son:

pixel, puntos,  em y en porcentaje %:

font-size: : 9px; 
&nbsp
&nbsp
&nbsp
&nbsp

Propiedad ancho de la fuente:

Con esta propiedad definimos el ancho que tendrá nuestro texto, lo más habitual que usamos es la normal y negrita, pero se puede afinar mucho mas el ancho con esta propiedad.
Alternativas a la negrita.
Los valores que la definen son:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

font-weight: bold;

&nbsp
&nbsp

Propiedad variant:

Esta propiedad permite otra variación en el estilo del tipo de letra, nos permite cambiar entre mayúsculas y minúsculas.
Variant resalta textos

Los valores que la definen son:

normal | small-caps | inherit

font-variant: small-caps;

&nbsp
&nbsp

Añadir la tipografia al sitio.

Podemos añadir tipografias especiales descargando la tipografía en nuestro sitio y haciendo una llamada con un css:

@font-face{
font-family: ?nombredemifuente?;
src: url(?../fonts/mifuente.otf?);
}
Con este código llamamos a una fuente especifica que hemos guardado en nuestro site en una carpeta llamada fonts. Esta forma de cargar las fuentes no es muy recomendable para textos largos ya que añade un tiempo de carga extra y hay que tener en cuenta que no todos los navegadores usan la misma extensión para las fuentes, por lo que debemos hacer una carga de fuente especifica para los navegadores que más se usan.
&nbsp
&nbsp

Añadir fuentes desde Google fonos.

Mediante google fonts podemos añadir un montón de tipografías que no están en todos los equipos, el navegador llama a la fuente que esta alojada en google fonts y no es necesario que el usuario descargue la fuente en su equipo.

Para hacer esto simplemente debemos añadir unas porciones de código en nuestro sitio que nos las da google directamente desde fonts:

<link href=’http://fonts.googleapis.com/css?family=Sniglet‘ rel=’stylesheet’ type=’text/css’>

 

Fuente: este post proviene de Hazmeweb, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Comercio local online

Lo que aporta una web a tu comercio tradicional La tienda online no es sino una herramienta más que esta disponible para el comercio de proximidad, la mayoría de los posibles clientes de tu tienda, ca ...

¿Porqué necesito una web?

Si estas aquí seguro que te has hecho la pregunta ¿porqué necesito una web? Un amigo publicista siempre me decía: En  los medios  si no estas, es que no existes... Esta frase cobra mayor importancia ...

Usabilidad Web

Cuando nos ponemos manos a la obra con nuestro proyecto web una característica por la que cualquier usuario debe definirlo es FACIL Definición de objetivos Como ya he dicho en otras ocasiones lo prim ...

Recomendamos

Relacionado

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

general diseño web hazmeweb

El color, la tipografía y las imágenes en el Diseño Web

Casi todo el contenido de la web es el texto y las imágenes, por lo que estos son una parte fundamental de tu ella. Vamos a ver unos claves sencillas para mantener la estética y la usabilidad en tu web. El color de la web El color va a ser una de las partes que defina tu web, quizá la que mas impacto tiene a primera vista sobre el navegante. El color lo vamos utilizar como una herramienta para ca ...

Internet Adsense Afiliados ...

Cómo ganar dinero montando un blog o página web ¡Así sí!

Ya seas lector habitual del Androide Feliz o simplemente te hayas cruzado por casualidad con este post, una cosa es (casi) segura: te gusta la tecnología. Quizá no seas un experto en ordenadores ni en esta amalgama surrealista que es internet, y eso de tener tu propio blog puede que hasta te parezca una locura. Pero admitámoslo. Todos hemos oído eso de que hay gente que gana auténticas montañas de ...

Programacion css programacion ...

Programar una página web con HTML5 y CSS

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas. Cómo programar una web en html5 y css Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva. Crear un dinamismo con CSS Pues sí querido lector (c ...

general diseño web hazmeweb

El color, la tipografía y las imágenes en el Diseño Web

Casi todo el contenido de la web es el texto y las imágenes, por lo que estos son una parte fundamental de tu ella. Vamos a ver unos claves sencillas para mantener la estética y la usabilidad en tu web. El color de la web El color va a ser una de las partes que defina tu web, quizá la que mas impacto tiene a primera vista sobre el navegante. El color lo vamos utilizar como una herramienta para ca ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

general propuestas

Inserta las recomendaciones para móviles de Google+ en tu web o Blog

Las recomendaciones para móviles son una funcionalidad que Google pone a disposición de los usuarios de páginas Google+ para presentar a los usuarios que se conecten a nuestra web con un móvil nuestras entradas más populares. Veamos paso a paso cómo insertar las recomendaciones para móviles en nuestro web o Blog. ¿Qué son y qué aspecto tienen las recomendaciones para móviles? Podrás observar en ...

general diseño

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

Apps Noticias WhatsApp

Usa la nueva tipografía en tus chats de WhatsApp

En el mes de Marzo nos encontramos con la sorpresa que WhatsApp ya permitía el uso de comandos para utilizar negritas, cursivas o tachado en el texto de tus chats, ahora WhatsApp ha añadido una nueva tipografía llamada Fidexys, que nos recuerda a aquel tipo de letra de las antiguas máquinas de escribir. Ver también: WhatsApp ya permite dar formato al texto del chat Para que aparezcan tus textos co ...