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:
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
La letra capital es un recurso medieval que no es de mi devoción pero que me sirve para darte un par de ejemplos prácticos de uso del pseudoselector ::first-letter.
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
No Comments