Dos páginas pueden decir exactamente la misma frase y aun así transmitir sensaciones completamente distintas. Una puede parecer una invitación elegante. La otra, el cartel de una avería en el ascensor.
La diferencia suele estar en la tipografía.
En CSS, la tipografía controla cómo se ve el texto: qué fuente usa, qué tamaño tiene, cuánto espacio respira. Es la voz visual de tu contenido.
font-family: la personalidadLa propiedad font-family define qué tipo de letra usar.
monospace hace que todas las letras ocupen el mismo ancho. Tiene un aire técnico, como si el texto hubiera salido directamente de una terminal que sabe demasiadas cosas.
También existen otras familias genéricas como serif, sans-serif, cursive o fantasy. Algunas son elegantes. Otras parecen escritas por un mago cansado.
font-size: el volumenLa propiedad font-size controla el tamaño del texto:
Más grande no siempre significa mejor. Si todo grita, nada destaca. La gracia está en usar tamaños distintos para construir jerarquía: títulos grandes, subtítulos medianos, texto normal cómodo de leer.
Si eliges una fuente rara, un tamaño diminuto o una combinación difícil de leer, el usuario no pensará: "qué mala tipografía". Pensará: "uf, qué pereza esta página".
La buena tipografía es casi invisible. Simplemente hace que leer sea fácil.
Haz que .mensaje use la fuente monospace y tenga un tamaño de 24px.
Cuando el texto suena bien con solo mirarlo, vas por buen camino...