Photo of Terence Eden. He has a beard and is smiling.

Use CSS to boost the font size of emoji with no extra markup

· 10 comments · 750 words · Viewed ~854 times.

I want to make emoji bigger than the text that surrounds them. At my age and eyesight, it can be difficult to tell the difference between 😃, 😄, and 😊 when they are as small as the text.

Is there a way to use CSS to increase the font size of specific characters without having to wrap them in an extra <span> or similar?

Yes! Although it is a bit of a hack.

This relies on 3 CSS features: src: local(), unicode-range,and size-adjust. Let me walk you through it.

 CSS@font-face {
    font-family: "emoji";

    src: local('Apple Color Emoji'),
         local('Android Emoji'),
         local('Segoe UI Emoji'),
         local('Noto Color Emoji'),
         local(EmojiSymbols),
         local(Symbola);

    unicode-range: U+231A-231B, U+23E9-23EC, U+23F0, U+23F3, U+25FD-25FE, U+2614-2615, U+2648-2653, U+267F, U+2693, U+26A1, U+26AA-26AB, U+26BD-26BE, U+26C4-26C5, U+26CE, U+26D4, U+26EA, U+26F2-26F3, U+26F5, U+26FA, U+26FD, U+2705, U+270A-270B, U+2728, U+274C, U+274E, U+2753-2755, U+2757, U+2795-2797, U+27B0, U+27BF, U+2B1B-2B1C, U+2B50, U+2B55, U+FE0F, U+1F004, U+1F0CF, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F21A, U+1F22F, U+1F232-1F236, U+1F238-1F23A, U+1F250-1F251, U+1F300-1F320, U+1F32D-1F335, U+1F337-1F393, U+1F3A0-1F3CA, U+1F3CF-1F3D3, U+1F3E0-1F3F0, U+1F3F4, U+1F3F8-1F43E, U+1F440, U+1F442-1F4FC, U+1F4FF-1F53D, U+1F54B-1F567, U+1F57A, U+1F595-1F596, U+1F5A4, U+1F5FB-1F64F, U+1F680-1F6CC, U+1F6D0-1F6D2, U+1F6D5-1F6D7, U+1F6DC-1F6DF, U+1F6EB-1F6EC, U+1F6F4-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1FA7C, U+1FA80-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8;

    size-adjust: 300%;
}

body {
    font-family: "emoji", sans-serif;
}

Here's how it works.

@font-face this tells the browser that we're defining a new font which will be referenced later.

font-family this is the name we're going to be using as a reference.

src: local('Apple Color Emoji') ... CSS can reference local fonts. We don't know what device this page is being viewed on, so we've included a number of popular fallback fonts which should work with all major browsers. You can also reference a webfont if you want - although Emoji fonts tend to have a large filesize. I've adapted this from Marc Fornós' CSS and added a few more common default emoji fonts.

unicode-range this tells the browser to use this font only for the specific codepoints mentioned. This is where the magic happens.

Emoji codepoints are complicated - especially when it comes to combining characters. You can see a full list of every sequence in Unicode 15.1. There are currently 3,782 different emoji.

There was some talk of using named ranges but that doesn't seem to have gone anywhere. So, instead, I've extracted all the Emoji codepoints and manually grouped them. It's a pretty long sequence, and I'm sure I've made a few mistakes.

size-adjust this is used to increase or decrease the apparent size of a font.

Finally, the body { font-family: "emoji", sans-serif; } tells the browser to use the Emoji font (remember, this will only work on the specified Unicode range) and then fall back to the defaults sans-serif font. Obviously, you can specify whatever fonts you like.

Have a play with it

This is a nifty little hack if you want to make Emoji (or any other text) bigger than its surroundings.

I am indebted to Šime Vidas who demonstrated this trick to me.

Share this post on…

10 thoughts on “Use CSS to boost the font size of emoji with no extra markup”

  6. said on scholar.social:

    @Edent as you said in the blog, it's easy to miss stuff in such a long sequence 😁 If you add U+2764 for the heart and U+2620 for the skull'n'bones everything except the © gets resized*. I suspect every character in the sequence needs to be listed for it to work, but listing regular characters you want to emojify with U+FE0F kinda defeats the purpose of the range I think. Maybe browser developers can be convinced that if you list the combining character, all combinations should count?

    Reply | Reply to original comment on scholar.social

  10. said on blog.codepen.io:

    Jake thinks developers should embrace creative coding again, which, ya know, it’s hard to disagree with from my desk at what often feels like creative coding headquarters. Why tho? From Jake’s perspective it’s about exposure. While many designers and developers have been working within familiar constraints, browsers have undergone a quiet revolution. The web now […]

    Reply | Reply to original comment on blog.codepen.io

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">