Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Typography’.

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

Truly Fluid Typography With vh And vw Units

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.

Fluid Typography

Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques.

Read more...

Design Or Get Undesigned

What would a page look like if it had no designer? This odd question occurred to me in the 1980s, while overseeing the transition from lead-based typesetting to phototypesetting of an Indian newspaper. The Patriot’s distinctive design seemed to emerge, not from a designer, but the tactile interaction between lead and the illiterate villager who assembled the pages.

Design Or Get Undesigned

This article examines how design has changed as materials have evolved, and underlines how the need for deliberate design is greater than it has ever been.

Read more...

Free Font Release: Yrsa And Rasa Available For Download

Editor’s Note: Today we are pleased to feature the new and free font families Yrsa and Rasa by David Březina and Anna Giedryś and their story behind the design process.

Free Font Release of Yrsa & Rasa

Yrsa and Rasa are two open-source type families published by Rosetta with generous financial support from Google. The fonts support over 92 languages in Latin script and 2 languages in Gujarati script. The family currently has 5 weights. They were designed and produced by Anna Giedryś and me and they are now released and ready for download.

Read more...

Quick Tips Tools And Resources For A More Meaningful Web Typography

It’s the small details that make a project shine. Solid typography, well-crafted with attention and care is one of them. A harmonious visual rhythm, typographic subtleties like soft caps, margin outdents or the correct use of hyphens and dashes — there are a lot of things that add up to it.

Modular scale

In practice, however, publishing on the web is supposed to be fast, and the little details are often overlooked, which is a pity, because they are not only pleasing to the eye but also improve the reading experience.

Read more...

Using System UI Fonts In Web Design: A Quick Practical Guide

For perhaps the first time since the original Macintosh, we can get excited about using system UI fonts. They’re an interesting, fresh alternative to web typography — and one that doesn’t require a web-font delivery service or font files stored on your server. How do we use system UI fonts on a website, and what are the caveats?

Using System UI Fonts On Your Website: The Practical Guide

System UI fonts being amazing kind of snuck up on us. Google has been toiling away at Roboto with great success (including regular updates), Apple made a splash with San Francisco, and Mozilla asked renowned type designer Erik Spiekermann to create Fira Sans.

Read more...

Space Yourself

There’s more to spaces than the key you instinctively hit with one of your thumbs between words. Let’s find out what other space characters there are, what their heritage is, and how they can be useful today.

Space Yourself

What you see below are two tweets. In one of them, Paul Irish will be notified of my taunt. In the other one, he’ll be completely oblivious. What’s the difference between the two? Read on!

Read more...

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

↑ Back to top