Calculadora de Proporción Áurea & Phi

Calculadora de Proporción Áurea & Phi

Calcula dimensiones de proporción áurea y rectángulos dorados al instante. Divide longitudes según phi (1,618), escala tipografía y crea cuadrículas responsivas.

Plantillas Predefinidas
Parámetros y Ancla de Cálculo
px
px
px
Control Deslizante de Proporción en Vivo
A: 61.80% (890.0px)B: 38.20% (550.0px)Δ 0.000%
Resumen de DimensionesEuclidean Precision Active
Segmento Mayor (A)
870.192 px
≈ 54.39 rem
Segmento Menor (B)
537.808 px
96 DPI: 870 px
(A + B) / A = A / B = 1.61803399 (φ)
Segmento Mayor (A): 870.19px (61.8%)Segmento Menor (B): 537.81px (38.2%)
870.2 px
gap
537.8 px
Lienzo Expandido (Base × φ)
2,329.969 px

1440 px × 1.618034

Recorte Focal (Base / φ)
889.969 px

1440 px / 1.618034

Calculador Inverso de Contenedor100.00% Área de Cobertura Útil
Major Column830.6 px
Minor Column513.4 px
Harmonic Gutter196.1 px
Analizador de Relación de Aspecto y Eficiencia de RecorteGolden Standard: 1.618 : 1
16:991.0% Área de Cobertura Útil
16:9 Standard Widescreen
16:1098.9% Área de Cobertura Útil
16:10 Laptop & Pro Display
4:382.4% Área de Cobertura Útil
4:3 Classic TV & Tablet
1:161.8% Área de Cobertura Útil
1:1 Square Feed / Album
21:969.3% Área de Cobertura Útil
21:9 UltraWide Cinema
3:292.7% Área de Cobertura Útil
3:2 35mm DSLR Photography
Segmento Mayor (A)870.19 px
Segmento Menor (B)537.81 px
Proporción Continua Phi (φ)1.61803399
Referencia técnica y guía de arquitectura

Calculadora de Proporción Áurea & Guía — Guía de referencia

Calcula dimensiones áureas y proporciones del rectángulo dorado al instante. Divide longitudes según phi (1,618), escala tipografía y genera retículas CSS responsivas.

Calculadora de Proporción Áurea & Guía — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos
Calculadora de Proporción Áurea & Guía — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos

Parámetros clave y controles

Dimensión total / Longitud global (A + B)Dimensión lineal (px / mm / in)

Longitud perimetral continua completa dividida en proporciones áureas según la fórmula de división externa de Euclides (A + B) / A = A / B = φ. En arquitectura y diseño de interfaces (UI), abarca habitualmente de 320 px a 3840 px en pantallas digitales o de 100 mm a 1000 mm en lienzos editoriales impresos.

Por defecto: 1440 px
Sección áurea mayor (Segmento A)Partición primaria (61,803%)

La partición geométrica mayor que representa exactamente (√5 - 1) / 2 ≈ 61,80339887% de la longitud total. En diseño editorial digital y ergonomía web, el Segmento A lidera la jerarquía visual primaria para flujos de contenido principal, lienzos hero y bloques modulares dominantes.

Por defecto: 889.97 px
Sección áurea menor (Segmento B)Partición secundaria (38,197%)

El segmento armónico complementario calculado como el Total menos el Segmento A, exactamente igual a (3 - √5) / 2 ≈ 38,19660113% de la dimensión total. Funciona como la barra lateral (sidebar) natural, bandeja secundaria de metadatos, panel de navegación o espacio en blanco compensatorio.

Por defecto: 550.03 px
Constante proporcional Phi (φ)Constante matemática irracional

La única raíz positiva de la ecuación cuadrática x² - x - 1 = 0, definida algebraicamente como (1 + √5) / 2 ≈ 1,618033988749895. Rige el crecimiento logarítmico autoescalable, el límite asintótico de la sucesión de Fibonacci (lím n→∞ F(n+1)/F(n)) y los rectángulos áureos autorreplicantes.

Por defecto: 1.6180339887
Tamaño tipográfico base (Fuente)Escala modular relativa (px / pt)

Tamaño de fuente base para el cuerpo de texto (habitualmente 16 px por accesibilidad web o 10-12 pt en maquetación impresa), a partir del cual se multiplican o dividen los intervalos de la escala modular por φ (o φ^(1/2) ≈ 1,272 para tipografía condensada en pantalla) para generar jerarquías armónicas de encabezados.

