Hi there =) Here, in this tutorial, I’ll show you how
you can make your Typographic workflows with TextMeshPro so much easier. You’ll learn about the asset’s settings
and we will figure out text styles. It’s going to be awesome! First, one thing that will have no effect
on anything you already created, but everything going forward: The Text Mesh Pro Settings. You will find it under Edit → Project settings
→ TextMeshPro. You might have to click on “Import Essentials”
first if you haven’t set up TMP yet. Once done, you’ll see a new menu item pop
up: Settings. Here, you can set the default values and checkmarks
to many of the most basic TMP Text Components: Most importantly the Default Font Asset so
new textboxes actually start with your basic chosen font instead of the standart Liberation
font. Once this is set up, it will save you so much
time! At least, it did for me. The next important settings are the Text Container
Default Settings. I always give the X values a few more pixels,
set the Raycast Target to disabled (since most of my text doesn’t need to be clickable)
and increase the default Font size a bit. Take note of this info at the top, too. We are going to need this later. Onwards to: Styles. You are already well familiar with
these settings down here: Your actual font asset to handle which font is being used,
Font styles, Alignment,… Have you ever clicked on this dropdown before? Let's see what we have here. This is a list of pre-defined style sheets,
which somehow all relate to printed media - headlines, quotes, links and so on. They come in handy as a reference on how to
write your own, but that's about the extend of their usefulness to be honest. These drop down styles always apply to the
whole text container, not just individual parts, like for example setting a single word
to bold. More on that later. We can't really use any of these, so let's
write our own. All of these Text Styles can be found in Text
Mesh Pro’s Style Sheet folder, in the aptly named “Default Style Sheet”. Here, all of them are listed - as you can
see, they all have a name, an automatically generated Hash Code, and an input field for
opening and closing tags. If you have ever worked with CSS before, you
will probably understand what’s going on here at first glance, but for everybody else: If you want to change the look of the contents
of a text container, you need to use so called tags. A tag usually consists of an opening tag and
a closing tag. This, for example, is the tag for “Bold
this text”. You can distinguish between opening and closing
tags easily, by looking for this slash. It marks the end of the area you want to be
affected by the style. Thus, in the default example, we can see a
tag for the size of the affected text, a tag for making in bold and a tag to set the text’s
color. Lastly, there are even the randomly added
asterisks, too! Let’s change it to something we can actually
use. Decrease the size value to something like
1.3 or up to 1.5em for this. By the way “em” refers to the typographic
size of roughly one uppercase letter M in your chosen font. Thus, 1em means the size of the font will
stay the same as set, while a size of 2em doubles it. Let’s keep <b> for this tutorial, but change
the color hex value to something else. Lastly, delete the asterisks. If nothing is changing, you need to click
on your headline text container and choose Text Style - H1. Well, this looks kind of alright already to
me :) But you can go further, of course and let's
do so! Let’s add one of the most interesting tags
you can add: the <font> tag! With this, you can tell your Headline to use
a specific font asset. Two caveats for this: It of course needs to
be a textmeshpro font asset and you remember this folder? You will need to place the font asset here
or TextMeshPro won’t be able to find it. I want my Headline to have this font, so I
enter the exact spelling of the font asset here and - yep, works. TMP’s documentation lists a whole bunch
of tags you can use, I very much recommend having a look at them. For this project, I don’t need any of the
remaining styles, so I remove them by clicking here. But wait - I forgot my body text! So, I add a new style, name it Body and add
a few tags I prepared beforehand: A bit of character spacing, a bit of line spacing (which
I recommend on any text!) and again a custom font. I’ll tell my Body text conatiner to use
it, check if I like the results and apply the changes to my prefab so it will remember
to use styles for the text boxes. So, now I can drop in my custom made text
box wherever I like and if I choose to change fonts or settings or visuals at one point,
I don’t need to touch them at all - just change the font in the style sheet. And of course I could create a couple more
actually game-relevant styles to change up the optics and use cases of my basic text
element, too! Lastly, I’ll cover inline styles. These get applied only to certain parts of
your texts, like a word set to bold. Let’s create a new Style, call it “Bold”
and give it the corresponding tags. Back in your text container, you can now click
directly before the word you want to change the appearance of and write <style=”Bold”>
directly in front of it. As you can see, everything behind it will
now be changed to bold, so we need to use a closing tag, too - this gets placed directly
behind the word. There is no difference between an inline style
and a paragraph style, so you could of course use every other style you already set up,
too :) Lastly: You can use the style tag inside of
stylesheets, too, so you can even further tweak how the results should look like! Well, that’s all for Text Styles in Text
Mesh Pro! I hope you enjoyed the tutorial and learned
a thing or two in the process - please let me know if you did =) And I’m curious: Did
you use Text styles before? Leave me a comment, I’d love to know!
