Dominio de Fundamentos de Diseño Gráfico, Tipografía y CSS para Creativos Visuales

Clasificado en Plástica y Educación Artística

Escrito el 17 de Enero de 2026 en español con un tamaño de 6,47 KB

Repaso Integral de Conceptos Fundamentales en Plástica y Diseño Digital

A continuación, se presenta una revisión detallada y corregida de conceptos esenciales en el ámbito de la plástica, la tipografía y las herramientas de diseño digital.

I. Caligrafía y Tipografía

1. Diferencia entre Caligrafía y Lettering

Caligrafía: El arte de escribir de forma manual.
Lettering: Permite modificar las letras (a diferencia de la caligrafía que se escribe en directo).

2. Definiciones Tipográficas

Tipografía: Es una serie de caracteres, números y símbolos que han sido diseñados y programados.
Tipografías Sans Serif: Se caracterizan por carecer de serifas o remates en los trazos de las letras (Ejemplo: Arial).

3. Elementos del Renglón Gráfico

Relación correcta de los elementos del renglón gráfico con su nombre correspondiente:

1 = Línea base
5 = Altura de mayúsculas
2 = Altura x

II. Identidad Visual y Composición Gráfica

4. Clasificación de Marcas Gráficas

La siguiente marca gráfica es...

a) Isotipo: Solo el símbolo (icono), sin texto (Ejemplo: McDonald's).
b) Imagotipo: Símbolo + texto separados (Ejemplos: Nike, Lacoste).
c) Isologo: Símbolo + texto unidos en uno (Ejemplos: Burger King, Lays).
d) Logotipo: Se identifica por el texto (Ejemplos: Prada o Zara).

5. Contraste en Composición

Cuando hablamos de contraste en una composición gráfica, el concepto “aguzamiento” se refiere a:

Incremento o exageración de la peculiaridad de un patrón.

III. Aplicaciones Web y CSS

6. Uso de Fuentes en la Web

Compatibilidad de Fuentes (Dafont): El formato de archivo de fuente descargado de Dafont más comúnmente compatible con navegadores para usar con la regla @font-face en CSS es OTF.
Regla CSS para Fuentes Externas: Si queremos aplicar una tipografía descargada de Dafont, debemos utilizar la regla CSS @font-face.
Integración de Google Fonts: No es necesario descargar la tipografía y ponerla en el servidor. La forma correcta de integrarla es importando la fuente usando un enlace <link> en el <head> de tu HTML. El enlace de importación de Google Fonts se coloca dentro del elemento <head>.
Uso en HTML/CSS: Para cambiar el estilo del texto de un <h1> usando Google Fonts, se importa la fuente y se utiliza la propiedad font-family en CSS para el <h1>.

7. Propiedades CSS para Texto

Sangría: Para poner una sangría a un párrafo, debemos utilizar la propiedad CSS text-indent.
Interlineado: La propiedad que se utiliza para generar un interlineado de texto en un bloque utilizando CSS es line-height.
Transformación de Texto: La propiedad text-transform en CSS se utiliza para controlar la capitalización del texto, como mayúsculas, minúsculas o capitalización por palabra.

8. Filtros CSS para Imágenes

Blanco y Negro: Si una imagen se quiere pasar a blanco y negro con ayuda del CSS, el filtro que se debe utilizar es grayscale.
Efecto Sepia: El filtro sepia, cuando se aplica a una imagen con CSS, aplica un tono marrón para dar apariencia de foto antigua.
Filtro Contraste: El filtro contrast ajusta la diferencia entre áreas claras y oscuras de la imagen.

9. SVG y Manipulación con CSS

Uso de SVG: En HTML5, una imagen con formato SVG se puede utilizar como una imagen PNG, JPG o GIF (Verdadero).
Color de Relleno SVG: La propiedad CSS que se utiliza para cambiar el color de relleno de un SVG es fill.
Color de Contorno SVG: La propiedad de CSS que se utiliza para cambiar el color del contorno (borde) de un elemento SVG es stroke.
Cambio de Color al Pasar el Cursor: Para cambiar el color de un SVG y aplicar un efecto al pasar el cursor sobre él utilizando CSS, se aplica la propiedad fill en el CSS y se modifica dentro de un selector :hover.

IV. Herramientas de Diseño y Publicidad Digital

10. Banners Publicitarios (GWD)

Límites de Banner (GWD): El peso máximo que puede tener un banner especificado por Google Web Designer (GWD) es de 150 Kb y su duración máxima es de 30 segundos.
Frames en Banner (GWD): Si se utiliza una imagen compuesta por 20 imágenes individuales para crear un banner en GWD, se deben poner 20 frames.
CTA en Móvil: Cuando se diseña un banner para móvil y se le pone una Llamada a la Acción (CTA), el evento asociado es Toque/clic.

11. Infografías

Elementos de una Infografía: Una infografía debe tener: Titular, texto, cuerpo, fuente y créditos.
Definición de Fuente: En una infografía, la fuente indica de dónde se ha extraído la información.

12. Software de Creación Gráfica

Inkscape: Se utiliza para la creación y edición de gráficos vectoriales.
GIMP: Su función principal es retocar y editar imágenes en formato de mapa de bits.
SVGOMG: Esta herramienta online se utiliza para optimizar archivos SVG, reduciendo su tamaño y mejorando su rendimiento.
MarvelApp: Su principal función en el diseño de prototipos de aplicaciones es diseñar y enlazar pantallas interactivas para simular el flujo de una aplicación.

13. Licencias de Fuentes

Antes de utilizar una fuente descargada de Dafont en un proyecto comercial, se debe verificar si la fuente es gratuita o si tiene licencia para uso comercial.

Entradas relacionadas:

Etiquetas: