Style combination · Pairs well
Danmaku Bullet-Comment Overlay × Emoji Pictographic Language
Kaomoji and emoji already ride inside danmaku lines; use them as small pictographs in the stream rather than as large isolated icons.
Mix them and make something Danmaku Bullet-Comment Overlay Emoji Pictographic Language
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
Danmaku Bullet-Comment Overlay Emoji Pictographic Language
- Type from Danmaku Bullet-Comment Overlay
- Colour from Emoji Pictographic Language
- Form from Emoji Pictographic Language
- Composition from Danmaku Bullet-Comment Overlay
- Surface from Danmaku Bullet-Comment Overlay
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Display · Danmaku Bullet-Comment Overlay
Hello
Zen Kaku Gothic New, standing in for Arial for Latin letters and digits, then MS PGothic (MS Pゴシック) for Japanese, at weight 600: the Windows default of Niconico's comment rendering (Hiragino Kaku Gothic ProN W6 on macOS); in the Flash player certain characters switched the Japanese text around them to Gulim or SimSun, a font change (フォント変化) (all as reproduced by the open-source niconicomments renderer, which cites a comment-art wiki for the font change)
Text · Emoji Pictographic Language
Pictographs typed as characters and set inline in running text. Born on Japanese mobile phones (J-Phone's 90 monochrome signs of 1997, the 176 single-colour signs that Shigetaka Kurita led for NTT DoCoMo's i-mode in 1999, on 12 x 12 pixel grids) and encoded in Unicode in 2009-2010, each emoji is one face, hand, object, food or flag centred on a square em with no ground. Unicode fixes the code point and name; each vendor draws its own full-colour version, flat, glossy or rendered in 3D, so one sign circulates in many visual dialects.
Shippori Mincho; Emoji Pictographic Language used The 12 x 12 dot external-character (gaiji) glyphs in which Japanese carriers first delivered emoji, typed into mobile mail and i-mode pages beside kana and kanji and Apple Color Emoji (2008)
03
The colours
The ground and leading colours come from Emoji Pictographic Language, with a counter-accent from Danmaku Bullet-Comment Overlay. The ink reads on the ground at 4.5:1 or more.
Danmaku Bullet-Comment Overlay Emoji Pictographic Language
-
#ffcc4dground · 36% -
#664500ink · 14% -
#f4a223accent · 18% -
#ff0000accent · 14% -
#dd2e44accent · 10% -
#ffff00accent · 8%
As CSS
:root {
--ground: #ffcc4d;
--ink: #664500;
--accent-1: #f4a223;
--accent-2: #ff0000;
--accent-3: #dd2e44;
--accent-4: #ffff00;
--font-display: "Zen Kaku Gothic New", sans-serif;
--font-text: "Shippori Mincho", serif;
}
Use it with care
Danmaku Bullet-Comment Overlay: Danmaku is moving text that starts on its own, runs longer than five seconds and sits on top of other content, so any design that uses it needs a way to pause, hide or thin it (WCAG 2.2.2, which is why platforms build an off switch) and must keep it clear of faces and captions. Real comments are other people's words over footage someone else owns: write your own lines rather than lifting screenshots, and do not fake an audience's enthusiasm in advertising. A live comment layer can also be used to pile abuse on people, and in mainland China the China Netcasting Services Association's rules for short-video platforms of 9 January 2019 require danmaku to be reviewed before it is shown, so moderate any live use.
Emoji Pictographic Language: Reuse emoji artwork only from the open sets and on their terms (Twemoji graphics CC BY 4.0 with attribution, OpenMoji CC BY-SA 4.0, Noto fonts SIL OFL 1.1, Fluent Emoji MIT); the platform sets are their vendors' own artwork, so do not lift their drawings into a logo or print. Remember too that a code point reaches each reader in that reader's vendor drawing, which may differ in detail, colour or even meaning from the one you chose.
04
The two styles
05
More combinations
With Danmaku Bullet-Comment Overlay
- Kinetic Typography & Variable Type Contrasts · Kinetic type is one designer's choreographed letters; danmaku is hundreds of identical-default lines from strangers. Decide whether motion type should feel authored or crowd-made before borrowing either.
- International Typographic Style Contrasts · Swiss hierarchy gives one message priority; danmaku gives every voice the same size and lets the crowd bury the image. Pin one strict Swiss title in the top lane to stage order against the swarm.
- Internet Ugly & Meme Vernacular Pairs well · Both are crowd vernaculars made to be copied; run numeric memes and outlined white lines over a found clip, but keep danmaku's lanes and timing instead of the image macro's top-and-bottom caption.
- Demoscene Graphics (Cracktros, Demos & Text-Mode Art) Pairs well · Niconico comment art and text-mode art both draw pictures with characters; borrow text-mode techniques for a title card made of comments.
- Japanese Dense Web Design Pairs well · Niconico's comment layer brings the same everything-at-once density to video; pair them for a crowded, participatory Japanese web voice.
- VTuber Avatar and Stream Graphics Pairs well · On Bilibili and Niconico, viewers' bullet comments fly across the stream over the avatar. Leave the top lanes clear of the character's face and title, so the crowd's comments and the avatar share the screen without hiding it.
- Korean Variety-Show Captions (Yeneung Jamak) Contrasts · Choose editorial hierarchy, changing faces and illustrated containers for a producer's comic voice; choose equal-weight, separately rendered lanes and repetition for a viewer chorus. Outlined text over video alone does not make the two interchangeable.
With Emoji Pictographic Language
- Bitmap & Pixel Graphics Pairs well · Kurita's i-mode set was drawn on a 12 x 12 pixel grid; redraw a set on a coarse grid in a few flat colours for an early-keitai look, or set pixel emoji beside a bitmap font.
- Isotype Pictorial Statistics Contrasts · Isotype repeats identical pictograms in rows to count quantities; an emoji stands in for a word or a tone of voice inside a sentence. Use Isotype when the signs must count, emoji when they must talk.
- Kawaii Design Pairs well · The atlas counts emoji among the channels through which kawaii went global (Kurita's set is a kawaii exemplar), and Pen magazine writes that kawaii culture 'gave birth to emojis'; the two share round faces and hearts. But emoji also cover neutral objects, hands, flags and symbols in saturated full colour, and live inside running text. Borrow kawaii's pastel tints and blushing cheeks to soften an emoji set for a children's product.
- Story Manga (Postwar Japanese Comics) Pairs well · Kurita took manga's symbols for feeling (manpu), such as the sweat drop for nerves; lift more of manga's visual shorthand, speed lines, anger marks, sparkles, into a set's faces.
- Flat Design Pairs well · Twemoji and Fluent Flat use flat fills with no gradients or outlines, like flat UI icons; choose a flat set when emoji must sit inside a flat interface, a glossy or 3D set when they must stand out from it.
- Claymorphism & Soft 3D Contrasts · Microsoft's 3D Fluent set comes close to claymorphism's soft rendered forms, and the atlas's claymorphism entry counts the 3D Fluent set among its sources; but claymorphism builds whole interface scenes from inflated pastel shapes, while an emoji stays one sign at text size on a transparent ground. Pair a 3D emoji with clay cards only when it plays the role of an icon, not of a scene.
- VTuber Avatar and Stream Graphics Pairs well · Reduce the character and its motifs to small square pictographs for channel emotes and membership badges, so the community can type the persona into chat.
- Japanese Dense Web Design Pairs well · Emoji came out of Japan's phone web (J-Phone in 1997, i-mode in 1999), which commentators also credit with keeping these pages text-heavy; small pictographs set inline with text links add colour and signal to a dense list without taking space.