Category Archives: Web Development

New CSS Drawing

Not a big post, just wanted to add a new CSS drawing for February. It’s been a while so here is a little older house situated in front of the water (ocean?).

See the Pen CSS Drawing: House by Alex Goff (@alexgoff) on CodePen.

CSS Drawings

I have been doing some CSS recently, trying to improve drawing skills and learning CSS animations. I’ve found that CSS drawing has also taught me much more about positioning than I knew before

First drawing:

An illustration of what my desk at work looks like

See the Pen CSS Desk Drawing by Alex Goff (@alexgoff) on CodePen.

A cactus:

See the Pen CSS Cactus by Alex Goff (@alexgoff) on CodePen.

A sleeping bear:

See the Pen CSS Images 001 Bear Cub by Alex Goff (@alexgoff) on CodePen.

Web Typography Demo

For an upcoming presentation on web typography, I put together a demo piece showing simple steps that can be taken to improve readability of text. The demo takes the first few paragraphs of Charles Dickens’ “A Tale of Two Cities” and shows the steps that can be taken from no formatting, to easy readability. These include appropriate line-heights, margins, letter-spacing, line-measure, and font pairings.

Many of these principles can be seen in the Type CSS Framework that I posted about recently. A quick overview:

Line Height

Increasing line-height can improve readability, and help readers follow lines more easily. For this demo, I set the body line-height to 1.5 and the header to 1.25. Line height should always be set as a multiplier of the font-size, not an explicit height in pixels, ems, or percentages.


To keep the vertical rhythm consistent, a 1.5rem margin is applied to the bottom of all headings and paragraphs. I am a proponent of single-direction margins to avoid “margin collisions” where a top and bottom margin may run up against each other. Likewise with horizontal margins, using “margin-right” will maintain consistency. By only using “margin-bottom” and “margin-right” all margins are created flowing from the top-left of the page.


Different from kerning, letter-spacing defines the space between all characters on the page. For this demo, the spacing is set to 0.01rem. More on using rem, I prefer rem over em because all rem units refer to the font-size defined in the html element of the page. Since em units refer to their parent element, if the font-size changes then sizing will no longer be consistent across the page.


The measure of the page can be controlled by sizing the width. There is no recommended measure in the demo, but between 60 and 90 characters is accepted as optimum for readability. Too wide of a page makes it difficult to track lines, and too short begins to feel disjointed and difficult to follow text line-to-line.


One of the more subtle changes to the text, changing the header and body to #222 and #444, respectively, makes for slightly lower contrast. This lower contrast still passes webAIM standards, but is softer on the eyes when reading for a long period of time.

Font Pairing

A simple two-font pairing, using two system font-stacks, the pairing creates a visual hierarchy between the headers and body.

Web Typography Demo

Type CSS Framework

I have been working on a small CSS framework the past few weeks. It is at the point where I am comfortable putting it in the wild and hopefully it is not in too bad of shape. The goal for Type CSS is to create minimal, highly readable web content. It is not intended as a fully fledged framework a la Bootstrap, Foundation, etc. Its spiritual predecessor is Skeleton CSS, a small lightweight boilerplate. Type CSS is slightly larger, and more feature filled so it is a bit more of a framework than a boilerplate.


  • Flexbox-based grid system
  • Flexbox utility classes
  • Typography that took a few days to get “right”
  • Buttons, forms, tables, utility classes, and all the other goodies

Now… transitioning this blog to Type CSS will be the real test. Currently it is running off my tweaked fork of Skeleton.

Feedback is always welcome via email, GitHub, etc.

GitHub Repository

Demo Page

Oregon Trail Name Generator

Oregon Trail Wagon
I got the Oregon Trail card game the other day for nostalgic purposes. Making up names for the game was fun, so I took a bit of time to make a name generator for those of us that struggle to think of what our Wild West name might be. Here’s the link:

Oregon Trail Name Generator

Used in this project:

  • Typed.js
  • jQuery
  • Simple Responsive Grid
  • Google Fonts

Calcutron 5000

Calcutron 5000 is a JavaScript calculator with a vintage styling. It is inspired by the big, bulky, ugly beige calculators of the 1980’s, complete with chunky keys and loud keypresses. Designing Calcutron was part of a DailyUI challenge. The original CodePen concept is here:

See the Pen Daily UI #04 by Alex Goff (@alexgoff) on CodePen.

Since then, I have been refining and improving Calcutron by cleaning up its interface to be fully responsive across almost all screen sizes. Additionally the layout has been rearranged, keypress sounds have been added, and the JavaScript calculations have been improved.

Check out Calcutron 5000