Cómo exhibir tu escritura para que brille: 3 trucos de estilo CSS

Tu escritura es la pieza central de tu blog.

El contenido es el rey, ¿verdad?

Es lo que atrae a la gente y los mantiene leyendo tu blog.

Pero lo que también es igual de importante es cómo exhibes tu escritura. Visualmente, eso es.

Tu contenido puede ser excelente, pero si es difícil de leer para alguien, es posible que estés perdiendo más lectores de los que crees.

Mire, no soy un escritor capacitado, pero soy diseñador web y sé lo que se ve bien. Y lo que generalmente se ve bien no se trata tanto de la decoración y el gusto, sino más bien de lo que funciona y lo que hace que las cosas sean fáciles de leer y entender.

He estudiado durante años las diversas formas de mostrar contenido en forma digital, por lo que me gustaría mostrarle algunas formas rápidas y fáciles de asegurarse de que su contenido se muestre bien en las publicaciones de su blog desde el punto de vista de un diseñador web.

Hay algunas maneras en las que puedes hacer ajustes rápidos de estilo a tu blog usando un poco de CSS (hojas de estilo en cascada) para que tú, el escritor, puedas mostrar tu contenido y hacer que sea lo más fácil posible para que tus lectores lo disfruten.

Le daré algunos códigos de deslizamiento CSS que puede agregar a su hoja de estilo personalizada y editar a su gusto. Siga las instrucciones sobre cómo editar el CSS en su blog si no está seguro de cómo acceder a la hoja de estilo personalizada de su blog.

Tres trucos para diseñar su contenido para mostrar su escritura

1. Mejora tus párrafos

Para asegurarse de que sus párrafos sean fáciles de leer, aquí hay algunos consejos que debe tener en cuenta. Aplicaremos estilo a la etiqueta p (párrafo) aquí juntos.

• Seleccione una fuente que sea agradable a la vista. Apunta a una fuente serif o sans serif, no a una escrita a mano.

Elija un peso que no sea demasiado delgado. Algunas fuentes muy delgadas no se ven muy bien en ciertos navegadores y sistemas operativos (es decir, Mac o PC), así que pídales a las personas que lo revisen por usted y le den el visto bueno.

Al mismo tiempo, elige una fuente que no sea demasiado gruesa. Desea que tenga suficiente contraste con cualquier texto en negrita.

Al elegir una fuente, asegúrese de utilizar una fuente del sistema, una fuente que haya cargado en los archivos de su blog o una fuente de Google. Sugiero usar una fuente de Google porque son gratuitas, tienen la mayor variedad y son las más fáciles de usar. Para obtener más detalles, consulte cómo usar fuentes geniales en su blog.

Cuando haya seleccionado su fuente, irá a su hoja de estilo personalizada y agregará este código:

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
}
</pre>

• Utilice un tamaño de fuente que sea fácil de leer en pantallas de cualquier tamaño. Revisa tu blog en un teléfono y asegúrate de que el texto no sea demasiado pequeño para los ojos cansados ​​o de edad avanzada.

Un buen tamaño para los párrafos suele ser de 14 a 16 píxeles. No todas las fuentes se muestran igual en los mismos tamaños, así que juegue con ellas para ver cuál se ve mejor.

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 16px;
}
</pre>

• Utilice las alturas de línea adecuadas (principal). Las alturas de línea adecuadas también ayudan con la legibilidad porque le dan un respiro a sus párrafos. Una buena altura de línea es 1,5, en otras palabras, 1,5 veces el tamaño del texto (una altura de línea de 2 sería a doble espacio).

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 16px;
altura de línea: 1,5;
}
</pre>

• Evite el texto en negro puro sobre blanco. Es duro para los ojos. En su lugar, opte por un gris oscuro (me gusta el #333333) para que su copia disminuya un poco el contraste.

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 16px;
altura de línea: 1,5;
color: #333333;
}
</pre>

• Evite centrar los párrafos. Centrar la copia del cuerpo parece amateur y hace que sea más difícil de leer. ¿Por qué? Cada vez que su ojo se mueve a una nueva línea, tiene que luchar para encontrar el inicio de la siguiente porque nunca está en el mismo lugar. alinear o justificar sus párrafos regulares. El texto justificado está espaciado de modo que tanto el lado izquierdo como el derecho del párrafo tengan un borde recto.

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 16px;
altura de línea: 1,5;
color: #333333;
alineación de texto: justificar;
}
</pre>

<pre>text-align: izquierda; </pre> es el comportamiento predeterminado y no es necesario especificarlo a menos que necesite anular un estilo anterior.

