Depicto (3 fonts)

Depicto is a pixelated typeface with asymmetrical serifs intended to depict emojis in coarse mosaic shapes and represented in two styles that perfectly complement each other – Mono (casual font) and Mosaic (color font). The main font feature is a large set of pictograms, which are activated using the Stylistic Set 1 and typed directly in text with keywords like :smile: :happy: :sad: :pear: :rose: :horse: :bike: :house: and so on. See the complete list of 600+ pictograms in the Specimen PDF.

Concept

As a child, I loved playing with plastic construction bricks. And of course, I loved 8-bit video games. All of this has been reinterpreted in the Depicto typeface. Out of respect for 8-bit aesthetics, almost all the dimensions are multiples of 8 – letter elements have a width of 80 points and a length of 80, 160, 240, 400, and so on, as well as the spacing between the characters and the vertical metrics.

Although inspired by pixelation, the font plays with its own geometry. Using simple squared shapes, it balances between pixel-perfect structure and diagonal mosaic. The letter construction is based on rectangles – horizontal, vertical, and rotated by 45 degrees. It is important to note that letters consist of separate non-intersecting elements, each of which, in the Depicto Mosaic font style, is painted in different colors.

The font also features upper-left and lower-right horizontal serif strokes. Such asymmetrical serifs are typical of Ukrainian typography since the works of Heorhiy Narbut. Their digitization and pixelation call for a new perspective on artistic constants.

Tech details

Specimen: https://michaelrafailyk.com/typeface/specimen/Depicto.pdf
Styles: Mono, Mosaic COLOR (color font), Mosaic SVG (color font)
Scripts: Extended Latin, European & Asian Cyrillic, Greek, Hebrew, Arabic, Georgian.
Languages: 500+. List of supported languages: https://michaelrafailyk.com/depicto
Kerning: 906 class-to-class pairs
Hinting: Manual PostScript
Format: OTF – OpenType with PostScript outlines

Features

Color fonts: Depicto Mosaic COLOR (for web browsers and Windows applications) and Depicto Mosaic SVG (for Adobe applications) are dedicated to my love for plastic construction bricks. Every letter element is painted in a random but non-repeating color from a palette of 17 predefined colors. This palette is selected in such a way that it looks sufficiently contrasting on both white and black backgrounds. However, you can change the palette in Photoshop by using Color Overlay in Blending Options (see examples in the promo images) or in Illustrator by converting the text to outlines and then using Recolor Artwork.

Color fonts are supported since: Photoshop CC 2017, Illustrator CC 2018, InDesign CC 2019, QuarkXPress 2018, Pixelmator (macOS 10.14), Sketch (macOS 10.14), Affinity Designer (macOS 10.14), Paint.NET (Windows 10), Microsoft Word (Windows 10), Windows 10, macOS 10.13 High Sierra, Safari 11 (macOS 10.13, iOS 12), Chrome 70, Firefox 26, Opera 58, Edge 12 (Windows 10), IE 9 (Windows 8).

Applications that do not support color fonts yet: Figma, Adobe XD, Premiere Pro, After Effects. In these applications, the Depicto Mosaic font style will appear in a fallback black color.

Stylistic Set 1 “Pictograms”: The main font feature is a large set of 600+ pictograms and emoticons. See the complete list of pictograms and their keywords in the Specimen PDF. It does not cover all possible Unicode pictograms, but the set may be expanded in future updates.

There are three ways to use them.
1. Manually selecting pictograms from the Glyphs panel in a graphic editor.
2. Copying pictograms from the Specimen PDF and pasting them into text.
3. Activating Stylistic Set 1 and typing pictogram keywords like :smile: :happy: :rofl: :sad: :facepalm: :pear: :rose: :horse: :bike: :house: :laptop: and so on. For example: I'm so :happy: to see these beautiful :tulips: and :roses: in your :garden:, good work :clap:. GitHub, Slack, Basecamp, and others use such a markdown approach at the application level, but Depicto processes this directly at the font level, making it available in text/graphic editors and web browsers.

How to apply Stylistic Set 1.

InDesign (2017+): Character panel > OpenType button > Stylistic Sets.
Illustrator (2017+): OpenType panel > Stylistic Sets icon.
Photoshop (2020+): Properties panel > Type Options > Stylistic Sets icon.
CSS: font-feature-settings: "ss01" 1;

Stylistic Set 2 “Change Emoji Skin Tone”: This allows changing the skin tone of emoticons (smileys). In Depicto Mosaic, classic yellow smileys become brown. In Depicto Mono, the result depends on the background color – for a white background, white faces are replaced by black ones, and for a black background, black faces are replaced by white ones. Remember: when switching the background color from light to dark or vice versa using Depicto Mono, the faces appear inverted. You can use this Stylistic Set to reinvert them if needed.

Stylistic Set 3 “Arrows”: Left <- Right ->; Up <| Down |> Left Right <-> Up Down <|> North West <\ North East /> South East \> South West

Stylistic Set 4 “Circled Numbers”: Numbers are replaced with numbers in a circle.

Stylistic Set 5 “Circled Black Numbers”: Numbers are replaced with numbers in a black circle.

Small Capitals: Lowercase letters are replaced with Small Caps forms.

Capitals to Small Capitals: Uppercase letters, all figures, and some punctuation are replaced with Small Caps forms.

Figures (numbers): Lining, Oldstyle, Proportional, Tabular, Circled, Circled Black, Superscript, Subscript, Numerator, Denominator.

Fractions: ¼½¾⅐⅑⅒⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟ (precomposed). Any other fractions (even those typed through a slash) will also be displayed correctly, with automatic replacement to Numerator + fraction + Denominator.

Slashed Zero: Lining and Oldstyle 0 figures are replaced with a slashed/dotted zero.

Ordinals: adehlnorst

Case Sensitive Forms: ()[]{}‹›«»-–—•·#%‰@ and arrows are centered on capitals. Oldstyle figures (if presented) are replaced with Lining figures.

Case conversion for monotonic Greek: ΆΈΉΊΌΎΏ. Greek uppercase accented characters lose their tonos accent and retain only dieresis in All Caps mode. Turned on by default. If you need tonos accents in All Caps, turn off the Contextual Alternates (calt) feature.

Standard Ligatures: ff

Localized Forms: Characters substituted by their adapted alternate form for Azeri, Bulgarian, Catalan, Dutch, German, Kazakh, Macedonian, Moldavian, Polish, Romanian, Serbian, Tatar, Turkish languages.

Glyph Composition/Decomposition: Set of diacritics (600+ characters) precomposed from base characters and combined diacritical marks.

Mark Positioning: Diacritical marks positioned for base characters.

The typeface was designed by Michael Rafailyk in 2023 and updated with expanded language support in 2024.