The site uses cookies that you may not want. Continued use means acceptance. For more information see our privacy policy.

Category: design

Doing a Typography

Posted in design by Adam
Posted on

So many letters, someone should write a song to help remember them all.

I’ve been working on a new typeface. The filesystem shows the last time I made one was 2014. The one I made before that, I’m not sure when it was, but no later than 2004. Not a skill I’ve kept up with too much, but it’s always an interesting challenge.

There’s a paradox in recreating the alphabet. You have to stick to the known forms, so that readers won’t be confused, but you also have to find some way to make it different enough to be appealing. You want the variations to be consistent between letters, to give your creation a unique feel, but they should be subtle enough to make the font feel consistent with others (particularly if replacement characters are needed; that is, if you aren’t providing full coverage of the thousands of glyphs you could).

It’s a low-stress activity. You see your progress with every letterform completed. You work on one letter at a time. You can tweak them endlessly.

It’s a low-knowledge activity. I use FontForge, which does a lot of work for me. I don’t understand how manual hinting would work, but it has auto-hinting. I don’t know how to control for all the little problems I cause, but it has a “Find Problems” feature that will fix most of them for me.

The website Design with FontForge has some good information to get started, and it’s written with a you-can-do-it tone. I don’t believe that existed the last time I worked on a font. It really is something more people should give a try.

When starting a font, the first question you have to answer is, “What kind of font?” It could be a serif font, or maybe sans-serif. It could be monospace, or it could be variable width. Or it could be a display font—one meant for short bursts of text (signs, headings, like that), not suitable for paragraphs and long reading.

The second question is, “How much coverage should it have?” If you want a usable typeface, you’re talking at least 85 characters: the alphabet twice (for uppercase and lowercase), ten digits, and about 32 other punctuation and special characters available on an plain US keyboard. Plus space. If you want to go all-out, you can create a true italics version, which isn’t simply an oblique rendering of the normal version, but features its own glyphs. You can add ligatures and kerning and wade deep into the Unicode Basic Multilingual Plane or even beyond it. (Don’t believe I’ve ventured beyond Latin-1, myself.)

On the other hand, some characters are easier than others. Hyphen and equals share enough similarity that you can get at least all three done quickly, and you can tweak them later if needed. For brackets, braces, and parentheses, making one gets you its partner without much trouble. And uppercase E and uppercase F are usually pretty similar, just chop off that lower bar on the E. You can rotate your six to make a nine. If you’re feeling adventurous, you can even rotate your uppercase N to get uppercase Z, which you can tweak to lowercase z as well. Your stop and comma can be reused to make your colon and your semicolon.

But outside these quicker ones, it’s a matter of one-at-a-time, building the shape, refining, fixing the flaws.

Things look nicer the fewer points you can use, at least initially. The curves won’t get lumpy, won’t require a lot of fiddling to change. You’ll learn a lot about how little attention you’ve paid over the years to these shapes your eyes have passed over billions of times. The basic scribble of your handwriting is very different from forming the letters as vector shapes.

The good news there is that you can open finished fonts inside of FontForge and look at how others made their letters. I should probably do that more. I could stand to learn a lot from that stored knowledge.

But for now I’m just picking a letter and getting it into a rough shape, then straightening what’s meant to be straight and curving what’s meant to be curved, getting the thicknesses consistent, and then moving on. Once I get my basic coverage done, I’ll come back and work on consistency between letters.

It’s a nice, relaxing artistic experience.

Mario, Psychology, and Design

Posted in design by Adam
Posted on

Spoiler: sometimes a brick actually holds ten coins (if you can jump fast enough).

Super Mario Brothers makes use of something akin to a random reinforcement schedule in order to add to the fun of the game. It’s not a true random reinforcement, as the rewards are the same from game to game, baked in to the levels. But to the new player, these choices feel like a random reward.

The first level, known as one-dash-one (1-1, some pronounce it one-one), features these elements early on. The first set of above-your-head blocks include bricks and question-mark blocks. It’s natural as you start to feel your way into the game to try jumping around, and you’ll jump into the bricks and blocks, if only by accident. You’re rewarded for jumping with coins, or perhaps a mushroom pops out. You happen to touch the mushroom and become super. You jump some more, collide with an overhead brick, and it breaks!

As you move through the level, you want to hit these blocks. You’ve learned the simple and rewarding task that makes up one of the core mechanics of the game.

