03 Dic Creación de logotipos con tipografías web
[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.
Solución del ejercicio
Mi decisión personal para resolver el ejercicio ha sido usar
- Los colores: #045E67 y #3D3D3F.
- 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!
Entradas relacionadas:
¿Problemas para memorizar colores hexadecimales? Vemos un ejemplo de como usar las variables de css3 para definir los colores de un proyecto web.
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
No Comments