Resumen

Es fácil, no deberían tener más de 1440px. Cualquier cosa por debajo de eso es buena, y es básicamente una elección de diseño. Este artículo explica por qué y cómo ajustar el ancho de tu contenido.

Boxear o no boxear

¿Por qué encuadrar el contenido? Casi siempre se ve mejor, sobre todo en monitores grandes. Mi monitor, por ejemplo, es superancho con una relación de aspecto de 2,39:1. Así que, a menos que reproduzcas una película de Hollywood en tu sitio web, no se verá bien.

Regla de los 60-80 caracteres

Si quieres que la gente lea algo en tu sitio web, no debería haber más de 60-80 caracteres en una línea de texto. Esto es una regla. Esto es así porque leer un texto que es super ancho, es realmente molesto, cada vez que la línea termina, tus ojos tienen que viajar todo el camino hasta el comienzo de la siguiente línea, y no quieres hacer eso. En pocas palabras, si no cumples con esta regla, tu sitio web no se verá bien.

Es terrible:

Los diseños modernos utilizan valores REM

¿Qué es un valor REM? Es fácil, es el tamaño de la fuente de tu párrafo. Y debería ser 16px. Así que un REM es 16px. Podrías cambiarlo, pero no deberías. El 16px es un estándar y casi todo el mundo lo usa.

Y de esos 16px vienen todas las estructuras de diseño. Así que en los diseños modernos, todo gira en torno a estos 16 píxeles, simplemente porque se ve mejor, puede que no sepamos por qué, cuando lo miramos, pero así es. Márgenes, rellenos, altura de línea, etc.

Y por lo tanto, ¡el ancho de su sitio web debería ser una especie de multiplicación de 16!

1440px (90REM)



Se trata de una anchura bastante mayor, muy habitual si se quiere cubrir toda la pantalla de los portátiles modernos. Pero tu contenido tiene que estar preparado para ello. Puedes incluso combinar esta anchura con otra menor, por ejemplo 1440px para tu página de inicio, con algunas imágenes grandes y bonitas y, por ejemplo, 960px para las entradas de tu blog.

Ejemplo de 1440px – Minimalio demos.

1280px (80REM)


Este puede ser el más común. Es perfecto para rejillas de dos columnas, cuando tienes algún tipo de gráfico o imagen en una columna y tu texto en la otra. Yo recomendaría utilizar este ancho para la mayoría de los sitios web.

1120px (70REM)


Aquí nos estamos volviendo un poco de la vieja escuela. Personalmente no me gusta este tamaño, no es lo suficientemente ancho para mostrar el contenido en los portátiles modernos de alguna manera razonable, pero tampoco es estrecho para mostrar sólo texto. Tal vez para sitios web con mensajes en una columna más ancha y una barra lateral en una columna más estrecha, esto podría ser un buen ancho, sin embargo.

960px (60REM)

Esto ni siquiera es de la vieja escuela, yo lo consideraría una elección de diseño hoy en día. Y puede ser muy buena. Si tiene una gran cantidad de texto, póngalo en esta columna estrecha, y podría parecer muy elegante o minimalista.

¿Qué pasa con la anchura de las tabletas y los móviles?

Este artículo ha sido escrito en 2025 y hoy en día, el sitio web debe ser totalmente adaptable. Así que no deberías especificar nada cuando se trata de tamaños más pequeños de lo que hemos comentado anteriormente. Y eso va no sólo para el ancho de todo el sitio web, sino también para la tipografía. Los sitios web modernos utilizan lo que se denomina tipografía fluida, de modo que las fuentes empiezan a encogerse en algún punto y dejan de encogerse cuando se llega a la medida del teléfono. Puedes comprobar ese comportamiento en cualquiera de los Minimalio demos.

Cómo ajustar la anchura

O bien, tienes un buen tema como Minimalio y sólo tienes que ir a las opciones de Tema y establecer el número que desees. He aquí un ejemplo vídeo tutorial sobre layout.

Si esto no es una opción en tu tema, puedes hacerlo con CSS personalizado. La regla que buscas se llama max-width. Así, por ejemplo, si sólo deseas cambiar el ancho del contenido de una sola página:

article.page {
max-width:960px;
}

Haz tu contenido más estrecho con Gutenberg

Esto es especialmente importante para las entradas del blog. Hay varias maneras de hacer que tu contenido sea más estrecho, ya sea con la configuración de los bloques de Gutenberg, o con algo de CSS personalizado.

Utiliza las columnas de Gutenberg

Esta es probablemente la opción más fácil y también la más versátil. El único problema es que tienes que poner todo en columnas, lo que puede llevar mucho tiempo, especialmente si ya tienes tu contenido en el sitio web. Si no lo tienes, entonces sólo hazlo una vez y luego duplica las columnas.

Entonces, si agregas columnas en Gutenberg, te muestra opciones para agregar diferentes tamaños de las columnas. Así por ejemplo el 25-50-25 es perfecto para esto. También puedes ajustar el ancho, pero ten cuidado, ¡y usa siempre porcentaje!

Luego añades el texto en la columna central y listo.

Utilizar CSS personalizado

Hay varias maneras de hacer esto con CSS, la parte importante y difícil es encontrar la clase correcta. Para ello, básicamente tienes que utilizar las herramientas de desarrollo de tu navegador, o puede que tengas suerte. Aquí hay un video tutorial para principiantes cómo usar CSS personalizado.

Yo recomendaría dos maneras, o bien utilizar el max-inline-size con el recuento de caracteres. Así, por ejemplo:

.single-post p {
/* makes the paragraph only 60ch in one line */ 
max-inline-size:60ch; 
/* margin auto centralizes the paragraph */
margin: 0 auto;
}

O utiliza la anchura máxima:

.single-post p {
max-width: 768px;
margin: 0 auto;
}

Como puedes ver, esto sólo se aplica a los párrafos, es posible que desees hacer esto para toda tu entrada, o sólo algunas partes de ella, depende de ti.

Mucha suerte