Fonts
There are two classifications of fonts in TCM - named and un-named. Named
fonts are created in the Fonts page within TCM (at
the /fonts URL); while un-named fonts can be added directly to a Series or
Episode. Aside from that, the only differences between these two are that
named fonts can use custom font files and character replacements in addition
to metrics like font size, spacing, etc.; while unnamed fonts can only
adjust metrics.
This page will primarily cover named fonts. In general, these Fonts apply to the title text of a particular Title Card - not the season or episode text. That is (generically) fixed, or recolored via an extra.
Creating a New Font
At the top of the Fonts page, a new Font can be created by clicking the button. This will create a "blank" Font added to the top of the page.
Clicking the accordion will expand the Font, where all customization can be entered.
Previewing a Font
On the right-hand side of all Fonts is a live preview of the current Font. This preview reflects the currently entered Font settings - not necessarily what is saved in the Font - and can be refreshed by clicking the button.
Preview Card Type
Since each Card type uses different base Font values, it is important to preview your Font with the Card type you expect to utilize it on. While most metrics will apply fairly consistently across the types, some metrics (typically kerning and stroke width) will appear vastly different when applied to different cards.
Preview Title
Above the preview image is a textbox in which you can enter the title text you would like to display in the preview Card.
Recommendation
I strongly recommend you test an example title with more than one line of text when first honing in the Font metrics. Depending on the Font file and Card type, it is not uncommon for multiple lines of text to be poorly spaced.
Next to the Preview Title label there is also a small button which, when clicked, will replace the preview title with all lower- and upper-case characters between A and Z.
Font Customization
All Fonts have the following options which can be adjusted:
- Name
- File
- Color
- Text Case
- Title Split Modifier
- Size
- Kerning
- Stroke Width
- Interline Spacing
- Interword Spacing
- Vertical Shift
- Character Replacement
Each of these is described in greater detail below.
Name
A Font's name is purely for easier selection within the TCM UI. It is generally recommended to name the Font with the name of the Series (or franchise) it will apply to.
Importing Blueprint Fonts
The name of a Font is also used to match Fonts when importing Blueprints.
For example - if you are importing a Blueprint featuring a Font named Better Call Saul and have already created a Font named Better Call Saul, then TCM will not duplicate the Font and instead just assign the existing Font to the Series.
This is part of the reason it is recommended to name your Fonts by the applicable Series or franchise.
File
A custom Font file to use in place of the Card's default. This is generally only applied to the title text of the Card.
In order for a Font file to be reflected in the live Card preview, you must upload the File to the server and click the button at the bottom of the Font.
File Location
Once uploaded, Font files are stored in TCM's asset directory. This means you can delete the File from your host OS after it's been uploaded into TCM.
Color
The color of the Font to use in the Title Card. If unspecified, then the Card's default Font color is used instead.
This variable supports all color formats and names supported by ImageMagick.
This includes hexcodes, rgb(), rgba(), hsl(), hsla(), hsb(), hsba(),
and color names.
Color Reference
A full article on the ImageMagick color specification is available here, and here is a convenient color picker.
MacOS Color Picker
If you are on MacOS, there is a very useful built-in color "picker". You can
access this by opening Digital Color Meter from Spotlight. It will show
you the RGB values of any pixel on screen, and these can be directly entered
into an rgb() color code.
Text Case
How to format the title text in the Card - i.e. upper or lowercase. This can be one of the following:
| Case | Description |
|---|---|
| Default | Use the Card type's default case |
| Blank | Remove all title text |
| Lowercase | Make all text lowercase |
| Source | Use the title as it appears in the Episode Data Source |
| Title | Apply title case logic (like in a book title) |
| Uppercase | Make all text uppercase |
Generally, leaving this as Default or Source is recommended, but it is often quite Font and Card type dependent.
Title Split Modifier
Advanced Setting
This setting is fairly complicated, rarely used, and can safely be ignored by most users.
By default, TCM will try and automatically split title text into multiple lines. This is done based on the number of characters in the text, as well as the specific card type being used. This setting allows adjusting after how many characters TCM will try and split into multiple lines.
Positive values mean TCM will require more characters in a line before splitting (i.e. longer lines), and negative values will require less characters (i.e. shorter lines).
This is especially useful if a custom Font file is being used which has a vastly different spacing or sizing than the card type's default Font.
Example
Take the title The One After Ross Says Rachel. Depending on the Card, TCM might split this into two lines of text like:
But, if a modifier of +8 was specified, then TCM will now try and "fit" 8 more characters into one line of text, for example:
Notice how more of the title has fit on the first line.
Why doesn't TCM split titles to always fit in the image?
TCM currently does all the "title splitting" logic in Python - but this has the downside of occasionally requiring manual adjustment, and can result in some very long titles extending beyond the bounds of the image.
So this inevitably begs the question: why not measure the actual length of the title text in the image to ensure this never happens?
The short answer is: performance. Although TCM does do quite a bit of text metric analysis1 for various aspects of Cards, it is generally much slower than doing this in Python, and would be especially slow if required multiple times (like would be the case when "fitting" text on an image).
Size
Size scale of the Font. Values >100% will increase the size of the Font, and values <100% will decrease the size of the Font. Must be positive.
Kerning
Scale of the Font's kerning. Kerning refers to the distance between letters within the same word. For a (approximate) visual representation of this, adjust the slider below to scale this paragraph's kerning.
Depending on the Font and Card, it is not uncommon for Kerning values to be very large (or very small) - for example, I used a value of 1500% for my Jane the Virgin Title Cards.
Whether values >100% increase or decrease the letter spacing is dependent on the Card.
Stroke Width
Stroke vs. Drop Shadows
Rather than using a text stroke, many card types instead feature a drop shadow which will be unaffacted by this stroke width metric. In particular, the Calligraphy, Tinted Frame, and Lanscape cards.
Scale of the Font's stroke width. This generally refers to title text which has an outer stroke which helps the characters appear more visible.
The follow examples showcase stroke widths of 10%, 100%, 200%, and 500% respectively.
Interline Spacing
Additional pixel spacing to apply between multiple lines of text. Positive values increase the spacing between lines, and negative values decrease it.
Interword Spacing
Additional pixel spacing between words in text. This is similiar to kerning, except only applies to the spacing between separate words, not the spacing between letters of the same word.
Positive values add space between words, negative values decrease it.
Vertical Shift
Pixels to offset the vertical placement of the title text.
Character Replacements
It is fairly common to come across Fonts that do not have all the characters needed for all the titles of a given Series. Especially for titles with lots of punctuation, or accented characters like é.
To aid with this, any Font can have a predefined set of character replacements which will be applied to an Episode title before the Card is created. These can be manually entered, or TCM can perform an automatic analysis of the Font by clicking the button.
These replacements can take any text (the left input field) and will replace that with the replacement text (the right input field). This replacement text can be blank to indicate the input text should be deleted.
Advanced Replacement Logic
TCM actually applies font replacements twice; once before splitting the title into multiple lines (if enabled) and applying the text case, and once after. This is done so that the original text and the "cased" text can be replaced separately (if desired).
However, because of this, some replacements might appear to "doubled up".
For example, if a replacement was used to add an extra space between some
character, such as , to ,, then TCM will actually add two spaces.
This can be avoided by using the pre: and post: tags described below.
Pre- and Post- Tags
To only apply a character replacement only before the
text case, preface the text to replace with pre:. Likewise,
to only apply a character replacement after the text case, preface the text
with with post:. TCM will ignore the pre: and post: text in the
actual replacement.
Character Replacement Analysis
Under the Character Replacements section of a Font is a which can be pressed to prompt TCM to perform an automated analysis of the Font and make suggested replacements.
During this analysis, TCM will look for any appropriate glyph within the Font for all the most commonly used English characters (i.e. A-Z and all standard punctuation). If the Font is assigned to a Template, Series, or Episode then TCM will look at the titles of those assigned elements for characters.
Analyze the Font after Assignment
Because of this, it is recommended to perform the Font analysis after assigning the Font to the applicable Template, Series, or Episode.
TCM will then suggest replacements by looking for common character replacements
(like & to and, ’ to '), the lower or uppercase equivalent (if
applicable), and finally attempt a Unicode character decomposition.
Example Analysis
Say the Font in question does not have the character Á - TCM will look for
a "common" replacement; then á; and finally an A or a character.
-
Technical term for analyzing some text by loading it into a "fake" temporary image of just text and taking measurements of the image space required to display the text. ↩