Font-family - the basics

La primera cosa para establecer el tono de nuestra tipografía es la fuente. Generalmente, hay dos tipos de fuentes - serif y sans-serif. ¿La diferencia? Las fuentes serif tienen "pies" y las sans-serif no. Este es un ejemplo

<p style="font-family:serif;">This is your browsers default serif font</p>
<p style="font-family:sans-serif;">This is your browsers default sans-serif font</p>

Ha habido un montón de "ruido" sobre si utilizar un serif o un sans-serif al diseñar para la web, ya que podría haber habido un problema con la legibilidad, pero la investigación ha demostrado que con las pantallas modernas esto no es un problema y en realidad se puede elegir el tipo de fuente que prefiera.

Web safe fonts - More than just serif or sans-serif

Como probablemente sabes, hay mucho más que sólo dos tipos de fuente por ahí y todos los diseñadores web tienen su favorito - yo tengo algo con Georgia y Century Gothic, así como tú podrías preferir otras fuentes. En CSSfontstack.com tienen una lista ordenada de todas las fuentes web seguras y he incluido un par de ellas aquí - oh, y funcionan tanto en Windows como Mac!

<p style="font-family: Impact, Charcoal, sans-serif; ">Impact - a bold font</p>
<p style="font-family: Century Gothic, sans-serif; ">Century Gothic, a personal favorite</p>
<p style="font-family: Times New Roman, Times, serif; ">Times New Roman - the classic choice</p>

Configurando la familia de fuentes para toda la página

Para establecer la familia de fuentes para toda la página, debe establecerla para el body del documento - de esta manera todo el texto de su página web se representa en esta fuente;

body {
font-family: Times New Roman, Times, serif;
}

Aquí hay una explicación de lo que significa este fragmento de CSS - Esta declaración le dice al navegador que busque la fuente 'Times New Roman' y si esto no está instalado, utilice Times. Si el navegador no tiene ninguno de ellos utiliza cualquier fuente serif genérica que tenga.

As you can see, some of the properties have more than one value - in this example we've used three values. This is because of the fact that the browser needs a fallback, should the given font not be installed on our computer. So the font you prefer is the first value and the list ends with a generic font name, such as in this case 'serif'. Oh, and please note that all values are separated by a comma.

What you have learned

• Generally, there are two types of fonts: serif and sans-serif
• Some fonts are considered websafe and you should opt for them in the first place.
• Always include a generic font name when defining font-families, your user might not have the preferred font installed on their device.