On April 25, 2024, I learned...

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

Getting straight to the code:

@font-face {
    font-family: "emoji";
    src: local('Apple Color Emoji'),
         local('Android Emoji'),
         local('Segoe UI Emoji'),
         local('Noto Color Emoji'),
    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;

It looks a little beastly but I love clever tricks like this. Here, Terrence defines a web font with an array of font files that operating systems use for local emoji support. It’s not totally unlike leveraging a system font, only we have to do more work on the @font-face front.

The entire purpose is gaining a way to resize emoji characters — by way of size-adjust — without having to resort to something like a <span> in the markup as a styling hook. I wouldn’t say the code is a leaner approach to touching the markup, but if your hell-bent on a total separation of concerns that keeps your HTML clean and uncluttered, then this may just be something to keep in your back pocket. There’s no additional performance cost, right? The font file is already on the device!

Leave a Reply

Markdown supported