• Por último, agregue un espacio en blanco. Querrá suficiente espacio en blanco entre los párrafos para una legibilidad óptima. Una buena regla general es agregar un margen debajo de cada párrafo equivalente al doble del tamaño de la fuente.

<antes>
pags {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 16px;
altura de línea: 1,5;
color: #333333;
alineación de texto: justificar;
margen inferior: 32px;
}
</pre>

2. Usar jerarquía

Utiliza la jerarquía cuando describe sus publicaciones mediante encabezados y subtítulos.

Para crear una jerarquía visual en tus publicaciones, diseña tus títulos y subtítulos para que sea fácil diferenciarlos. Aquí hay algunos consejos:

• Use la misma fuente para todos sus encabezados en diferentes tamaños.
• Usa una fuente que sea fácil de leer, como una fuente serif o sans serif. Puede optar por usar el mismo tipo de letra que su cuerpo de texto en un peso más grueso o puede elegir un tipo de letra diferente que contraste bien con su cuerpo de texto.
• Establezca los títulos y subtítulos en negrita o de mayor peso.
• Use Typecast para jugar con diferentes fuentes, tamaños y pesos para sus encabezados y compárelos con el texto de su párrafo.

Aquí hay un ejemplo de lo que puede encontrar para el tamaño si sus párrafos están configurados en 16px en tamaño de fuente. Luego subirías desde allí:

• encabezados h6 = 16px (generalmente del mismo tamaño que el texto del párrafo, pero en negrita y en su propia línea)
• encabezados h5 = 18px
• encabezados h4 = 22px
• encabezados h3 = 26px
• encabezados h2 = 30px
• encabezados h1 (los títulos de las publicaciones de tu blog) = 36 px

Nuevamente, juegue con Typecast para ver qué se ve mejor para sus ojos. Una vez que haya decidido las fuentes y los tamaños que desea usar para sus encabezados, querrá ir a su hoja de estilo personalizada y agregar este CSS para todos sus encabezados:

<antes>
h1, h2, h3, h4, h5, h6 {
familia de fuentes: INSERTAR NOMBRE DE FUENTE;
tamaño de fuente: 36px;
fuente-peso: negrita;
}
</pre>

A continuación, agregará algunas anulaciones de CSS solo para cambiar los tamaños de cada nivel de encabezado:

<antes>
h2 {
tamaño de fuente: 30px;
}

h3 {
tamaño de fuente: 26px;
}

h4 {
tamaño de fuente: 22px;
}

h5 {
tamaño de fuente: 18px;
}

h6 {
tamaño de fuente: 16px;
}
</pre>

3. Usar enlaces

¡No hagas pensar a tus lectores! Sus enlaces deben verse como enlaces, lo que significa que deben ser completamente obvios que son algo en lo que se debe hacer clic. Aquí hay algunas maneras de hacer esto:

• Elija un color para sus enlaces que contraste con su texto habitual.
• Reserva un color solo para tus enlaces. No use este mismo color para encabezados, subtítulos, títulos de widgets de barra lateral o cualquier otro texto.
• Sin embargo, puede usar este color para los botones si lo desea, ya que también son elementos en los que se puede hacer clic.
• No subrayes el texto que no es un enlace, es confuso porque la gente suele asumir que el texto subrayado es un enlace.

<antes>
a {
color rosa;
decoración de texto: subrayado;
}
</pre>

Diseñe los diversos estados de los enlaces para ayudar aún más a sus lectores a distinguirlos como enlaces. Hacer que cambien de apariencia cuando un usuario se desplaza sobre ellos da una indicación adicional de que se trata de un enlace activo.

<antes>
a: pasar el cursor {
color azul;
texto-decoración: ninguno;
}
</pre>

También puede elegir diseñar sus enlaces visitados de manera diferente para indicar a los usuarios que ya han visitado un enlace determinado.

<antes>
a: visitado {
color azul;
}
</pre>

Para exhibir su escritura para que brille solo se necesitan unas pocas ediciones simples

¡Estos son solo algunos trucos para mostrar su escritura para que sea fácil de leer y, por lo tanto, ayudar a que su contenido se destaque!

¿De qué otras formas diseñas las publicaciones de tu blog para que sean fáciles de leer para tus usuarios?

¿Le gustaría obtener más información sobre cómo puede aprovechar CSS para hacer que su blog sea más atractivo para sus lectores y realmente muestre su escritura? ¡Increíble! Entonces, me encantaría que me acompañaras a un video de capacitación gratuito sobre CSS. Comienza pronto, así que regístrate ahora.

Imagen cortesía de Pixabay