---
title: "Lesson 7.3 - Titles"
content_type: tutorial
url: "https://learn.unity.com/tutorial/lesson-7-3-titles?language=en"
language: en
difficulty: beginner
duration_minutes: 50
unity_version:
  - "2020.2"
  - "2020.1"
  - "2019.4"
  - "2019.3"
supported_unity_versions:
  - name: "2020.2"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles.md?language=en&version=2020.2"
  - name: "2020.1"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles.md?language=en&version=2020.1"
  - name: "2019.4"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles.md?language=en&version=2019.4"
  - name: "2019.3"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles.md?language=en&version=2019.3"
available_languages:
  - name: "en"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles.md?language=en"
  - name: "ja"
    url: "https://learn.unity.com/tutorial/lesson-7-3-titles-jp.md?language=ja"
  - name: "ko"
    url: "https://learn.unity.com/tutorial/sueob-7-3-jemog.md?language=ko"
last_updated: "2026-08-04T14:23:36.000Z"
---

# Lesson 7.3 - Titles

Discover how to add and customize on-screen titles to enhance your Unity project.

Every movie has titles. In this lesson, we’ll show you how to add titles to your project.

## 1. Lesson Overview

[Video](https://connect-mediagw.unity.com/h1/20200715/videos/67c6774c-2916-4a29-bc6f-e412df35bb3c_7.3_Creating_Titles.mp4)

## 2. Installing TextMeshPro

**TextMesh Pro** is a package capable of creating stylish text in Unity. Import the TextMesh Pro essential resources and fonts into your project.

**1.** From the top menu dropdown, select: **Window > Text Mesh Pro > Import TMP Essential Resources** (**Figure 01**).

![Figure 01: How to import TMP Essential Resources](https://connect-mediagw.unity.com/h1/20200715/learn/images/95d40ed0-e35f-4c2f-abe3-ea478c808490_image.png)

**2.** Make sure the entire TextMesh Pro package is selected and click import (**Figure 02**).

![Figure 02: The boxes that must be checked in order to import the package](https://connect-mediagw.unity.com/h1/20200715/learn/images/5e98141e-de25-468b-8bcc-3d61d9c073cb_image.png)

**3.** From the top menu dropdown, select:

**Window > TextMeshPro > Import TMP Examples and Extras** (**Figure 03**).

![Figure 03: How to import TMP fonts](https://connect-mediagw.unity.com/h1/20200715/learn/images/4792f394-0a42-4d60-8ead-e622fa7d22aa_image.png)

**4.** You only need the **Fonts** package here. Uncheck the TextMesh Pro box to deselect the unnecessary boxes. Check the Fonts box in order to only select the fonts package and click import (**Figure 04**).

![Figure 04: TMP Examples and Extras with only Fonts selected](https://connect-mediagw.unity.com/h1/20200715/learn/images/afdb82b2-0515-49a3-aada-47b1005fc22d_image.png)

## 3. Adding and Styling Text 

Now that you have the necessary tools in your project, it’s time to create your title. You will be using a font called **Bangers**. You will begin by creating the **Font Asset**.

**1.** Create a new Font Asset by going to the TextMesh Pro folder in Assets then navigating to **Examples and Extras > Fonts > Bangers** (**Figure 05**).

![Figure 05: Bangers in the Fonts folder](https://connect-mediagw.unity.com/h1/20200715/learn/images/2408e44d-09b2-4805-82d0-bafb8e397322_image6.png)

**2.** Right click on Bangers and then select: **Create > TextMesh Pro > Font Asset** (**Figure 06**).

![Figure 06: How to create a Font Asset](https://connect-mediagw.unity.com/h1/20200715/learn/images/d50cee2c-1f12-4318-9cd5-27a61ad7ed43_image46.png)

This will create “Bangers SDF,” (**Figure 07**) a new Font Asset in your Fonts folder.

![Figure 07: Bangers SDF is above the Bangers font](https://connect-mediagw.unity.com/h1/20200715/learn/images/a2a98a79-c7ee-481e-b33a-13e6b6b92c92_image10.png)

Now that you have your Font Asset available, you will create the title itself.

**3.** Right click in the Hierarchy and navigate to **UI > Text - TextMeshPro** (**Figure 08**) to create a new TextMesh Pro GameObject in your scene.

![Figure 08: How to create a TextMesh Pro GameObject](https://connect-mediagw.unity.com/h1/20200715/learn/images/7a531944-6982-4dbf-ab3e-fb15f143442f_image7.png)

You should now see some text in your Game view (**Figure 09**).

![Figure 09: Text in the Game view](https://connect-mediagw.unity.com/h1/20200715/learn/images/6b07dde9-fdbe-4394-a5a5-4062b6e4949f_image37.png)

**4.** This step will also create a **Canvas**, which will be the parent of your Text (TMP) GameObject.  Rename this “TitleCanvas.” (**Figure 10**)

![Figure 10: TitleCanvas in the Hierarchy](https://connect-mediagw.unity.com/h1/20200715/learn/images/91261ff0-9cdd-4c0e-a1e7-0a91f7c4c758_image41.png)

- Make sure TitleCanvas is selected. In the Inspector under **Canvas Scaler**, change the **UI Scale Mode** from **Constant Pixel Size** to **Scale With Screen Size** (**Figure 11**) in order to keep the title proportionate to the 16:9 aspect ratio.

![Figure 11: How to change the Canvas Scale Factor to Scale With Screen Size](https://connect-mediagw.unity.com/h1/20200715/learn/images/776e0c72-a06b-43cf-b689-31445664d36d_image31.png)

**5.** Change the **Reference Resolution** under **Canvas Scaler** to **X: 1920 Y: 1080** and change the **Match** value to **0.5** (**Figure 12**) so that our title remains centered, proportionate to our screen resolution.

![Figure 12: How to adjust the Canvas Scaler settings](https://connect-mediagw.unity.com/h1/20200715/learn/images/3dbaff03-eb2b-43c7-ab63-78cd62fe56cc_image18.png)

**6.** Back in the Hierarchy window, rename **Text (TMP)** to “Title.” (**Figure 13**)

![Figure 13: The Title GameObject](https://connect-mediagw.unity.com/h1/20200715/learn/images/e201c783-df0e-42f9-b8f0-88daf99aee2d_image21.png)

**7.** In the Inspector, go to **TextMeshPro - Text (UI)** and change “New Text” to “The Chase.” (**Figure 14**)

![Figure 14: Where to change the text](https://connect-mediagw.unity.com/h1/20200715/learn/images/142ce1d7-7598-44a8-aed9-1aa42d9fa2af_image23.png)

8\. Under **Rect Transform**, change the Width to **1280** and the Height value to **250** (**Figure 15**) so that it evenly scales our title to a transform position on the screen. Additionally, change your X and Y position values to 0 in order to get our title where it needs to be on screen.

![Figure 15: Changing the Rect Transform values](https://connect-mediagw.unity.com/h1/20200715/learn/images/ebbcb826-c79a-41fa-8847-cc79e1e818aa_image20.png)

9\. In the **Anchor Presets**, click the **center**, **middle** box to keep our title positioned and centered in view(**Figure 16**).

![Figure 16: Center, Middle Anchor Preset](https://connect-mediagw.unity.com/h1/20200715/learn/images/260b371b-13d6-4d2e-9005-64174680b19e_image48.png)

At this point, here’s what your title should look like (**Figure 17**). Notice that it does not yet appear centered. This will change when we increase its size:

![Figure 17: The title with the updated settings](https://connect-mediagw.unity.com/h1/20200715/learn/images/f3171f4b-2a01-4f8a-808d-c121f3f69fa7_image12.png)

Now that you have your title asset created, it’s time to give it a stylized look that will match the aesthetic of your film.

**10.** Go back to the TextMesh Pro - Text (UI) tab in the Inspector (**Figure 18**).

- Change the **Font Asset** to Bangers SDF.
- Change the **Font Size** to 250.
- You can either have one colour for your font by changing **Vertex Color,** or you can use a gradient by enabling **Color Gradient.** Enable this checkbox and made the first color “#FFD900FF,” the second color “#FF006FFF,” the third color “#FF005BFF,” and the fourth color “#A500FFFF.”
- Change the **Alignment** to center.

![Figure 18: The TextMesh Pro - Text (UI) section with the adjusted settings](https://connect-mediagw.unity.com/h1/20200715/learn/images/418f96ff-e3f8-414f-85c8-09f6a702c10a_image4.png)

The result should look like this (**Figure 19**):

![Figure 19: The title with some basic adjustments](https://connect-mediagw.unity.com/h1/20200715/learn/images/5c08ce54-cc5f-4818-a5a3-088a7b143481_image45.png)

**11.** In the Inspector, below Extra Settings, expand the triangle for **Bangers Atlas Material**, and then in the setting labelled **Face**, change **Color** to **light pink** and change the **Dilate** value to **0.5** (**Figure 20**). Doing this will make the title appear fuller and get letters to overlap.

![Figure 20: Extra Settings adjustments](https://connect-mediagw.unity.com/h1/20200715/learn/images/d425f49b-3244-42ba-8a24-94f52fe01bd3_image15.png)

The result will look like this (**Figure 21**):

![Figure 21: Result of the changes from the previous step](https://connect-mediagw.unity.com/h1/20200715/learn/images/3ed8a5db-3fb5-45d0-a735-349fc724cc5f_image5.png)

**12.** Create a 3-color border around the text that will really help it pop out (**Figure 22**).

- Under **Outline** change **Color** to **Navy Blue** and change the **Thickness** value to **0.7**. The Outline is the outer edge of the text and the outermost border element.
- Underlay is the innermost border element. Enable the Underlay checkbox, and then select the Underlay field again to expand its properties. Change Underlay **Color** to **Purple** (make sure the **Alpha** in the Color settings is set to **255**), **Offset X** to **0.15**, the **Offset Y** to **0.2**, the **Dilate** value to **0.62**, and the **Softness** value to **0.07**.
- Glow is the color in between Outline and Underlay. Enable the Glow checkbox, and then select the Glow field again to expand its properties. Change Glow Color to **Turquoise,** again with the **Alpha** set to **255**. Make the **Offset** value **1**, the **Inner** value **0.255**, the **Outer** value **0.7**, and the **Power** value **0.3**.

![Figure 22: Extra settings needed to create a border around the title](https://connect-mediagw.unity.com/h1/20200715/learn/images/4dc4d801-2b13-4ce0-9ec7-26613205cf13_image11.png)

Your title should now look like this (**Figure 23**):

![Figure 23: A completed title](https://connect-mediagw.unity.com/h1/20200715/learn/images/4f8ad659-a8d6-4bf0-816e-5052c2a8a508_image1.png)

TextMesh Pro offers a lot of flexibility in terms of styling text. Continue experimenting with your title’s settings if you want to give it an even more unique look.


## 4. Fading Text In and Out 

You now have your stylized title. It’s now time to fade your title in and out at the beginning of your film. You will do this by animating its **opacity** or **alpha channel value**. You will start by creating an **Animation Track** for the title.

**1.** In the Timeline window, right click to create a new **Track Group** (**Figure 24**).

![Figure 24: Creating a new Track Group in the Timeline](https://connect-mediagw.unity.com/h1/20200715/learn/images/0a1c26e9-8d67-4fe0-b003-149e649fd76e_image38.png)

**2.** Rename the Track Group “Title Group.”

**3.** Add an Animation Track to Title Group for the title (**Figure 25**).

![Figure 25: Adding an animation track to Title Group](https://connect-mediagw.unity.com/h1/20200715/learn/images/e88c6a93-414f-4571-8f85-9d35be44d922_image30.png)

**4.** Drag your “Title” GameObject in your Hierarchy to the empty animation track and click **Create Animator** **on Title** (**Figure 26**).

![Figure 26: Assigning the animation track to “Title”](https://connect-mediagw.unity.com/h1/20200715/learn/images/5ad2d7c8-3816-405d-9743-bcecfbb153c4_image22.png)

Now that you have your animation track for the title, you will animate its opacity.

**5.** Click the red record button to begin animating the title.

![Figure 27: Record button](https://connect-mediagw.unity.com/h1/20200715/learn/images/5cc61c22-7f64-4cee-81a2-783d6a5f5665_image16.png)

**6.** With the Timeline playhead cursor set to Frame 0, ensure that the "Title" GameObject is selected in the Hierarchy window. Next, select the Vertex Color in the Inspector window, within the TextMeshPro - Text (UI) component (**Figure 28**).

![Figure 28: Vertex Color under TextMeshPro - Text (UI)](https://connect-mediagw.unity.com/h1/20200715/learn/images/f4ab8cde-ac3e-46ec-a977-aa866185fe4f_image26.png)

**7.** Change the **A (alpha)** value to **0** to make the title transparent (**Figure 29**).

![Figure 29: Where to adjust the A value under Color](https://connect-mediagw.unity.com/h1/20200715/learn/images/f19df1a7-aa95-40cd-97bb-8e2126982fcb_image3.png)

**8.** In the Timeline, scrub forward to Frame number 20 in and change the title’s alpha value back to **255** to make it visible once again. The title will now fade in from being completely clear (**Figure 30**).

![Figure 30: The alpha value back at 255 about 20 frames in](https://connect-mediagw.unity.com/h1/20200715/learn/images/1935b810-496f-433a-a2d2-70c0ed0c8243_image24.png)

**9.** You can further adjust the look of the title fade in by going into the graph editor and adjusting the time and values of the individual keys, which you can do by right clicking on them and selecting **Edit Key**. Try changing the key’s starting time from **20 frames** in to **35 frames** in to make the fade in time lengthen (**Figure 31**) and (**Figure 32**).

![Figure 31: Adjusting the  individual keys in the Graph editor](https://connect-mediagw.unity.com/h1/20200715/learn/images/392a0598-d40f-4503-943b-171f8ed85157_image47.png)

![Figure 32: The second keyframe moved to 35 frames in to make the fade in occur over a longer duration](https://connect-mediagw.unity.com/h1/20200715/learn/images/b3430317-88cc-452c-8107-2bac840a741e_image34.png)

Now that your title fades in, it’s time to fade it back out as the action begins.

**10.** Scrub the Timeline to about **81** frames in and right click the graph editor to add a new key (**Figure 33**). This should add a new keyframe with the same **255 alpha value** of the title.

![Figure 33: Adding a new key to begin the fade out](https://connect-mediagw.unity.com/h1/20200715/learn/images/4652c507-b764-45da-9e51-54c1d637e198_image17.png)

**11.** Scrub a little bit further forward to about **89** frames in and change the title’s alpha value to **0** to create the fade out (**Figure 34**).

![Figure 34: With the alpha value set to 0, you now have a fade in and fade out for the title](https://connect-mediagw.unity.com/h1/20200715/learn/images/13d76404-80ce-4a12-9c17-a0e2db9ebb10_image13.png)

You can now adjust the settings of the fade out to make it look more gradual and better match up with the timing of the film.

**12.** Right click the third keyframe, select **Edit Key**, and change its time to **65** frames. Right click the fourth keyframe, select **Edit Key**, and change its time to **75** frames (**Figure 35**).

![Figure 35: Changing the keyframe settings by right clicking on keys](https://connect-mediagw.unity.com/h1/20200715/learn/images/d679fc25-ca38-45ce-a18e-33b8c88be467_image39.png)

**13.** Be sure to click the flashing red circle and save to finish editing this animation (**Figure 36**).

![Figure 36: Re-click the recording button to end the recording](https://connect-mediagw.unity.com/h1/20200715/learn/images/65a70225-224e-4b7e-866f-b72433d3e17e_image44.png)

**14.** You can also make further adjustments by clicking and dragging transitions until the timing looks right (**Figure 37**). Try dragging the final keyframe out to **85** frames (**Figure 38**).

![Figure 37: Adjusting the animation once the recording has ended](https://connect-mediagw.unity.com/h1/20200715/learn/images/969621f3-1fed-450b-86b2-6f157dedf97f_image27.png)

![Figure 38: The final keyframe moved back to frame 85](https://connect-mediagw.unity.com/h1/20200715/learn/images/aaa2c127-f713-4609-aae0-0e640aeebe5d_image27.png)

## 5. Fading the Video In and Out 

Finally, you will want to add a fade in and fade out to the beginning and end of our film. You will do this by creating a black image and adjusting its opacity, much like we did with our title.

First, create a black image that will cover the canvas.

**1.** In the Hierarchy, right click on the **TitleCanvas** and select **UI > Image** (**Figure 39**).

![Figure 39: Creating a black image](https://connect-mediagw.unity.com/h1/20200715/learn/images/921021fd-889a-43da-96c0-c25ea40472b3_image28.png)

This will create an **Image** GameObject that is a child of TitleCanvas (**Figure 40**).

![Figure 40: Image in the Hierarchy](https://connect-mediagw.unity.com/h1/20200715/learn/images/47d5e4b3-e8e4-4efd-81a8-91ef1141de44_image42.png)

**2.** In the Inspector, change the **Anchor Presets** under **Rect Transform** to **Stretch**, **Stretch** while holding down the **Alt**/**Option** and **Shift** keys in order to stretch the image to fit over the entire view (**Figure 41**). You should immediately see a white image cover the entirety of your Game View.

![Figure 41: Changing the Anchor Preset to stretch, stretch](https://connect-mediagw.unity.com/h1/20200715/learn/images/c7cc16a7-8772-4ff4-bf60-b33be1111b00_image19.png)

**3.** Below, under Image, change the color from **white** to **black** (**Figure 42**). Doing this should change the color of the Game view from white to black.

![Figure 42: Changing Image’s color to black](https://connect-mediagw.unity.com/h1/20200715/learn/images/d394da4f-a149-483d-98d8-a65631d09f07_image14.png)

**4.** Now change the name of Image to “**FadeInToBlack**” (Figure 43).

![Figure 43: Image’s new name: “FadeInToBlack”](https://connect-mediagw.unity.com/h1/20200715/learn/images/bcc43fcc-af76-48f1-bd6b-53b56da3cd98_image25.png)

You now have the black image. It’s time to animate its opacity to create a fade in and fade out just like you did with your title.

**5.** In the Timeline, right click the Title Group and select **Add Animation Track** (**Figure 44**).

![Figure 44: Adding an Animation Track](https://connect-mediagw.unity.com/h1/20200715/learn/images/109e1054-a8fe-4e24-9561-87ddfd73a8e5_image8.png)

To edit the new animation track you’ve created whilst changing values in the Inspector for the FadeToBlack GameObject, click the lock on the top right corner of the Timeline to lock it (**Figure 45**).

![Figure 45: How to lock Timeline](https://connect-mediagw.unity.com/h1/20200715/learn/images/e572b7a4-33bc-4552-9ea2-ccfb3c117d2c_image2.png)

**6.** Drag FadeInToBlack onto the empty Animation Track and select **Create Animator on FadeInToBlack** (**Figure 46**).

![Figure 46: Assigning the empty animation track to FadeInToBlack](https://connect-mediagw.unity.com/h1/20200715/learn/images/9f3d4a29-d955-4e0d-b272-3b7badad0613_image36.png)

**7.** Press the record button to animate the FadeInToBlack GameObject’s opacity.

   **a.** Scrub the Timeline to 0 frames and in the Inspector under Image, click the color and change the A (alpha value) to **255** (**Figure 47**).

![Figure 47: Where to adjust the alpha value of FadeInToBlack](https://connect-mediagw.unity.com/h1/20200715/learn/images/c25f799a-0fc6-48d0-8faf-5ab1f6552200_image43.png)

   **b.** Scrub to **10 frames** and change the A value to **0**. The video should now fade in.

   **c.** To fade out, create a new key at frame **485 frames** and make sure FadeInToBlack’s alpha value remains set to 0.

   **d.** Create one final frame at **515 frames** and set the FadeInToBlack’s alpha value to **255**. The fade out should look something like this on the graph editor (**Figure 48**). Feel free to tweak these values depending on how drastic of a fade in and fade out you want.

![Figure 48: The graph editor and game view as the film fades out](https://connect-mediagw.unity.com/h1/20200715/learn/images/a95ca023-0a10-4279-a3c2-1bbd103e1809_image33.png)

## 6. Recap

In this lesson, we learned how to use TextMesh Pro to create a stylish title and how to use the Timeline to fade the title and video itself in and out.