Creación de logotipos con tipografías web

Creación de logotipos con tipografías web

0
(0)

[kkstarratings]Definir los aspectos relativos al logotipo de una marca es una cuestión muy importante para cualquier proyecto y para la que es muy recomendable contratar los servicios de un diseñador profesional.

Alguien con estudios sabrá plasmar tu forma de ver la empresa y sabrá proyectar un significado mediante una imagen y/o texto.

Sin embargo, en ocasiones cuando simplemente estamos aprendiendo es natural que queramos jugar y dejemos rienda suelta a la imaginación.

Esta publicación va precisamente de esto último.

Diseñaremos logotipos usando nuestras iniciales, definiendo una paleta de colores y una tipografía.

Las siguientes entradas te serán de utilidad:

Pasemos al ejercicio.

Enunciado

Utiliza las siglas de tu nombre y apellidos para crear tu propio logotipo.

  • Para ello elige en primer lugar una paleta de colores. Puedes valerte por ejemplo de esta herramienta.
  • Elige en segundo lugar varias tipografías que te gusten. Puedes usar las disponibles Google Fonts. Puedes por ejemplo usar una tipografía con serifa, una sin serifa, una display y una handwriting. Uno de cada.

Te muestro a modo de ejemplo el resultado obtenido por mi.

ejemplos de logos obtenidos mediante tipografías css y una paleta de colores
ejemplos de logos obtenidos mediante tipografías css y una paleta de colores

Solución del ejercicio

Mi decisión personal para resolver el ejercicio ha sido usar

  1. Los colores: #045E67 y #3D3D3F.
  2. Las tipografías:
    • Anton (sans-serif)
    • Solway (serif)
    • Bangers (display)
    • Meddon (handwriting)

Observar el uso del selector de atributo mediante el que nos ahorramos muchas líneas de código en la hoja de estilos.

A continuación se adjunta el código usado para conseguir los 4 logotipos de la imagen del enunciado.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta name="author" content="francesc ricart"/>
	<title>Logotipo con css</title>
	<style>
		*{box-sizing:border-box;}
		a[class*="logo-"]{
			width:100px;
			padding:8px 4px;
			margin:32px;

			display:inline-block;

			font-size:3.5em;
			color:#045E67;
			text-decoration:none;
		}
		a[class*="logo-"] span{
			color:#3D3D3F;
		}

		a.logo-1{
			font-family: 'Anton', sans-serif;
		}

		a.logo-2{
			font-family: 'Solway', serif;
		}

		a.logo-3{
			font-family: 'Bangers', cursive;
		}

		a.logo-4{
			font-family: 'Meddon', cursive;
		}		
	</style>
	<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Solway&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Meddon&display=swap" rel="stylesheet">
</head>
<body>

	<figure>
		<a href="#" class="logo-1">F<span>R</span>M</a>
		<a href="#" class="logo-2">F<span>R</span>M</a>
		<a href="#" class="logo-3">F<span>R</span>M</a>
		<a href="#" class="logo-4">F<span>R</span>M</a>
	</figure>

</body>
</html>

¡Hola!

Querido lector,

¿Qué logo de los mostrados te gusta más?

¡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 0 / 5. Votos: 0

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?

¿Dónde he fallado?

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 Comments

Post A Comment

  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.