https://www.creative-tim.com/ui/_next/static/chunks/920.9b4d9027249188be.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[920],{920:(e,t,n)=>{n.r(t),n.d(t,{default:()=>y});var i=n(39848),a=n(4964),l=n(38616);let r="".concat(16,"px Georgia, serif"),s="/ui/lance-reis-unsplash.png",o='The golden ratio appears throughout nature in the spiral of a nautilus shell, the arrangement of seeds in a sunflower, the branching of trees against winter sky. Designers have long borrowed this proportion — 1 to 1.618 — as a guide for composing pages that feel effortlessly balanced to the eye. But proportion alone cannot account for the full mystery of a beautiful spread. There is also rhythm: the breathing space between columns, the margin that frames text like a mount frames a painting. Early typographers called this the "river of white," the invisible current that runs vertically through a justified paragraph when spaces between words align across lines. Skilled compositors worked to eliminate rivers; they were considered a mark of carelessness, a failure to serve the reader\'s eye.',h="Every typeface carries within it the ghost of the hand that first drew it. Garamond is inseparable from sixteenth-century Paris, from the smell of oak-gall ink and the weight of a cold composing stick. Caslon belongs to a colonial printing office, oil-lamp lit, the click of type on a composing frame. Even our digital faces — designed on screens, hinted for pixels — carry this historical weight. The designer who chooses a typeface is not merely picking a style; they are invoking a lineage, borrowing authority from centuries of readers who have encountered those particular curves and accepted them as trustworthy. This is why font pairing matters so deeply: a clash of typefaces is a clash of eras, a collision of incompatible credibilities. Ink and paper have given way to phosphor and pixel, yet the fundamental challenge remains unchanged: how do you move a mind from one sentence to the next without losing it? Attention is fragile. The eye needs a path. Hierarchy — the system of sizes and weights that tells the reader which words matter most — is the designer's primary tool for managing this journey through a page.",c=new Map;async function f(e){let t=await fetch(e),n=await t.blob(),i=await createImageBitmap(n),a=i.width/i.height,l=a>=1?320:Math.max(64,Math.round(320*a)),r=a>=1?Math.max(64,Math.round(320/a)):320,s=i.width,o=i.height,h=new OffscreenCanvas(l,r).getContext("2d");if(!h)throw Error("2d context unavailable");h.clearRect(0,0,l,r),h.drawImage(i,0,0,l,r),i.close();let{data:c}=h.getImageData(0,0,l,r),f=Array(r).fill(null),g=Array(r).fill(null);for(let e=0;e<r;e++){let t=-1,n=-1;for(let i=0;i<l;i++)c[(e*l+i)*4+3]<12||(-1===t&&(t=i),n=i);-1!==t&&(f[e]=t,g[e]=n+1)}let d=[];for(let e=0;e<r;e++)null!==f[e]&&d.push(e);if(0===d.length)return{points:[],naturalWidth:s,naturalHeight:o};d[0],d[d.length-1];let u=1/0,m=-1/0;for(let e=0;e<d.length;e++){let t=d[e];f[t]<u&&(u=f[t]),g[t]>m&&(m=g[t])}let p=Array(r).fill(0),x=Array(r).fill(0);for(let e=0;e<d.length;e++){let t=d[e],n=0,i=0,a=0;for(let e=-6;e<=6;e++){let l=t+e;!(l<0)&&!(l>=r)&&null!=f[l]&&(n+=f[l],i+=g[l],a++)}p[t]=a?n/a:0,x[t]=a?i/a:l}let y=Math.max(1,Math.floor(d.length/52)),w=[];for(let e=0;e<d.length;e+=y)w.push(d[e]);let b=d[d.length-1];w[w.length-1]!==b&&w.push(b);let v=[];for(let e=0;e<w.length;e++){let t=w[e];v.push({x:p[t]/l,y:(t+.5)/r})}for(let e=w.length-1;e>=0;e--){let t=w[e];v.push({x:x[t]/l,y:(t+.5)/r})}return{points:v,naturalWidth:s,naturalHeight:o}}function g(e,t,n,i,a){return e.map(e=>({x:t+e.x*i,y:n+e.y*a}))}function d(e,t,n,i,a){let l=1/0,r=-1/0,s=Math.floor(t-a),o=Math.ceil(n+a);for(let t=s;t<=o;t++){let n=function(e,t){let n=[],i=e[e.length-1];for(let a=0;a<e.length;a++){let l=e[a];(i.y<=t&&t<l.y||l.y<=t&&t<i.y)&&n.push(i.x+(t-i.y)*(l.x-i.x)/(l.y-i.y)),i=l}return n.sort((e,t)=>e-t)}(e,t+.5);for(let e=0;e+1<n.length;e+=2)n[e]<l&&(l=n[e]),n[e+1]>r&&(r=n[e+1])}return isFinite(l)?{left:l-i,right:r+i}:null}function u(e,t){let n=[e];for(let e=0;e<t.length;e++){let i=t[e],a=[];for(let e=0;e<n.length;e++){let t=n[e];if(i.right<=t.left||i.left>=t.right){a.push(t);continue}i.left>t.left&&a.push({left:t.left,right:i.left}),i.right<t.right&&a.push({left:i.right,right:t.right})}n=a}return n.filter(e=>e.right-e.left>=24)}function m(e,t,n,i){if(n<=0)return{lines:[],totalHeight:0};let a=(0,l.Eq)(e,r),s=[],o={segmentIndex:0,graphemeIndex:0},h=0,c={left:t,right:t+n};for(;;){let e;if(null!==i){let t=d(i,h,h+26,8,3),n=u(c,t?[t]:[]);if(0===n.length){h+=26;continue}e=n[n.length-1]}else e=c;let n=e.right-e.left;if(n<24){h+=26;continue}let r=(0,l.c$)(a,o,n);if(null===r)break;s.push({text:r.text,x:Math.round(e.left-t),y:h}),o=r.end,h+=26}return{lines:s,totalHeight:h}}function p(e,t,n){let[i,l]=(0,a.useState)({lines:[],totalHeight:0});return(0,a.useEffect)(()=>{n<=0||l(m(e,t,n,null))},[e,t,n]),i}

