Reducing Bugs With Typography

As a web designer I understand the importance of typography in applications. So I’m constantly evaluating whether things like scale and measure are consistent in my presentation. Applying best practices when dealing with type creates a very clean environment for delivering communication and doesn’t add any overhead to the users understanding of the content.

A logical place to apply these principles is in an editor.

How can typography help reduce bugs?

  • The right font size can help reduce eye strain and fatigue resulting in fewer errant keystrokes.
  • Proper leading (the space between lines) can make code easier to read and thus debug.
  • A good font will make it easy to distinguish between characters, ie — O/0 (case in point) as well as provide proper kerning (the space between characters) for periods, commas, and special characters. I recommend Input — the curly braces are worth it alone. Not to mention it’s free.

Some theme tips:

  • Find a theme for your editor that comes with a light AND dark theme. A lighter theme is easier to read in bright/sunny conditions and switching between them will be less jarring as the syntax highlighting will/should stay the same.
  • Make sure the contrast between the background color and the type is high but not overbearing.
  • Choose a theme that highlights comments rather than muting them. We comment are code because it is important! A muted comment block will challenge eyes for attention rather than guiding them to it.
Atom + Material Theme + Material Syntax Dark + Custom Comment Styles + Input Font
Like what you read? Give Justin Seiter a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.