Dev Depot: Typeplate.com — Next Level Typography

Stephen Yagielowicz

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!

Related:  

More Articles

trends

Fueling the Funnel: Paysites Compete for Traffic

Stephen Yagielowicz ·
trends

Content Is King: Paysites Evolve as Porn Pushes Technology

Stephen Yagielowicz ·
profile

Q&A: Paxum CEO Octav Moise Shares the Wealth

Alejandro Freixes ·
educational

S2S Postbacks: Getting Ad Stats in 1 Place

Juicy Jay ·
opinion

Tips to Master Customer Subscription Retention

Cathy Beardsley ·
opinion

A Primer on How to Integrate Paysite Processing

Jonathan Corona ·
educational

Trademark Ruling a Victory for Adult Products, Services

Marc Randazza ·
profile

Q&A: Rich Girls CEO Cristina Enriches Cam Models

Alejandro Freixes ·
profile

Q&A: LiviaChoice Embraces Grand Camming Destiny

Alejandro Freixes ·
opinion

Refined Protocols Reduce STI Risks for Performers

Eric Paul Leue ·
Show More