# Typography

There are a few typography-related edge cases to consider when you venture past ASCII.

## General rules

Code.Movie works on the assumption that you use a monospaced font for code. It creates a grid based on the width of the `0` character in your main font (set via `font-family` on the container element) and places every character and decoration on this grid. Anything but fixed-width fonts will lead to terrible-looking results.

## CJK full-width characters

CJK full-width characters such as 한 [occupy two grid columns.](https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms)

## Emoji

The first thing to note about emoji is that whether or not a character is rendered as an emoji (and how it gets rendered) depends entirely on the font being used. If you intend to use emoji I _strongly_ recommend that you explicitly pick and use an emoji font like [Noto Color Emoji](https://fonts.google.com/noto/specimen/Noto+Color+Emoji) - otherwise you are at the mercy of whatever the user has installed on their machine.

[Emoji, like CJK full-width characters, are allocated precisely two columns of space.](http://www.unicode.org/reports/tr11/#Recommendations) Whether this will look good depends on the combination of fonts being used. I recommend that you use the [`size-adjust` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust) in your `@font-face` rule to scale emoji to work well with your main font:

```css
@font-face {
  font-family: "Noto Color Emoji";
  src: url("fonts/NotoColorEmoji-Regular.ttf");
  size-adjust: 80%; /* Works well together with Ubuntu Mono */
}
```