1function x(e){let{lines:t,totalHeight:n,colWidth:a}=e;return(0,i.jsx)("div",{className:"relative",style:{width:a,height:n>0?n:void 0,minHeight:78},children:t.map((e,t)=>(0,i.jsx)("span",{className:"absolute text-neutral-700 select-text",style:{left:e.x,top:e.y,font:r,lineHeight:"".concat(26,"px")},children:e.text},t))})}function y(){let e=(0,a.useRef)(null),[t,n]=(0,a.useState)(0);(0,a.useEffect)(()=>{let t=e.current;if(!t)return;let i=new ResizeObserver(e=>{let[t]=e;return n(t.contentRect.width)});return i.observe(t),()=>i.disconnect()},[]);let y=function(){let[e,t]=(0,a.useState)(!0);return(0,a.useEffect)(()=>{let e=()=>t(window.innerWidth>=768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),e}(),w=y&&t>0?Math.floor((t-32)/2):0,b=w+32,v=w>0?w+Math.floor(16):0,j=function(e,t){let[n,i]=(0,a.useState)({lines:[],totalHeight:0,imgTop:0,imgW:292,imgH:292});return(0,a.useEffect)(()=>{if(t<=0)return;let n=!1;return async function(){let a=m(e,0,t,null),l="".concat("v3",":").concat(s),r=c.get(l);if(!r)try{r=await f(s),c.set(l,r)}catch(e){console.error(e);return}if(n)return;let o=Math.round(292*(r.naturalHeight/r.naturalWidth)),h=Math.max(0,a.totalHeight-o+120),d=m(e,0,t,g(r.points,0,h,292,o));n||i({...d,imgTop:h,imgW:292,imgH:o})}(),()=>{n=!0}},[e,t]),n}(o,w),k=p(h,b,w),N=Math.max(j.totalHeight,k.totalHeight),H=!y&&t>0?t:0,M=function(e,t){let[n,i]=(0,a.useState)({lines:[],totalHeight:0,imgX:0,imgY:0,imgW:0,imgH:0});return(0,a.useEffect)(()=>{if(t<=0)return;let n=!1;return async function(){let a="".concat("v3",":").concat(s),o=c.get(a);if(!o)try{o=await f(s),c.set(a,o)}catch(e){console.error(e);return}if(n)return;let h=Math.min(292,Math.round(.42*t)),m=Math.round(h*(o.naturalHeight/o.naturalWidth)),p=t-h,x=g(o.points,p,0,h,m),y=(0,l.Eq)(e,r),w=[],b={segmentIndex:0,graphemeIndex:0},v=0,j={left:0,right:t};for(;;){let e=d(x,v,v+26,8,3),t=u(j,e?[e]:[]);if(0===t.length){v+=26;continue}let n=t[0],i=n.right-n.left;if(i<24){v+=26;continue}let a=(0,l.c$)(y,b,i);if(null===a)break;w.push({text:a.text,x:Math.round(n.left),y:v}),b=a.end,v+=26}n||i({lines:w,totalHeight:v,imgX:p,imgY:0,imgW:h,imgH:m})}(),()=>{n=!0}},[e,t]),n}(o,H),E=p(h,0,H);return(0,i.jsx)("section",{className:"bg-white py-16",children:(0,i.jsxs)("div",{className:"mx-auto max-w-5xl px-6",children:[(0,i.jsxs)("div",{className:"mb-8 flex items-center justify-between border-y-2 border-black py-2",children:[(0,i.jsx)("span",{className:"font-sans text-xs font-bold tracking-[0.25em] uppercase",children:"The Editorial Review"}),(0,i.jsx)("span",{className:"font-sans text-xs tracking-widest text-neutral-500 uppercase",children:"Spring 2026"})]}),(0,i.jsxs)("div",{className:"relative mb-8 overflow-hidden",children:[(0,i.jsx)("div",{className:"pointer-events-none absolute inset-0 flex items-end select-none","aria-hidden":!0,children:(0,i.jsx)("span",{className:"block font-sans text-[clamp(4rem,15vw,10rem)] leading-none font-black tracking-tighter text-black/[0.05]",children:"FORM"})}),(0,i.jsxs)("div",{className:"relative",children:[(0,i.jsx)("h2",{className:"mb-2 font-sans text-[11px] font-bold tracking-[0.3em] text-neutral-500 uppercase",children:"Essay"}),(0,i.jsxs)("h1",{className:"font-serif text-[clamp(1.8rem,4.5vw,3rem)] leading-[1.1] font-bold text-black",children:["On Proportion, Rhythm,",(0,i.jsx)("br",{}),"and the Weight of Type"]}),(0,i.jsx)("p",{className:"mt-3 font-sans text-sm text-neutral-500",children:"By Marcus Veldtman \xa0\xb7\xa0 Photography: Arno Brisse"})]})]}),(0,i.jsx)("div",{className:"mb-8 border-t-4 border-black"}),(0,i.jsxs)("div",{className:"mb-8 font-serif text-lg leading-relaxed text-neutral-800",children:[(0,i.jsx)("span",{className:"float-left mt-1 mr-2 font-serif text-[4.5rem] leading-[0.75] font-black text-black",children:"T"}),"he golden ratio appears throughout nature — and throughout the history of typographic design, designers have borrowed this ancient proportion as a guide for composing pages that feel effortlessly balanced, drawing the eye along invisible currents of white space."]}),(0,i.jsxs)("div",{ref:e,children:[!y&&t>0&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)("div",{className:"relative",style:{height:M.totalHeight>0?M.totalHeight:void 0,minHeight:78},children:[(0,i.jsx)("img",{src:s,alt:"Portrait",className:"pointer-events-none absolute z-10",style:{to

1p:M.imgY,left:M.imgX,width:M.imgW,height:M.imgH}}),M.lines.map((e,t)=>(0,i.jsx)("span",{className:"absolute text-neutral-700 select-text",style:{left:e.x,top:e.y,font:r,lineHeight:"".concat(26,"px")},children:e.text},t))]}),(0,i.jsx)("div",{className:"mt-8",children:(0,i.jsx)(x,{lines:E.lines,totalHeight:E.totalHeight,colWidth:H})})]}),y&&t>0&&(0,i.jsx)(i.Fragment,{children:(0,i.jsxs)("div",{className:"relative flex gap-8",style:{minHeight:N||void 0},children:[(0,i.jsx)("div",{className:"absolute top-0 bottom-0 w-px bg-neutral-200",style:{left:v}}),(0,i.jsx)("img",{src:s,alt:"Portrait",className:"pointer-events-none absolute z-10",style:{top:j.imgTop,left:-20,width:j.imgW,height:j.imgH}}),(0,i.jsx)("div",{className:"flex-1",style:{minWidth:0},children:(0,i.jsx)(x,{lines:j.lines,totalHeight:j.totalHeight,colWidth:w})}),(0,i.jsx)("div",{className:"flex-1",style:{minWidth:0},children:(0,i.jsx)(x,{lines:k.lines,totalHeight:k.totalHeight,colWidth:w})})]})})]}),(0,i.jsx)("div",{className:"mt-10 border-t border-neutral-200 pt-4 font-sans",children:(0,i.jsxs)("div",{className:"flex items-center justify-between text-[11px] text-neutral-400",children:[(0,i.jsx)("span",{className:"tracking-widest uppercase",children:"Arts & Letters"}),(0,i.jsx)("span",{children:"Page 14 of 48"}),(0,i.jsx)("span",{className:"tracking-widest uppercase",children:"The Editorial Review"})]})})]})})}}}]);