<!-- Weight spectrum: solid demonstration of Nexa weights --> <div class="section-title">⚡ solid spectrum | weight & expression</div> <div class="weight-spectrum"> <div class="spectrum-title">Nexa — From regular to ultra solid</div> <div class="weight-item"> <span class="weight-label">Nexa 400</span> <span class="weight-text w-400">The solid core of readability — regular weight with firm presence.</span> </div> <div class="weight-item"> <span class="weight-label">Nexa 700</span> <span class="weight-text w-700">Bold stance — confident, sturdy, and remarkably solid for any context.</span> </div> <div class="weight-item"> <span class="weight-label">Nexa 800</span> <span class="weight-text w-800">Heavy solid piece — maximum strength, unshakable typographic power.</span> </div> </div>
The core Nexa family (Light and Bold) was originally a premium/freebie hybrid often found on Fontfabric’s site. While widely used, the full family is not hosted on Google Fonts under the name "Nexa." google fonts nexa
/* ========== VARIABLE WEIGHT DEMO (solid spectrum) ========== */ .weight-spectrum background: #0F131C; border-radius: 2rem; padding: 2rem; margin: 2rem 0 3rem; span class="weight-text w-400">
/* ========== GRID: SOLID PIECES OF TYPOGRAPHY ========== */ .section-title font-family: 'Nexa', sans-serif; font-weight: 800; font-size: 2.5rem; margin: 4rem 0 2rem 0; letter-spacing: -0.01em; border-left: 8px solid #F5C542; padding-left: 1.5rem; color: #F0F3FA; span class="weight-text w-700">
/* ========== SOLID QUOTE / MEGA DISPLAY ========== */ .solid-quote-block background: linear-gradient(125deg, #0F1219 0%, #080B10 100%); border-radius: 3rem; padding: 3.5rem 2rem; margin: 4rem 0; text-align: center; border: 1px solid rgba(245,197,66,0.3); box-shadow: 0 25px 40px -12px black;
btn.addEventListener('click', () => // Create dynamic animation effect + solid piece confirmation const newMsg = getRandomMessage(); msgDiv.style.opacity = '0'; msgDiv.style.transform = 'translateY(8px)'; setTimeout(() => msgDiv.innerHTML = `<span style="display: inline-block; background: #1E293B; padding: 0.8rem 1.8rem; border-radius: 2rem; font-weight: 700; letter-spacing: 1px; border-left: 6px solid #F5C542;">$newMsg</span>`; msgDiv.style.opacity = '1'; msgDiv.style.transform = 'translateY(0)'; msgDiv.style.transition = 'all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1)'; , 50); // extra haptic feedback (just style) btn.style.transform = 'scale(0.98)'; setTimeout(() => btn.style.transform = ''; , 150); );