Typebased my Blog

Note: This is a restored article from the original A thousand nodes blog (circa 2011).

Finally my site is looking decent. I also added some soap bubbles to it using HTML5 Canvas. Have fun!

Typography-Based Design

Back in 2011, web typography was undergoing a renaissance with services like Typekit and Google Fonts making it possible to use custom fonts on websites. The "typebased" approach focused on using typography as the main design element, with careful attention to:

• Font selection
• Text sizing and rhythm
• Line height and spacing
• Contrast and readability

For my blog redesign, I focused on a clean, typography-centered layout that made content the star of the show, rather than heavy graphics or complex layouts.

Adding Interactive Elements with Canvas

To add a bit of personality and fun to the site, I implemented a canvas-based bubble animation. This was still relatively cutting-edge in 2011, as HTML5 Canvas had only recently become widely supported.

Here's a simplified version of the bubble animation code I used:

// Get canvas element
const canvas = document.getElementById('bubbles');
const ctx = canvas.getContext('2d');

// Resize canvas to fill window
canvas.width = window.innerWidth;
canvas.height = 300; // Fixed height at top of page

// Bubble class
class Bubble {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = canvas.height + Math.random() * 100;
    this.radius = 5 + Math.random() * 15;
    this.speed = 1 + Math.random() * 3;
    this.opacity = 0.05 + Math.random() * 0.2;
  }
  
  draw() {
    ctx.globalAlpha = this.opacity;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#fff';
    ctx.fill();
    
    // Add slight highlight for 3D effect
    const gradient = ctx.createRadialGradient(
      this.x - this.radius * 0.3, 
      this.y - this.radius * 0.3, 
      0, 
      this.x, 
      this.y, 
      this.radius
    );
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0.1)');
    
    ctx.globalAlpha = this.opacity * 0.5;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    
    ctx.globalAlpha = 1;
  }
  
  update() {
    this.y -= this.speed;
    
    // Reset bubble when it goes off screen
    if (this.y < -this.radius * 2) {
      this.y = canvas.height + this.radius;
      this.x = Math.random() * canvas.width;
    }
  }
}

// Create bubble array
const bubbles = [];
for (let i = 0; i < 50; i++) {
  bubbles.push(new Bubble());
}

// Animation loop
function animate() {
  // Clear canvas with slight transparency for trail effect
  ctx.fillStyle = 'rgba(31, 41, 55, 0.3)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Update and draw bubbles
  bubbles.forEach(bubble => {
    bubble.update();
    bubble.draw();
  });
  
  requestAnimationFrame(animate);
}

// Start animation
animate();

// Handle window resize
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
});

Combining Typography and Interactive Elements

The key to making this design work was balance. The canvas animation added visual interest without distracting from the content. I positioned the bubbles in the header area of the site, creating a pleasant ambient effect that didn't interfere with readability.

The typography was kept clean and consistent throughout:

body {
  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
}

h1, h2, h3, h4 {
  font-family: "Museo Slab", "Rockwell", serif;
  font-weight: 500;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.4em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.5em;
}

.content {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5em;
}

The Impact

This redesign significantly improved the readability and visual appeal of the blog. The typography-first approach ensured that content remained the focus, while the subtle canvas animation provided a layer of sophistication and interactivity.

Looking back at this from a modern perspective, this approach was ahead of its time in many ways. Today's focus on performance, minimalism, and content-first design echoes many of the principles I was exploring with this redesign in 2011.