Harder to discover elements remain. First is pipes. you come to your first pipe only slightly past your first blocks. It’s bigger than you! Perhaps you can go inside it? If you can, it’s not obvious how. You tried pressing down (↓), but it did not do. Oh well. You carry on jumping over or on enemies, on to the next pipes, trying to go inside. The fourth pipe, you can go down!

Most people saw others play first, learned that some pipes are enterable that way. The entering of pipes isn’t as obvious as hitting blocks by jumping up into them. The designers tried to make it more obvious by making the pipes bigger than you, suggesting something your character could crawl into. After you complete 1-1, you’d see your character enter a pipe to get to 1-2, which might make you try entering pipes. In later levels you would see piranha plants—something like venus fly traps—come out of pipes, another possible late hint.

The others are slightly more discoverable, perhaps: there are bricks that act as question-mark blocks, and there are invisible question-mark blocks. By getting in the habit of busting bricks, players would eventually find the secret that some bricks aren’t mere bricks. And by jumping around in random places, one could discover that some hidden blocks lurk in the air. (There aren’t many hidden blocks in Super Mario Brothers, but they still add to the effect of pseudorandom reinforcement.)

(Later iterations of the Mario franchise would expand on these elements with other block types, checkpoints, doors, end-of-level-roulette, and more.)

The first level teaches you to play, an enduring and outright essential feature in gaming. But it doesn’t only teach you how to play Mario, it teaches you how to play video games in general. It says that gaming is a world where sometimes things work a little weird, seem a little random. It’s an experience you have to experiment with. Try jumping into things. Try pressing down on top of pipes.

But it also gives you that reinforcement, that feeling of reward, for trying things out. While many games lean heavily on combat—killing enemies and beating the game, Mario includes these other reinforcement options as well:

  • Finding which blocks and pipes contain what.
  • Coin collecting (numismatism).
  • High scores.
  • Best times.

These extra dimensions add something to the game, particularly because they reinforce your effort. They make you want to do better. Without reinforcement, animals including humans wouldn’t learn, I’m sorry to say. When you bump into one of those blocks on 1-1, you’ve learned something. This is known as the law of effect (Wikipedia: “Law of effect”), which basically says that things that have positive effects we (being those with averagely-wired brains) want to repeat (and, by extension, those with negative effects, we seek to avoid).

There are several kinds of learning here:

  • Action–reaction mapping, where we discover some action has (probably) some result.
  • We learn what games are like (so that in other games we will check for invisible blocks)
  • We learn that there are tradeoffs in game design, that breaking some design rules makes gameplay stronger

In the last case, the designers could have made pipes indicate which were enterable or not. They could have avoided having bricks that give coins. But they wanted it to be a surprise. Normally that’s bad design, to have two things look identical but behave differently. Does it get a pass because it’s in a game? For some players it does. It frustrates some players, but for most of us it’s a game. The game world has different rules that makes it okay to a point.

The point where things break down is if there’s too much inconsistency, too much incoherence. Even there, some players would still go along. But most wouldn’t. There has to be logic in the departures, and it needs to be limited in number. You can’t keep adding more breaks in the game reality, where some koopas grant powerups, some fireflowers are poison, some platforms are really pits, and some bricks are secret flagpoles.

There wouldn’t be a game left, if on every level there were no rules to depend on.

Ink Cream, the New Theme

Posted in design by Adam
Posted on

Finally a fresh coat of paint on this old heap! Sit and read some of how it came to be.

For a while now the site has used the default theme, Twenty Twenty One. I liked it okay, but one thing that bothered me was that the dark mode wasn’t customizable, was kind of bland.

The other thing to know is that I use Stylus to clean up or modify styles on various websites I visit. For some time I’ve been using a semi-dark theme (the same light gray background as the light mode background here) on many news sites, and occasionally a dark version on others (again, same background as the dark theme here). That kind of daily testing led me to find it preferable, and so I wanted to bring that design to this site.

Browsing through Google’s selection, many fonts come close to being great but had at least one or two flaws I couldn’t abide.

The basic premise of the light theme is that websites don’t need to be white-backgrounds. We have shades of gray to use here. And that dark modes don’t need to be white-on-black. Again, we have shades. For the most part, I would be happy to use light themes if they weren’t pure white. All the web designers that shook their fists at the need to create dark variants could have made a compromise, but I haven’t seen any of them do so.

Even at night, the light theme of this site isn’t particularly bad to my eyes, though the dark mode is certainly nicer.

I found underscores.me, a starter theme. It provided a solid base to build on. I later found out that WordPress is soon (sometime next year) to release a “Block theme” built for their new Gutenberg blocks system. I may eventually rebuild for that, or switch to it. It offers “full site editing,” which may kill off traditional themes. I’m not entirely sold yet, but I’m keeping an open mind and waiting to try it out and see what it offers.

