Developer’s Basic Guide to Typeface: Part 1
The basic ways in which programmers interact are with CSS and HTML properties and tags, which work great but lead to subpar design. As programmers, we set out to write cohesive, interactively beautiful and fluid apps, software, web sites, you name it. Yet more often than not, basic design laws and standards are blatantly broken. After reading through several of the curriculums from top computer science programs and bootcamps, my theory was validated; programmers are not taught to design. Readability, Design, and UX are labeled do not touch and left to the designers, yet in the growth of this industry we can all benefit from knowledge of design principles.
As programmers you are probably most familiar with two aspects of text so far: text-decoration, and font-families. So what’s the difference?
#text-decoration
The text-decoration CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style. (MDN)
.under {
text-decoration: underline black;
}
.over {
text-decoration: wavy overline green;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.blink {
text-decoration: blink;
}<p class="under">This text has a line under it. Only do this in a paragraph.</p><p class="over">This text has a line over it. This is stupid don't do this.</p><p class="line">This text has a line going through it. Why would you ever do this?</p><p>This <a class="plain" href="#">link will not be underlined</a>,
as links are by default. Looks pretty okay, but be careful to not break the link!</p><p class="underover">This text has lines above <em>and</em> below it. WHY????</p><p class="blink">This text might blink for you,
depending on the browser you use. If anything ever says 'depending on the browser you use,' you probably shouldn't use it...</p>
#font-family
font-family: “Source Sans Pro”, “Arial”, sans-serif;/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;
“How can I make my site really stand out without making it bold, red, and using underline over line decorations?? Is it possible to use different typefaces and styles without making eyes bleed?” Yes. Let’s start with the basics of typography and font pairing.
font-family: serif;
Serif typefaces are named in reference to the stroke at the end of bars and stems on letters. The most commonly accepted theory of serif lettering origin dates back to Roman antiquity, where words were carved into stone and the strokes were added on to clean up the ends of the lines.
There are four major types of serif fonts, Old-style, Transitional, Didone, and Slab-serif. Serif typeface’s are typically used in the body or in paragraphs because of their easy legibility.
font-family: sans-serif;
Sans serif literally means no serifs. Sans-serif’s are traced back to Greek antiquity, where inscriptions were carved into stone, in larger quantities and smaller sized, so they weren’t embellished like the Roman serifs. Sans-serif typefaces are frequently used in logos, as their minimalism is attention drawing yet elegant. This minimalism also led to a boom in the 20th century, as more and more people were reading on computers. Using anti aliasing, programmers were able to remove some of the pixilation of typefaces, but completely removing serifs made reading on screens that much easier.
font-family: monospace;
Also known as fixed-width fonts, monospace fonts have letters and characters that occupy the same amount of space as one another. Monospace fonts became widely used in early computer terminals as the graphical capabilities were limited. Most text editors, terminals, and consoles still largely use monospace fonts today.
font-family: cursive;
Better known as script typefaces, cursive fonts are based on the fluidity of handwriting. Scripts weren’t as popular in print because of the complexities their ligatures caused printing presses, but as we moved into the digital age, scripts have become more accessible. The main categories of scripts are brush-scripts, calligraphic, and handwriting. Though scripts can bring a rustic or humble vibe to your site, it’s important to be weary as many of the main scripts have been way over used and beat into the ground. No one wants their site to look like a bake sale. Even bakeries. Need I mention comic-sans?
font-family: fantasy;
Just…don’t. You can do so much better and so much more without fantasy fonts. Pretend they don’t exist. You’re better than this.
font-family: system-ui;
System-UI fonts are probably some of the typefaces you see most frequently. Google uses Roboto, Apple uses San Francisco, Mozilla uses Fira Sans, etc. These big tech companies took their branding to the next level by including their own custom type-faces on their platforms. Wild.
Typefaces are everywhere, so much so that one doesn’t even recognize when they’re reading them what they are subconsciously associating them with, and how important that can be. In part 2 we’ll take a dive into typeface pairing do’s and don’ts.
