Ben Crowder

Blog: #figma

5 posts :: tag feed :: about the blog :: archive

A short followup to what I wrote last year about Press, my abandoned typesetting engine project: I’m now fully convinced that the web platform is where I want to do typesetting. It’s open, programmatic, and capable. Source files are plain text, easy to version control, and fairly future-proof. And even though it’s not WYSIWYG — at least not the way I’m using it — it’s much more comfortable for me as a working environment.

For non-book work (charts, some kinds of documents), I’ve found that browsers already support everything I need (like @page). That’s how I’ve done all my recent genealogy design work, and it’s how I’ll do any language charts I make going forward. And for things like books where browser support isn’t quite there yet, Paged.js works well (and will presumably be phased out once browser support gets better).

Not to mention how nice it is for both print and digital workflows (EPUB, web) to all use the same technologies. I also love that the web is cross-platform. Something I ran into when I was making charts with PlotDevice (which is Mac-only) was that people on Windows couldn’t modify the charts even when I gave them the source. That’s not a problem with the web.

I’ve even started using the web platform for less webby things like making wallpaper for my phone:

Dark cloudy background with the text of Matthew 11:28 at the center.

Here’s the HTML (the 375×812px size is the CSS resolution of my iPhone 12 Mini — RIP — and also keep in mind that this was for a one-off never to see the light of day, so I took the liberty of cutting a few corners):

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background">
    <svg id="darknoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter">
        <feTurbulence baseFrequency="0.5" numOctaves="8" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter)" />
    </svg>

    <svg id="lightnoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter2">
        <feTurbulence seed="485" baseFrequency="0.005" numOctaves="12" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter2)" />
    </svg>
  </div>

  <div class="quote">Come unto me, all ye that labour and are heavy laden, and I will give you rest.</div>

  <div class="reference">Matthew 11:28</div>
</body>
</html>

The CSS (with the font purchased from FontShop):

* {
  box-sizing: border-box;
  font-family: Clifford Pro;
}

html {
  height: 100%;
}

body {
  color: #777;
  font-size: 1.6rem;
  margin: 0;
  text-align: center;
}

.background {
  background: radial-gradient(circle at 50% 90%, #222, #111);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.background svg#darknoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
}

.background svg#lightnoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}

.quote {
  line-height: 1.4;
  margin: 25rem 1.5rem 0;
}

.reference {
  color: hsl(0 40% 32%);
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1rem;
}

I then used headless Chrome to export the PNG (Firefox would probably have worked as well, though I haven’t yet tested it for this):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot --window-size=375x812 index.html

It’s not the world’s most amazing wallpaper or anything, but I’m still pleased that I was able to make something I’m reasonably happy with using technologies I love. (I could have also used WebGL shaders or Canvas. Lots of options!)

Here’s to the open web.


Reply via email or via office hours

I’ve decided to ditch Adobe’s Creative Cloud apps — Photoshop, InDesign, and Illustrator, mainly. I never thought I’d say that, but they’re too expensive. Instead, I’ll be using Affinity Photo, Affinity Publisher, and Affinity Designer. It’s a fairly small one-time cost instead of a dreary, never-ending, money-sucking subscription.

(If/when I need to do motion graphics or video editing in place of After Effects and Premiere, by the way, I’m planning to use the free version of DaVinci Resolve.)

So far I’ve only actually used Affinity Photo, to texture the piece I released yesterday. Worked like a charm. The live split-screen preview when applying a filter is brilliant, and the file sizes are much smaller, too. (In Photoshop I’d regularly end up with a 1–2 GB PSB file. With Affinity Photo, it’s closer to 300 MB.)

As far as typesetting goes, I still expect to use TeX (Tectonic) on projects where it makes sense — it’s what I used on the wide margin study editions since typesetting each language individually would have taken much more time — but it’s nice to have Affinity Publisher for other projects. I’m planning to use it for the book of narrative poems I’m (slowly) working on. (I’ll be setting it with Hinte, a new typeface I’m designing in FontForge. More on that soon.)

With Figma doing most of what I used to use Illustrator for, I don’t expect to use Affinity Designer all that much initially. But the raster brush textures are intriguing. We’ll see.


Reply via email or via office hours

Links #31


Reply via email or via office hours

New artwork: Faith, Hope, Charity.

Figma is working great for me, by the way. Right now I’m using it to organize ideas, execute those concepts, and schedule releases.


Reply via email or via office hours

The hiatus may or may not be over. New artwork: Mother in Heaven. I used Cirque to create the small circles, then did the rest of the vector work in Figma (which I’m liking much more than Illustrator).


Reply via email or via office hours