Tecnología

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 curso blogger desde cero

Conoce el CSS de tu blog.

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

css Ejercicio CSS Cajas CSS ...

Desarrollo de Plantilla Web con CSS, Formularios HTML y PHP

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

Diseño de páginas web Consejos diseño web CSS ...

3 pautas de diseño profesional y CSS para tu web

Una página web bien hecha, puede ser una fuente de ingresos útil cuando quieres independizarte, pero es importante que sepas que el diseño responsive y funcional, es el pilar sobre el que debe girar todo. Hoy, por ejemplo, tenemos las 3 pautas más importantes de diseño web profesional, con las que tu blog dejará de ser un simple sitio a un lugar donde los visitantes encuentren lo que haces de mane ...

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 ...

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 ...

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 ...

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 ...

Diseño de páginas web Herramientas diseño web TypeCast

TypeCast, tu solución para temas de tipografía en diseño web

Para lograr el mejor rendimiento de tu página web, es importante que los usuarios puedan leer el contenido del sitio con una fuente sencilla, pero atractiva. Si estas teniendo problemas para escoger la fuente para tu web, puedes probar con TypeCast, una completísima plataforma profesional que te permitirá expresar toda la personalidad de tu marca a través de diferentes dispositivos. Centrada exclu ...

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 ...