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.
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.
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.
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.
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 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.
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.
