X

Creación de logotipos con tipografías web

portada ejercicio creación de logotipos con css

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

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?