Skip to main content
CSS is fun and cool and I like it.
Article

Modifying Specific Letters with CSS and JavaScript

Changing specific characters can be a challenge in CSS. Often, we’re forced to implement our desired changes one-by-one in HTML, perhaps using the span element. But, in a few specific cases, a CSS-focused solution may still be possible. In this article, we’ll start by looking at some CSS-first approaches to changing characters, before considering a scenario where we need to turn to JavaScript.… Read article “Modifying Specific Letters with CSS and JavaScript”

Article

Considerations When Choosing Fonts for a Multilingual Website

As a front-end developer working for clients all over the world, I’ve always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the way and am going to share a few tips in this post.

Let’s work in Arabic and English, not just because Arabic is my native language, but because it’s a classic example of RTL in use.

Adding RTL support to a site

Before this though, we’ll want to add support for an RTL language on our site. There … Read article “Considerations When Choosing Fonts for a Multilingual Website”

Article

Typography for Developers

This is intended as a practical guide for developers to learn web typography. We’ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We’ll go over the principles of typography and the CSS properties that control them, as well as handy tips to get good results, quickly.
Article

Don’t just copy the @font-face out of Google Fonts URLs

I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean…… Read article “Don’t just copy the @font-face out of Google Fonts URLs”

Article

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts!

  1. The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so.
  2. Preload and font-display are landing in Safari and Firefox.
  3. Variable fonts are shipping everywhere.

Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be.… Read article “Three Techniques for Performant Custom Font Usage”

Article

Understanding Web Fonts and Getting the Most Out of Them

Using custom fonts is getting increasingly easier. We’ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.

Link

How To Rename a Font in CSS

Link

Combining Fonts

Article

You Kinda Can Use Custom Fonts in HTML Emails

And you use them pretty much just like you’d use custom fonts on a website. Jaina Mistry had the scoop on this last year over on the Litmus blog:

While web fonts don’t have universal support, here are the email clients where they are supported:

  • AOL Mail
  • Native Android mail app (not Gmail app)
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com app
Read article “You Kinda Can Use Custom Fonts in HTML Emails”
Snippet

System Font Stack

Defaulting to the system font of a particular operating system can boost performance because the browser doesn’t have to download any font files, it’s using one it already had. That’s true of any “web safe” font, though. The beauty of “system” fonts is that it matches what the current OS uses, so it can be a comfortable look.

What are those system fonts? At the time of this writing, it breaks down as follows:… Read article “System Font Stack”