Posts Tagged ‘Typography’

We are pleased to present below all posts tagged with ‘Typography’.

Typographic Patterns In HTML Email Newsletter Design

Last year I read Jan Constantin’s post “Typographic Design Patterns and Current Practices” and straightaway wanted to do something similar with email. At the time I was studying responsive typography on the web, trying to break down the websites I liked in order to understand what made the typography work so well, then attempting to apply those findings to email design.

Typographic Patterns In HTML Newsletter Email Design

After seeing Constantin’s work, I also wanted to explore how other email designers were handling responsive typography. So, I amassed 50 emails across various industries that I think do a good job with typography to see if any patterns emerged. You can skip straight to the Google Doc showing the raw data and results.

Read more...

Responsive Typography With Sass Maps

Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.

Responsive Typography With Sass Maps

Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.

Read more...

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, I feel like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now that thousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? I believe so.

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

Read more...

An Interview With Type Designer Akira Kobayashi “Letters Do Not Stand By Themselves”

Customers and clients cannot physically touch the products that online designers create, nor can they smell, hear or taste them. One of the important factors in a customer’s decision of whether to use a product is usually the brand’s visual presence, which can help a product stand out from the rest of what the market has to offer. Upon taking a closer look, it doesn't take long to see that good typography is involved.

Like all type designers, Akira Kobayashi believes that good typography reinforces the meaning of the text. He has a background in art and calligraphy and has been a freelance type designer for 18 years. Originally from Japan, Akira is a frequent speaker at type conferences and workshops in Europe, the Americas and Asia, and he has served as a judge in prestigious international type design competitions.

Read more...

The Good, The Bad And The Great Examples Of Web Typography

Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting services such as Typekit, as well an ever-improving collection of free fonts available, there has never been a better time to be a typography-obsessed web designer.

The Good, The Bad and The Great Examples of Web Typography

One could easily argue that nothing affects a design more than typography. And good typography starts with choosing an appropriate typeface. But can having too much choice be a bad thing? With more choices, we have more opportunities to make bad decisions.

Read more...

Size Matters: Balancing Line Length And Font Size In Responsive Web Design

As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.

Size Matters: Balancing Line Length And Font Size In Responsive Web Design


The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.

Read more...

Hands On The Sigmund Freud Typeface: Making A Font For Your Shrink

Handwritten text shows a personal side of its author, a side that is not easy to put into words and that contrasts with the standardized look of digital communication. This contrast and “aura” is perhaps what makes handwriting fonts so popular. As a typographer, I love handwriting, and in this article I’d like to share a hands-on overview of my creation process of a handwriting font.

Hands On With The Sigmund Freud Typeface: Making A Font For Your Shrink

Over the past four years, I’ve completed three typefaces inspired by handwriting. I started with the digitization of Albert Einstein’s handwriting and continued with Conspired Lovers, a font based on my own love-letter writing. In 2013, I ran a Kickstarter campaign to fund the creation of a font based on Sigmund Freud’s handwriting. The public interest in the project was overwhelming, and the Sigmund Freud typeface became the first typeface to be reviewed in the Wall Street Journal.

Read more...

Unicode For A Multi-Device World

A while ago, I was working on a website that required a number of icons. “No problem,” I thought. “I know how to handle this. I’ll use an @font-face icon set for high-resolution screens. It’ll be a single file, to reduce HTTP requests, and I’ll include just the icons that I need, to reduce file size.”

Unicode For A Multi-Device World

“I’ll even use a Unicode character as the base of the icon, so that if @font-face isn’t supported, then the user will still see something like the intended icon.” I felt pretty pleased with myself.

Read more...

Taking A Closer Look At Arabic Calligraphy

Arabic calligraphy was originally a tool for communication, but with time, it began to be used in architecture, decoration and coin design. Its evolution into these major roles was a reflection of the early Muslims’ need to avoid, as their beliefs required, figures and pictorials that were used as idols before Islam was established in the Arabian Peninsula.

Taking A Closer Look At Arabic Calligraphy

While the Arabic tribes preferred to memorize texts and poetry, the first Muslims tried to document their holy book (Qur’an Kareem) using the scripts that we’ll look at in this article. In order to understand how these scripts developed into the beautiful and complex shapes we know today, we have to understand the history of Arabic calligraphy.

Read more...

Taking A Second Look At Free Fonts

Once thought of as amateurish by professional designers, free and open-source fonts have gone through something of a renaissance in just the last few years. The quality of available free fonts has increased dramatically. To be frank, free fonts don't have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?

Taking A Second Look At Free Fonts

Early in my design career, around 2003, I wanted to purchase the font DIN for a project at work. My manager promptly dismissed the idea of paying for a font and instead handed me a CD that had “5,000 free fonts” on it, saying “This CD has every font a designer could possibly need. No need to waste money buying fonts!”

Read more...

↑ Back to top