Articles

Typi—case study

Web typography is complicated. We, as designers and developers, need to design/build for a fluid canvas that change depending on what a user uses to interact with our sites. For many years, we have looked into web typography’s predecessor – print typography – to find hints on what good web typography should be.

Unfortunately, many typography enthusiasts tried to impose print typography principles that were impractical for the web era – they required too much code, code that’s unmaintainable for a reasonably-sized website. Some don’t think enough, believing it’s alright to imprint whatever traditions we have in print typography directly into web typography. Some even go to a point to claim that web typography is broken.

As a beginner to typography then, I found tonnes of information about print theories and how people claim it should be applied to the web, but I wasn’t able to find anyone who applies these theories in a way that’s easy to code, and easy to change – which my definition of maintainable.

So, I set out to research typography. Typi is the result from a few months of research on both typography principles and the integration of relevant principles into code.

In this case study, you’ll hear about why Typi is designed the way it is and how I created it.

Designing the Typi API

The design process began by understanding print typography principles, figuring out which ones are important for web typography and why they matter. This meant I had to find an answer for the big question – what is good typography?

Good typography is typography that lets one read without distractions. Good typography, at the basic level, is invisible to the user as they read through the text on a page. Great typography is able to depict the emotions and captivate the reader while they read.

To create great typography, you need to know how typefaces evoke different emotions. It was something way out of my reach when I began the research; so, I focused my energies on creating good typography instead. This research led me to discover that typesetting – the process to setting font-size, leading and measure – is the most important part of typography.

Typi focuses directly on typesetting. I believe the key to maintainable typography is to allow designers and developers to change the font-size and line-height (what we use to determine leading on the web) of any text element easily. The measure (width of text) can be constrained with layouts, so that’s not too much of a problem.

The Typi API

Typi relies on Sass – a CSS preprocessor language that’s incredibly prolific at the time I wrote the library. It uses Sass maps, which contains key-value pairs. Each key gives meaning to the value it holds, and it allows users to easily understand what’s going on.

At the bare minimum, Typi looks like this:

$typi: (
base: (
null: (16px, 1.4),
)
);

The key, base, indicates that you’re creating a sass map for the base font-size and line-height values you’d use for your body text.

The key, null, tells Typi to create the font-size and line-height values without media queries (which is often needed for responsive websites).

The first number, 16px, is the font-size to create at the null breakpoint.

The second number, 1.4, is the line-height value to use at the null breakpoint.

Accessible typography

Good typography is also accessible typography – readers should be able to read without squinting their eyes.

Since we use multiple devices to view sites, and we usually place larger devices further away from our eyes, we need to increase the base font-size for larger devices. This process is often done with media queries, like this:

html {
font-size: 16px;
line-height: 1.4;
}

@media screen and (min-width: 600px) { html { font-size: 18px; } }

@media screen and (min-width: 800px) { html { font-size: 19px; line-height: 1.45; } }

@media screen and (min-width: 1200px) { html { font-size: 21px; } }

As you can see, the process is a downright chore, which is why many developers hate media queries when working with typography.

With Typi, the process can be completed with a few key-value pairs, like the ones you’ll see below. If you see only a single font-size value, that means Typi should not write a line-height value, but instead allow CSS to cascade downwards.

// Typi map holds font configurations
$typi: (
base: (
null: (16px, 1.4)
medium: (18px),
large: (19px, 1.45),
huge: (21px)
)
);

The keys (medium, large and huge) are media query breakpoints that must be predetermined with another Sass map – the $breakpoints map:

// Creating breakpoints for media queries
$breakpoints: (
medium: 600px,
large: 800px,
huge: 1200px
);

Now, switching font-sizes and line-heights across breakpoints become easy – you simply change a value in your $typi map.

Another point about accessible typefaces is this – as developers, we want to accommodate users with not-so-good eyesight. These users may opt to increase the browser font-size from the default 16px to 20px. To accommadate these users, we have to use relative units (like em and rem) whenever we write font-size values for typographic elements. Typi does this conversion for you automatically.

More information about using Typi can be found in its Github repo.

Contrast and Rhythm

Music is beautiful. It flows. We enjoy it. The reason we enjoy music is because it follows a rhythm. Likewise, good typography allows a reader to flow through the text when it follows a rhythm. On the web, we often call this rhythm vertical rhythm.

Vertical rhythm is the downwards motion of text. It’s the amount of space between each line, between each paragraph, and between any two elements on the page. This rhythm needs to be consistent enough to induce a flow. For that, the greatest repeating number – the line height of the body text – creates the rhythm that the rest of the page flows with. To understand more about vertical rhythm, you might want to read “what is vertical rhythm”.

Typi provides a rhythm function that allows you to calculate and use the line height value (the most commonly repeated value) easily. Here’s a quick example:

$typi: (
base: (
null: (16px, 1.4)
)
);

// The line-height value is 16px * 1.4 = 22.4.x .selector { // This means 4 * 22.4px, but in written in rem for accessibility and maintainability purposes margin-top: vr(4); }

For more information about Typi’s rhythm function, be sure to check out the Typi’s Github repo.

Now, music would be boring if you listen to a note with same beat, pitch, and texture on repeat. It’ll be similar to listening to a monk knock a wooden fish without the chanting the sutras – it’s boring.

Music is beautiful because there’s contrast. The contrast – the difference between high and the lows – catch our attention and allows us to differentiate one part of the music from another. In typography, we also need contrast, and we often create contrast between headings and text font-sizes through a technique called Modular Scale. For more information, you might want to read “More Meaningful Typography” by Tim Brown.

An example of a Modular Scale
An example of a Modular Scale

