Lesson 01 of 05
The Type Scale
A disciplined scale is the difference between amateur and premium UI.
Use 4-5 font sizes maximum: Display, Heading, Body, Caption, Micro. Tie each to a semantic role. Never set arbitrary font sizes on individual labels — it creates visual chaos.
The standard Roblox type scale
- Display: 48px — hero titles, splash screens
- Heading: 28-32px — section headers, modal titles
- Body: 14-16px — all readable content
- Caption: 11-12px — labels, timestamps, metadata
- Micro: 9-10px — badges, tiny tags (use sparingly)
luau
1-- Type scale constants (put in a module)
2local Typography = {
3 Display = { size = 48, font = Enum.Font.GothamBlack },
4 Heading = { size = 28, font = Enum.Font.GothamBold },
5 Body = { size = 15, font = Enum.Font.Gotham },
6 Caption = { size = 12, font = Enum.Font.GothamMedium },
7 Micro = { size = 10, font = Enum.Font.Gotham },
8}
9
10local function applyType(label, style)
11 label.TextSize = style.size
12 label.Font = style.font
13end
14
15-- Usage
16applyType(titleLabel, Typography.Heading)
17applyType(bodyLabel, Typography.Body)
18applyType(captionLabel, Typography.Caption)
19
20-- Rich text for inline emphasis
21descLabel.RichText = true
22descLabel.Text = 'Earn <b>double coins</b> for the next <font color="rgb(255,200,50)">24 hours</font>!'
READY · 22 lines