In this quick article, we'll learn essential CSS techniques, scaling strategies, and design principles that preserve the crisp, totally-cool aesthetic of pixel graphics across high-resolution displays and responsive web environments.

When it comes to having a retro look, nothing beats the classic 8-bit pixel art style that was (and sometimes still is) so common in video games, movie UIs, websites, and more:

Now, why are we talking about this? It is because, out of the box, pixel art and modern web technologies don’t mix well together. The reason is that everything pixel art stands for is an affront to how images and text are meant to be viewed. The conventional wisdom is that visuals should appear smooth with a nice glossy anti-aliased finish. They should never look pixelated. They should certainly not appear with their jagged edges and strict adherence to set sizes and aspect ratios. That’s just heresy! 😈

All of this doesn’t mean that we can’t make pixel art look good on our modern web pages. We just have to be very specific in overriding and setting the right values in HTML and CSS, and this article will cover all of that and more.

Onwards!

Pixelated Images FTW!

For many good reasons, such as legibility, all images on the web are anti-aliased by default. This ensures that images retain a smooth polished look independent of the image dimensions or the screen’s DPI. This is great for 99.99% of all situations where this is the right behavior.

The one time we don’t want this behavior is with pixel art, where we want our images to retain their sharp look without any anti-aliasing and related smoothening happening:

What we need to do is override this default behavior, and this is where CSS comes in. The image-rendering property was added to give us control over how images are rendered on screen. One of the values we could specify is pixelated:

.pixelated_image {
    image-rendering: pixelated;
}

When this style declaration is used, any impacted images will retain their pixelated look across all situations:

For added crispness, there are a few additional constraints we can set. We can ensure all lines in our visuals align to integer positions on the pixel grid. Also, we can ensure that the final image sizes are integer values running in multiples of 8:

Most design tools can help you ensure both of these constraints are met, but you may have to toggle some of the settings to ensure gridlines are visible and that all sizes and positions are rounded to the nearest integer value.

Using Pixel Fonts

For a pixel art-inspired look, pixelated visuals is one thing. The other thing is pixelated text. This is where pixel fonts come in, and there are some great ones that we can use. Some of my favorites include Departure Mono (see my interview with the creator, Helena Zhang), the pixel fonts on Google Fonts, and the BitFontMaker gallery.

If you have been fiddling with pixel art for a very long time, you probably even have a drive full of pixel fonts of your own that you’ve been collecting and carrying around for a few decades:

Independent of how you find your pixel font, one detail to keep in mind is that none of the pixel fonts that we want to use will be available by default on people's devices. Simply referencing them by name in our CSS won't be enough. We will need to pair that up by embedding them in our web pages so that all of our visitors can see them.

Loading and Using the Pixel Font

Depending on where you get your pixel fonts from, you may already be given some code to copy/paste to get an embeddable font working. For example, Google Fonts often hosts the font files as well as provides you with the snippets of code needed to use them on your site or app:

In other cases, you will have to roll your own solution. This usually involves the following steps:

1. Hosting the font file
2. Loading the font file
3. Specifying the font properties in CSS
4. Optimizing how the font loads

The Using web fonts article does a good job explaining what you’ll need to do. For quick reference, here is the markup and styling used on this site for displaying the pixel fonts that you can modify for your own needs.

First, we have the content in the head region of our HTML documents to make the first loading of a font file really fast:

<link rel="preload" href="/fonts/born2bsportyv2-webfont.woff2" type="font/woff2" as="font" crossorigin="anonymous"/>

Next, we define the @font-face rule in our CSS that allows us to reference our custom font:

@font-face {
    font-family: "kirupaPixel";
    src: url('/fonts/born2bsportyv2-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

The font-family name we provide is what we can use across the other parts of our CSS to use this font, and this name can be anything we specify as part of declaring the @font-face rule.

Lastly, it is time to use our custom font. Below is an example of using this font on all the heading elements:

h1, h2, h3, h4, h5 {
    color: var(--headerText);
    font-weight: bold;
    line-height: 1;
    font-family: 'kirupapixel';
    color: var(--headerText);
    font-weight: 100;
    -webkit-font-smoothing: none;
    text-wrap: balance;
}

Notice that we specify the same font-family name as what we declared in the @font-face rule. This name connects the font we wish to use with the font we loaded onto the user's browser.

Setting the Font Size

Pixel fonts work best at certain sizes. Be sure to read the pixel font’s documentation on what sizes the font is optimized for. For example, Departure Mono works best at sizes that are multiples of 11px:

If there is no documentation, it is safe to assume that the font size works in multiples of 8px, so you may have to experiment a bit to make sure the font appears perfectly. This is doubly true if you size your fonts using a scale other than pixels, such as em or pt.

Disabling Font Smoothing / Anti-aliasing

Lastly, just like with images, the default behavior on the web is for text to be anti-aliased and smooth-looking. We don’t want that behavior for our pixel fonts, and we can override it by setting the CSS -webkit-font-smoothing (and eventually the font-smooth) property to none on any text elements where we will be using the pixel font in:

.pixel-font {
   -webkit-font-smoothing: none;
   -moz-osx-font-smoothing: grayscale;
   font-smooth: none;
 }

This ensures that anti-aliasing is turned off and our fonts retain their pixelated look. For Firefox, we use a -moz-osx-font-smoothing property with a value of grayscale that doesn’t fully disable anti-aliasing, but it does provide a better look than the default rendering. When the font-smooth property becomes broadly available in the future, then we don’t have to worry about these vendor specific quirks.

Conclusion

We've covered quite a bit of ground here. If we had to summarize the main takeaway, this picture is it:

To get the perfect pixelated look, isn't about fighting web technologies—it's about working with them strategically. A few well-placed CSS properties, the right font loaded properly, and a dash of creativity can transform your web page into something that the original Atari game designers would be proud of.

Before we wrap up, one more tip. Always test your pixel art designs across a few different browsers and devices spanning a handful of screen resolutions and DPIs. What looks pixelated on your screen might need a few tweaks to retain that look somewhere else.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!