Building a Typographic Foundation with Style Sheets

Jason Tselentis in Learning on March 31, 2015

Over the past few years, the axiom “mobile first” has motivated designers to get online and reach their audiences by first considering how the site and experience will take shape on mobile devices. Initially this meant designing for the small screen on a phone, but over time, e-readers and tablets have become more prevalent than laptops and desktops, requiring solutions for a range of screen sizes. And designing for those multiple screens means making sure the typography works. Today, mobile first has become second nature, but in order to ensure the design works well on small to medium to large screens, you have to think “type first.” A range of tools exist for creating typographic style sheets, including text editors, markdown editors, page layout programs, and web apps such as Monotype’s Typecast™.

Viewing your type styles all at once, from large to small, lets you compare styles and experiment with permutations in order to see hierarchy and readability, while also seeing how the typography compares to your existing brand identity, and any typographic handling used for its look and feel.

From the Backend to the Frontend

Before you layout a website, looking at typographic style sheets will help you size things up using a type first methodology. You get to see your heading 1 to your captions, plus minor headings and body text, eventually taking your typography to a desktop and mobile browser to make sure everything works across every device. Web developers will customarily use a text editor in order to input CSS styles and compose their text content as HTML in the backend. Plenty of text editors exist for typing CSS and HTML by hand, with some of them offering a preview of how the final typography and layout will look in the frontend.

Hand typing this basic style sheet in a text editor included creating a new file, establishing the CSS headings and font-families, and scaling the font-size, plus inputting the HTML headings 1–6 (right) to see how the typography looks and feels.

Markdown editors let you type up your content, tag lines of text or bodies of text with hierarchical elements such as headings, and export the text to HTML. From left: markdown text as previewed in the editor, exported to HTML format, and the headings as they’d appear in a web browser.

Markdown editors offer a simple interface displaying just plain text, and many of them let you export your content to HTML. Markdown isn’t intended to replace HTML or CSS, but rather, it’s a starting point for those who want a less is more approach to typing and viewing their content, and then converting it to a web format such as XHTML or HTML. Markdown editors offer a bare bones way to work with text, where you tag or label styles, such as major headings to minor headings to body text and pull quotes. On screen, the text all appears the same, with noticeable tags you’ve given your type styles, such as “#” in front of text intended to be heading 1 and ”##” for heading 2. And only when it’s been exported to HTML are you able to see how it will look in a web browser. Oftentimes, you’ll need to create the CSS as a separate file in order to specify type sizes, families, and colors.

A CSS example from the author’s personal website created using a basic text editor. For the site’s layout, the Helvetica® typeface family will be used first, and if it’s unavailable, the Neue Helvetica® family is loaded, and on down the list to the final fallbacks of the Arial® typeface family and the browser’s default sans serif.

The CSS, as applied to a few lines of HTML, gets previewed in a browser.

WYSIWYG Editors

While many designers and developers have become accustomed to using text editors, time is truly of the essence, and anything that can be done to cut down on production and development will help you and your team to think type first, and release your designs quickly and easily. Word processors and design layout programs that run on desktops, tablets, and even smartphones are intended to give designers a what you see is what you get (WYSIWYG) layout experience, that shows you what your design will look like, while also providing the necessary HTML and CSS for the site to function in a browser.

Word processors and page layout programs let you type your content, apply styles, and then export the document to XHTML, HTML, XML, and CSS files for customizing and specifying Web Fonts from a variety of sources.

Many WYSIWYG programs let you easily change your typography’s size, weight, and style, as well as its color and background color. Monotype’s Typecast application is one such WYSIWYG tool, intended to give designers an immediate preview of the typography and layout in an easy-to-use app that works in a web browser.

Creating a free account at Typecast.com enables you to design headings, body text, and a pull quote in under two minutes, with the added bonus of getting to see how Web Fonts from a wide variety of sources work in your layout.

You can create your typographic foundation with one type family or a combination of two or more, and WYSIWYG editors such as the Typecast app help you do the job quicker and easier than typing your HTML and CSS one line at a time in a text editor. Conventionally, web designers have begun with Web-safe fonts, such as the Arial®, Georgia®, or Verdana® typeface families. These and other fonts are installed on most operating systems, giving them the alternate title of “system fonts.” It’s important to note, however, that building with system fonts during preliminary development when you preview your typographic style sheet opportunities, it doesn’t mean that you should use just system fonts in your final design, diluting the effectiveness of a site. System fonts are intended to be a skeleton that you build upon, eventually using Web Fonts to customize your typography and give your site a unique voice.

You can add character to your site and go beyond system fonts by choosing from a wealth of fonts in Monotype’s Typecast app from Fonts.com, or from other Web Font providers.

Previewing the Demos Next® typeface family from Fonts.com is as easy as highlighting the heading 1 in Typecast and selecting from a drop-down menu.

You can scaffold up from the system fonts used in your layout with Web Fonts by using a side-by-side layout to compare and contrast the two. You can choose from a wide variety of providers and fonts in order to give your site a look and feel that matches your existing brand identity, and conduct testing in order to find a best match for your fallback font.

In this side-by-side Typecast layout, the blue-highlighted p.second-intro Trade Gothic® typeface on the right can be quickly and easily compared to the Arial font on the left. In this case, Arial would make a good fallback choice for Trade Gothic, since the two have matching end-of-line breaks.

Typecast outputs a comprehensive style guide including the fonts used, their providers, and also the CSS styles.

When your typography has been established, tested, and finalized, use Typecast to view your style guide that shows what fonts you’ll use, their providers, your color palette, and the styles and CSS properties. And if you’ve opted to use a text editor, markdown editor, word processor, or page layout program, you’ll want to export your layout to HTML and your styles to CSS for previewing and testing in a browser. With your typography specified and web ready, you now have the assets to begin developing the rest of your site type first.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW magazines. Mr. Tselentis also has four books to his credit on design, typography, and design history.