Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our 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’.

Left-Handed Brush Lettering: How To Get Started

Lettering and calligraphy are quickly becoming desired skills in a designer's toolbox. Designers such as Marian Bantjes, Jessica Hische, Sean Wes and Martina Flor, just to name a few, have become not only an inspiration to the rest of us, but also a standard.

Left-Handed Brush Lettering: How To Get Started

Their work is not only client-based; they have become their own brand by providing products to their followers as well. Other designers have followed suit, and now it would seem that lettering and calligraphy are everywhere.

Read more...

Fluid Responsive Typography With CSS Poly Fluid Sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers' idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

Fluid Responsive Typography With CSS Poly Fluid Sizing

In this article, we are going to take it to another level. We are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.

Read more...

Brush Lettering: It Only Gets Better After Practice (Part 2)

In the first part of this article, we discussed the resurgence of lettering, we defined the differences between lettering, calligraphy, and typeface design, and we also discussed pens, papers, and other supplies. In this second part, I will share with you how I got started, my journey, and will also share specific tips on how to start. Let's get started.

Brush Lettering: It Only Gets Better After Practice (Part 2)

When I decided to practice lettering daily, I was a tad overwhelmed with the options: Crayola (there is even a term for it, crayligraphy), pointed pen, brushes, illustrative lettering, lettering, calligraphy (Copperplate and Spencerian), modern calligraphy, and so on. I did not know what to do or where to start.

Read more...

Brush Lettering: It Only Gets Better After Practice (Part 1)

The resurgence of hand lettering, calligraphy, signage, penmanship, or really anything that is graphic and handmade is increasingly difficult to ignore. Along with letters drawn in any of the categories just mentioned, drawing, sketching, sketchnoting, and any hybrid style (combinations of the above) have also been gaining attention among designers, illustrators, and other professionals.

Brush Lettering: It Only Gets Better After Practice (Part 1)

A quick look around social media or simply googling lettering will quickly show impressive and notable work. Last year I deliberately started practicing brush lettering, meaning I had a dedicated time to practice exercises, write out words and practice letterforms.

Read more...

The Art Of Hand Lettering

Hand lettering has taken the world by storm. It has become the beautiful connection — a juxtaposition — between design and words. The letter forms in the typography have been broken down into their shapes, flourishes, and textures.

The Art Of Hand Lettering

Hand lettering speaks volumes. This is an art form which allows us to see the space between the letters, and the style of the lettering as a piece of art that can deeply evoke emotions and bring meaning — nostalgia, happiness, joy, and love.

Read more...

Responsive Font Size And 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...

The Evolution Of Media – 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 UI System 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...

↑ Back to top