The art and science of online typography is often overlooked by hurried designers and basic tools that simply rely on the most standard fonts and settings at the cost of creativity — an especially widespread issue for adult sites relying on stock templates rather than the individual flair of a hand-crafted print fan’s paradise.
Sometimes the problem is skill, time, or knowledge-based; and all are easy to solve.
Searchable text is the foundation of the Internet, with reams of visually bland literature of all genres, which even on a porn site could use a little sprucing up.
Calling itself a “typographic starter kit” designed to encourage the use of great online type, Typeplate (www.typeplate.com) is a toolkit available for raw CSS, Sass, Stylus and LESS, which begins by establishing base font settings for the HTML element in order to standardize the typographic scale in a consistent manner — without any united values for line-heights or other problematic foundations.
“Frameworks make decisions for you about how to organize, structure, and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that,” the publishers of Typeplate stated. “We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns — not how they look.”
The company quotes typography expert Tim Brown, who advocates the use of a modular scale, or a sequence of numbers relating to each other in a meaningful way.
“Using the golden ratio [a proportion of 1:1.618 that is said to be found in everything from the design of ancient Greek architecture to the growth patterns of plants],” Brown explains, “we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.”
According to its publisher, Typeplate allows users to establish clearly distinguishable heading levels using esthetically pleasing, technically correct font-sizes.
“Don’t randomly pick font sizes, choose a type hierarchy that is harmonious and consistent,” a Typeplate spokesperson explains, recommending the calculator available at ModularScale.com for font planning. “Always use a modular scale that calculates those sizes from a ratio ensuring your design and typography can relate in a meaningful way.”
The company offers a wide range of advice and coding examples that detail how Typeplate handles block and pull quotes, code blocks, definition lists, drop and small capitals and print, figures, footnotes, hyphenation, indenting, Unicode ampersands, word-wrap and more. For example, on the subject of color, users are advised to follow the print world by not using the darkest black available for your body text (#000), recommending instead something softer, such as #444 with a slightly darker color for titles such as #222.
It’s advice that will help designers stand apart from the crowd, while providing food for thought and an education in the fundamentals of online typography. Check it and see!