I tried to add some functionality with plugins, but they mostly don’t offer an off-switch for their default styles, and trying to dequeue their styles is hit-or-miss, so I built more functionality into the theme itself. If I end up migrating to the new system, I may have to rework that functionality into plugins.

The one decision that skipped a plugin but I didn’t implement myself is code highlighting. After looking at client-side (JavaScript) options and server-side (plugin) options for code highlighting, I decided to go with neither. I can run code through pygmentize when I compose an article, and then I can add the markup directly to the post. I already self-handle other elements, like images. So if I get the itch to actually highlight code, that’s what I’ll do.

One of the big non-technical challenges was finding good typefaces. I opted to use Google Fonts to load nicer typefaces here. (I load them with WebFontLoader.) Browsing through Google’s selection, many fonts come close to being great but had at least one or two flaws I couldn’t abide. One had an inverted at-symbol (@), another had a capital C that looked too much like a G. Most sans-serif fonts don’t properly distinguish between uppercase I and lowercase L.

In the end, I dropped trying to have a separate serif face for headings, in part to keep the site light, and in part because trying to find two faces was too much.

CSS Fun

Having not done much web development in a long while, here are some of the newer things I used in building the stylesheet.

:where()

Having been out of the loop, I didn’t realize :is() and :where() existed. I only use the latter, as it doesn’t influence the scoring of selectors. It lets you do things like:

    .recipe :where(.ingredient, .tool, .container) {
        font-weight: bold;
    }

This saves you creating three separate selectors if you want all “important” items under a recipe to be boldfaced.

clamp()

I knew that math functions existed, but clamp() is really nice. You give it three values:

  • minimum
  • variable
  • maximum

And it will let the outcome vary only within the bounds you set. Most of the time the variable will involve something with vw units, so that the outcome varies based on the screen width, but there are other ways to use it.

Custom property fallbacks

I’ve used custom properties in my user styles for awhile, so that I don’t have to recreate things like colors for every site I create a custom style for. But I didn’t know there are fallbacks. I only use them for filling the SVGs in the social media buttons:

    html:not([dark]) .soc-fill,
    html[dark] .soc-link:focus-visible .soc-fill {
        fill: var(--ic-soc-c0, #000);
    }

    html[dark] .soc-fill,
    html:not([dark]) .soc-link:focus-visible .soc-fill {
        fill: var(--ic-soc-c1, #FFF);
    }

I set fill values (--ic-soc-cN) for some icons, if the service calls for a particular color in their brand guide, but if not I can fallback to black or white (depending on the dark or light theme and whether or not keyboard focus is happening).

Other small bits

Testing in chromium taught me about will-change that hints the browser to expect repaints of an element. It probably isn’t that necessary given it’s only for the theme-mode toggle in the upper right, but it’s cool to know about. I was also able to use a media query for prefers-reduced-motion to stop that animation if someone has a relevant OS setting turned on.

I tried to get accessibility correct. Some of that was helped by WordPress itself, other parts helped by the underscores base. Proper accessibility design helps everyone, including people in early stages of a sight disorder or even someone who’s stressed or drunk or tired.

To improve accessibility, I removed placeholder text in form inputs. After trouble finding good colors that were within the contrast bounds, I did some thinking and reading. I decided that the only real purpose of placeholder text is to make forms look less plain. Multi-field forms need visible labels anyway, and with those the placeholders don’t really add anything to the design.

If you’re relying on hidden labels being read by screen-readers, that leaves people who may have some accessibility needs out in the cold. The exception is single-field forms (like search), where the button next to the field provides enough information for people without screen readers.

I also tried to make keyboard navigation work correctly and with good focus coverage. I actually like how the focus looks more than the lesser design like hovering. I might eventually collapse them into the same design, though I have slight concerns that could be too confusing. Having separate styles for :hover and :focus-visible seems cleaner.

Credits

The darkmode toggle button and its JavaScript is slightly modified from Henry Egloff: “How to Code a Simple Dark Mode Toggle”.

After looking at the options, I went with remedy.css for a “reset” (github: Jen Simmons: cssremedy). I still didn’t use most of it. I’m not targeting Internet Explorer. In general I don’t want to target browsers more than a few years old.

I got a lot of help from the usual:

(Probably forgot some others. It’s the Internet, lots of good and helpful stuff around! Many thanks!)

I’m sure there’s other things I forgot. But that’s enough words for now. Hope visitors enjoy the new look.