Por defecto: 16 px
Medianiles y espaciado de retícula (Gutters & Padding)Separación espacial (px / rem)

Margen o separación negativa entre columnas de contenido áureo. Mantener el ancho del medianil proporcional al segmento menor (por ejemplo, 16 px, 24 px o 32 px derivados de la progresión de Fibonacci) evita la saturación visual y preserva la relación de contraste perceptivo 61,8/38,2 en maquetaciones CSS subgrid o flexbox.

Por defecto: 32 px

Consejos profesionales y mejores prácticas

El escalado modular estricto de 1,618 desborda los encabezados en pantallas móviles

Multiplicar un cuerpo de texto accesible de 16 px por la razón áurea completa (1,618) produce: H3 a 25,9 px, H2 a 41,9 px y H1 a 67,8 px. Aunque resulta imponente en monitores de 1440 px o pantallas de gran formato, un H1 de 68 px provoca saltos de línea bruscos y cortes de palabras en pantallas móviles de 375 px. Los sistemas de diseño más avanzados (como Apple Human Interface Guidelines y Material Design) implementan la semiproporción áurea (phi^(1/2) ≈ 1,272) o la tercera mayor (1,250) en viewports móviles, reservando el factor 1,618 para escritorios amplios.

La retícula Phi (1:0,618:1) supera a la regla de los tercios (1:1:1) en confort visual

La clásica 'regla de los tercios' fotográfica divide el encuadre en partes iguales al 33,3% y 66,7%, situando las líneas de división y los puntos de intersección demasiado cerca de los bordes externos. La retícula áurea (Phi Grid) particiona el encuadre al 38,2% y 61,8%. Esto aproxima los puntos focales un 5% más hacia el centro visual, generando un anclaje óptico más natural que erradica el espacio negativo periférico innecesario en composiciones arquitectónicas y de retrato.

El redondeo de subpíxeles en coma flotante puede desalinear retículas CSS Flexbox

Los cálculos que generan fracciones de píxel (como 889,967 px y 550,033 px en un contenedor de 1440 px) se redondean de forma dispar entre los motores de renderizado de los navegadores (Blink, WebKit, Gecko). En flexbox o composiciones multicolumna, si el navegador redondea hacia arriba ambas columnas en 0,5 px (890 px + 551 px = 1441 px), la barra lateral es empujada a una segunda línea inesperada. Declara siempre CSS flex: 1 1 0 con anchos porcentuales width: 61.8034% y calc(100% - 61.8034% - var(--gutter)) junto con box-sizing: border-box para garantizar un renderizado fluido y exacto.

El papel ISO 216 (A4 / A3) adopta la proporción plateada de Lichtenberg (1:1,414), no la áurea

Un error común en diseño editorial es intentar forzar formatos de papel estándar de la serie A dentro de un rectángulo dorado. El estándar ISO 216 se basa en la relación de Lichtenberg (1:√2 ≈ 1:1,4142), lo que permite plegar o cortar una hoja por la mitad indefinidamente conservando la misma proporción de aspecto. Un rectángulo dorado auténtico con el ancho de un A4 (210 mm) requeriría una altura de 339,8 mm (42,8 mm más largo que el A4 estándar de 297 mm). Para aplicar la proporción áurea en un A4 estándar, distribuye los márgenes interiores de la maquetación en lugar de cortar el papel físico.

Problemas comunes y soluciones

⚠️Desbordamiento de subpíxeles y salto de columnas en layouts responsivos con CSS

Al definir anchos de columna mediante valores exactos en píxeles decimales (por ejemplo, width: 889.97px), los errores acumulativos de redondeo en pantallas de alta densidad (pantallas retina con 2x o 3x DPR) superan el ancho disponible del contenedor, forzando a la segunda columna a descender. Soluciona este problema aplicando tokens porcentuales en CSS (flex-basis: 61.8034% y flex-basis: calc(38.1966% - var(--gutter))) combinados con min-width: 0 y overflow-wrap: break-word en los contenedores flex padre.

⚠️Desalineación de la espiral áurea con el flujo de lectura occidental natural (Patrón en F)

