Scrapbook: HTML Essays

What is an HTML Essay?

A single page website, usually hosted on a dedicated domain or subdomain, that serves to publish a single essay. This page may heavily use rich media, diagrams, charts, or even interactive JavaScript elements, but it is an essay first and foremost, built purposefully for a narrow scope of information delivery.

HTML Essay Examples

Important Note: Just because I link to an essay here doesn’t necessarily mean I agree entirely with it’s content. I’m simply linking examples of HTML essays that I feel represent the format and execute on it well.

• “tiny internets”
• Bradley Taunt’s “Better Search Results”
• Bradley Taunt’s “Blog Anonymously”
• The Yesterweb
• “Towards a Digital Pluriverse”
• “Constitutions of Web3”

Content

Images and Visuals

Diagrams

• Excalidraw

Rich and Interactive Media

Aesthetics

Design Languages

• Academic (LaTeX)
  • latex.css
• Book/Typeset (serif fonts, off-white backgrounds)
  • tufte-css
  • Maggie Appleton’s site
• Minimal/Resource-Saving (System font, dithered images)
  • Referi
  • Bradley Taunt’s site
• Neo-Brutalist (heavy lines, hard shadows, vintage muted colors)
  • Abhishek Choudhury’s site
  • Neo-Brutalism cheatsheet (not a site)
• Minimal Modern (monochrome or muted palette, large sans-serif fonts)
  • Rasmus Andersson’s Site
  • Raster Simple Grid System
  • Bradley Taunt’s “Better Search Results”
• Vibrant Modern (More use of color, large sans-serif fonts)
  • My professional site
  • lectronice’s site

Starting Points for Layout

tufte-css — A CSS template for creating pages that look like statistician Edward Tufte’s handout style. A great starting point for those who want their essay to have a typeset look.

latex.css — A CSS template for creating pages that look like a LaTeX document. Definitely a great idea for anything math related, as it has built-in support for theorems, definitions, proofs, lemmas, and more.

Referi — A great starting point for those who want a minimal, yet robust way to create a lightweight webpage. It features an 8-column grid system that allows content to be laid out with <cell> tags.

Raster Simple Grid System — A grid system similar to referi, but a bit more fleshed-out and focused a bit more on visual aesthetic and less on minimal resource usage. Built by Rasmus Andersson, the same guy that made the Inter typeface.

Remember that with any of these starting points, just changing the font and colors is enough to give it an all new visual identity, so don’t feel trapped into a particular style just because you picked a certain CSS template to start with. For example, my professional site (as of August 2023) is actually based on tufte-css, but you wouldn’t think it. A majority of what I did was simply changing the colorscheme, and changing the font from ET Book to Inter.

Font Resources and Pairings

• Open Source Typeface Pairings
• A rant on web font licenses