Ejercicio sobre tipografías css

Ejercicio sobre tipografías css

Acertar con la tipografía adecuada en un proyecto web es difícil.

Para ello es importante pedir asesoramiento a profesionales con buen gusto y espíritu crítico.

Sin embargo en este ejercicio nos vamos a centrar en la parte técnica.

¿Como implementar tipografías CSS?

En esta publicación encontrarás un buen repaso de la teoría.

Si ya la tienes clara pasemos entonces a un ejercicio práctico.

Enunciado

En la imagen adjunta

  • el primer párrafo tiene una tipografía segura Verdana (sans-serif).
  • el segundo párrafo tiene una tipografía segura Didot (serif).
  • el tercer párrafo tiene una tipografía segura FreeMono (monospace).
  • el cuarto párrafo tiene una tipografía importada desde Google Fonts Roboto 400 dentro de la etiqueta style.
  • el quinto párrafo tiene una tipografía descargada de Google Fonts Akronim y llamada con la instrucción @font-face. El tamaño de fuente 24px. Podéis descargarla pinchando aquí.
  • el sexto párrafo tiene una tipografía importada desde Google Fonts Montserrat 400 mediante un <link>.

Atendiendo a estas instrucciones y sabiendo que cada párrafo tiene 20 palabras de lorem ipsum genera un documento web parecido al de la imagen.

enunciado ejercicio tipografías css
enunciado ejercicio tipografías css
Ver solución (Haz clic)

Solución del ejercicio

A continuación se adjunta la cabecera <head> del documento solución final.

Fijaros que hay un poco de todo.

Para comprobar que todo está correcto deberéis generar un html con 6 párrafos y asegurar que cada uno tiene la clase class=»p-4″ (por ejemplo) según corresponda.

Como detalle en la solución presentada se ha puesto la tipografía Akronim dentro de la carpeta de nombre fonts. Deberás tener en cuenta de poner una url relativa adecuada a tu resolución.

<head>
	<meta charset="utf-8">
	<title>Solución ejercicio uso de tipografías web</title>
	<style>
		@import url('https://fonts.googleapis.com/css?family=Roboto');
		
		@font-face{
			src:url('fonts/Akronim/Akronim-Regular.ttf');
			font-family:Akronim;
		}


		.p-1{font-family:Verdana,sans-serif;}
		.p-2{font-family:Didot,serif;}
		.p-3{font-family:FreeMono,monospace;}
		.p-4{font-family:Roboto,sans-serif;}
		.p-5{font-family:Akronim,cursive;font-size:24px;}
		.p-6{font-family:Montserrat,sans-serifou ;}
	</style>

	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

</head>

¡Hola!

Querido lector,

Hemos abordado la cuestión más técnica. Espero que te sea de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.