To make it easy to code, Typi lets you to use Modular Scale Sass library directly in the $typi map. You simply have to substitute the font-size with a modular scale function, like this:

$typi: (
base: (
null: (16px, 1.4)
),
h1: (
null: ms(3)
)
);

A course on typography

What else goes into good typography?

Other than the things I mentioned in this case study, nothing much. What’s important is to learn to typeset, internalize the process, understand why typesetting is important, and how the principles of design (repetition, contrast, alignment and proximity) play in typography. Once you understand these, web typography becomes a fun playground for you instead of a stress-filled zone. (Oh, of course, you need to be able to translate these principles to the web!).

For me, learning about web typography and creating scalable typography was a lot of fun, but also a lot of frustration. I summarized my findings and learnings (both design and code) into a course – Mastering Responsive Typography – that would help you learn everything I know today.

If you’re interested, you can get the first four lessons of Mastering Responsive Typography for free through the link below. I invite you to check it out.

Get the first four lessons of Mastering Responsive Typography for free.

Wrapping up

Creating Typi was a tough process. It taught me how to research about a touchy topic that people have different opinions on. It taught me to understand best practices from the founding principles so I know how to use them properly. It also taught me how to design a clean API that focuses on the principles while integrating existing approaches in the market.

Creating the library itself also taught me the ins-and-outs of writing a library in Sass. The process and functions used are totally different from how you might do it with JavaScript. I’m glad I made Typi, and I’m glad to hear how many people are using it to help with their development efforts.

Once again, if you’re curious about Typi, you can check out the Github repo. Admittedly, I should also have created a microsite to explain the benefits of Typi, but I’ve since moved past that and I’m focusing on something else now. I hope you find Typi useful! (And please let me know if you ever want to contribute to Typi!).

If you’re interested to hire me to help you design and simplify an existing workflow within your company (like creating Typi, using Webpack, or any other possible variations), I’d love to chat! The idea is you feel that something can be done better, and should be done better. If you feel this way, please feel free to tell me more about your project and how I can help you over at the application page.

(Note: I’m currently accepting project requests for April – Jun, 2018. I can only take up to 2 clients during this period, so please apply now if you’re interested to work together with me!)

JavaScript Scope and Closures

Scopes and closures are important in JavaScript. But, they were confusing for me when I first started. Here’s an explanation of scopes and closures to help you understand what they are.

Should you use this in JavaScript?

Many people feel that this is incredibly confusing. Because it’s so confusing, they argue that this makes JavaScript complicated, and you should avoid them like a plague.

But does this really make your JavaScript complicated? Should you avoid using this?

How to think like a programmer

“I don’t get JavaScript. I can’t make components from scratch. My mind goes blank when I stare at a blank JavaScript file. I guess I can’t do it because I don’t know how to think like a programmer”.

Sounds familiar? You’re not alone, my friend. Many people who tried to pick up JavaScript as their first programming language faced the same problem.

Heck, even developers who are already coding in another language face the same issue with JavaScript too. Instead of “I can’t think like a programmer”, they say “I can’t think in JavaScript”.

But no more. Let today be the day where you learn to think like a programmer.

Remembering what you learned

Have you had instances where you wanted learn something, but it completely eludes you?

I’ve had some of them. One instance was when I tried to learn JavaScript. Another was when I wanted to learn Node and Express.

In each of these cases, no matter how hard I tried, I can’t seem to make the knowledge click on a deeper level. I read books, articles, and tutorials, but the knowledge I gained simply vanishes into thin air the very next moment.

Should I give up? I would ask myself occasionally. Am I just stupid?

But I never gave up on learning JavaScript, nor Node and Express. After spending god knows how many hours trying, I could magically remember the knowledge.

For a long time, I wondered why this pattern kept going on. I finally understand now.

This in JavaScript

Are you confused by the this keyword in JavaScript? It confuses everyone in the beginning, so don’t worry about it. You’re not alone.

But that doesn’t mean you can go on without understanding this forever. It is used so much in JavaScript and in tutorials everywhere that you need to grasp what this is sooner or later. Once you understand this, you’ll realize that it’s much simpler than you think it is.

By the end of this article, you would have demystified this for yourself. You’ll know what it is, what it does and how to use it.

Promises in JavaScript

Have you encountered promises in JavaScript and wondered what they are? Why are they called promises? Are they related to a promise you make to another person in any way?

Furthermore, why do you use promises? What benefits do they have over traditional callbacks for asynchronous JavaScript operations?

In this article, you’re going to learn all about JavaScript promises. You’ll understand what they are, how to use them and why they’re preferred over callbacks.

Callbacks in JavaScript

Have you come across the term “callback” but don’t know what it means? Don’t worry, you’re not alone. Many newcomers to JavaScript find callbacks hard to understand too.

Although callbacks can be confusing, you still need to learn them thoroughly as they form a critical concept in JavaScript. You can’t get very far without knowing callbacks 🙁.

That’s what today’s article is for! You’ll learn what callbacks are, why they’re important, and how to use them. 😄

How to set up your development environment to learn JavaScript

Have you encountered any of these three problems when learning JavaScript?

You get confused with the JavaScript syntax. It’s unfamiliar to you. There are so many variations you don’t even know what is what.

You keep getting errors whenever you write JavaScript because of stupid typo mistakes.

You cannot remember what methods are available. You need to search google even for something as simple as addEventListener.

You’d love today’s article if you had these problems. I’ll show you how to tackle them all in one swoop by setting up your development environment.

Hold on while i sign you up…

🤗
Woohoo! You’re in!
Now, hold on while I redirect you.