Situar el punto de convergencia más denso de la espiral áurea en la esquina inferior derecha genera fricción visual, ya que los estudios de seguimiento ocular (eye-tracking) demuestran que los usuarios occidentales escanean en forma de F comenzando por la esquina superior izquierda. Orienta siempre tu espiral dorada de modo que su curva inicial más amplia recorra la barra de navegación superior izquierda y la propuesta de valor principal, descendiendo progresivamente hacia el botón de llamada a la acción (CTA) o elemento gráfico clave en el cuadrante inferior derecho.

⚠️Discrepancia entre la multiplicación directa por Phi y las aproximaciones de Fibonacci

Calcular proporciones áureas mediante números bajos de la sucesión de Fibonacci (como 3/2 = 1,500 o 5/3 = 1,667) introduce hasta un 7,3% de margen de error frente al valor real de phi (1,618034). La relación entre términos de Fibonacci solo converge con una precisión del 0,1% a partir de 89/55 (1,61818). Para maquetaciones estructurales y sistemas de diseño de interfaces digitales, calcula siempre las coordenadas utilizando la constante irracional exacta φ = (1 + √5)/2 en lugar de aproximaciones basadas en enteros iniciales.

Preguntas frecuentes (FAQ)

¿Cómo se calcula la proporción áurea entre dos números?▼

Para calcular la proporción áurea entre dos segmentos, divide el número mayor (A) entre el número menor (B); el resultado debe ser igual a 1,618034, y la longitud total (A + B) dividida entre el número mayor (A) también debe ser 1,618034. Matemáticamente: (A + B) / A = A / B = φ = (1 + √5) / 2 ≈ 1,6180339887. Por ejemplo, si tu segmento mayor mide 100 px, el segmento menor mide 100 / 1,618034 = 61,8 px, y la longitud total combinada es de 161,8 px.

¿Cómo dividir un ancho o una altura utilizando la proporción áurea?▼

Para dividir cualquier dimensión total (como el ancho de un contenedor) según la proporción áurea, multiplica el total por 0,618034 para obtener la sección mayor (A = Total × 0,618034) y multiplica el total por 0,381966 para calcular la sección menor (B = Total × 0,381966). Por ejemplo, dividir un contenedor web de 1200 px da como resultado un área de contenido principal de 741,64 px y una barra lateral secundaria de 458,36 px (741,64 + 458,36 = 1200 px).

¿Cuál es la diferencia entre la proporción áurea y la regla de los tercios?▼

La proporción áurea (retícula Phi) divide el espacio en una relación 1 : 0,618 : 1 (38,2% / 23,6% / 38,2%), mientras que la regla de los tercios divide el espacio en tres segmentos idénticos 1 : 1 : 1 (33,33% / 33,33% / 33,33%). La regla de los tercios es una simplificación ideada para facilitar el encuadre rápido en visores de cámaras, mientras que la proporción áurea ubica las intersecciones focales un 5% más próximas al centro, logrando composiciones visuales más armoniosas y reduciendo el espacio muerto.

¿Cuáles son las medidas áureas para resoluciones de 1920x1080 y 1440 px?▼

Para un ancho total de 1920 px, la partición horizontal áurea es de 1186,62 px para el área principal y de 733,38 px para la barra lateral. Para una pantalla de 1440 px, la división áurea horizontal es de 889,97 px (61,8%) y 550,03 px (38,2%). En una altura de 1080 px, la división vertical genera una franja hero principal de 667,48 px y una franja secundaria de 412,52 px. Un rectángulo dorado perfecto con una altura de 1080 px requiere un ancho de 1747,48 px (1080 × 1,618034), lo que representa un 9% menos de anchura que el formato panorámico estándar 16:9 (1920 px).

¿Cómo calcular una escala tipográfica con la proporción áurea?▼

Para crear una escala tipográfica modular áurea, define un tamaño de fuente base (por ejemplo, 16 px) y multiplícalo sucesivamente por φ (1,618) para ascender en la jerarquía de títulos, o divídelo entre φ para descender en notas al pie y leyendas: Cuerpo = 16 px, H3 = 16 × 1,618 ≈ 26 px, H2 = 26 × 1,618 ≈ 42 px y H1 = 42 × 1,618 ≈ 68 px. Para interfaces móviles con espacio reducido donde un factor de 1,618 agranda los titulares en exceso, se recomienda usar la raíz cuadrada de phi (√φ ≈ 1,272), lo que genera una escala más compacta: Cuerpo = 16 px, H3 = 20 px, H2 = 26 px y H1 = 33 px.

Herramientas y utilidades relacionadas

Todas las herramientas →