Platform specs8 min readUpdated Sep 9, 2026

Anatomy of a TikTok Comment: Font, Spacing, Badges, Creator Heart & Pinned

A comment screenshot passes or fails on details nobody consciously reads: the weight of the username, the cyan of the check, whether 24,300 likes shows as 24.3K. This is the anatomy of a TikTok comment laid out piece by piece, with the measurements our generator renders and the mistake each piece usually hides.

Avatar
40 px
Username
14 / 600
Body text
15 / 1.32
Meta row
13 px
Reply indent
52 px
Limit
150 chars

The specimen: one pinned comment with a creator reply

A
Pinned
ava.films
wait the lighting in this is unreal, what camera?
Y
Liked by creator
2dReply
24.3K
View 1 reply
Y
youCreator
shot it on my phone honestly 📱
1dReply
1.2K
The anatomy of a TikTok comment, rendered live by the generator at 1× in the light theme. Numbers key to the legend below.
  1. 1AvatarWho is talking
  2. 2UsernameHandle, not display name
  3. 3Verified badgePlatform-issued trust mark
  4. 4Pinned labelCreator chose this comment
  5. 5Comment textThe line itself
  6. 6Liked by creatorThe creator's heart
  7. 7Time + ReplyThe action row
  8. 8Heart columnLikes on the comment
  9. 9Creator pillThis is the video's author
  10. 10Reply threadNested conversation

Every number in this anatomy of a TikTok comment is measured in logical pixels, the units a phone screenshot reports after you divide by its scale factor. A 3× iPhone capture of a 40 px avatar is 120 physical pixels; export from the generator at 3× and it lands at the same size.

Ten parts of the anatomy of a TikTok comment, measured

Avatar

Who is talking

  • 40 px circle on a top-level comment
  • 32 px on a reply
  • 12 px gap to the text column

Tell: A square or rounded-square avatar. TikTok never draws one.

Username

Handle, not display name

  • 14 px, weight 600
  • 60% opacity of the text color
  • lowercase, dots and underscores

Tell: A username in full black. It is deliberately quieter than the comment.

Verified badge

Platform-issued trust mark

  • 15 px cyan check, #20d5ec
  • 5 px after the name
  • same cyan in light and dark

Tell: A blue Twitter-style check. TikTok's is teal, with a scalloped edge.

Pinned label

Creator chose this comment

  • 12 px, weight 500, meta color
  • pin glyph, 4 px gap
  • sits above the name row

Tell: Pinned shown as a colored chip. It is plain gray text with a small pin.

Comment text

The line itself

  • 15 px, line-height 1.32
  • 92% white on dark, #161823 on light
  • 150-character cap

Tell: A 40-word essay. Real comments are short because the app cuts them off.

Liked by creator

The creator's heart

  • 20 px mini avatar of the creator
  • 13 px disc with a 10 px filled heart
  • 12 px caption, 6 px above the time row

Tell: A lone red heart with no avatar. The badge is the creator's face plus a heart.

Time + Reply

The action row

  • 13 px, meta color
  • Reply at weight 600
  • 16 px between the two

Tell: A full date. TikTok writes 2d, 3h, 1w — never September 9.

Heart column

Likes on the comment

  • 20 px outline heart (18 on a reply)
  • count 12 px underneath, 3 px gap
  • filled #fe2c55 when liked

Tell: The heart placed inline after the text. It lives in its own right-hand column.

Creator pill

This is the video's author

  • 12 px, weight 500
  • 2 × 6 px padding, 4 px radius
  • gray pill, 12% white on dark

Tell: Creator in the platform red. Only the heart and the check carry color.

Reply thread

Nested conversation

  • 52 px indent (avatar + gap)
  • "View 2 replies" at 13 px, weight 600, after a 24 px rule
  • 16 px between replies

Tell: Replies at the same indent as the parent. The thread steps in once.

What font does TikTok use for comments?

The font is the most argued part of the anatomy of a TikTok comment. Three different answers are floating around, and each is right about a different surface. The one that matters for a screenshot is the first row.

In the appThe phone's system fontSan Francisco on iPhone, Roboto on most Android phones. The comment sheet inherits it, which is why the same comment looks slightly different across devices.
On tiktok.comTikTokFont, a proprietary web faceDeclared in the site's CSS and not available to download. Desktop screenshots carry it; phone screenshots do not.
Brand materialTikTok SansThe public typeface used in marketing and available on Google Fonts. Using it for a comment mockup is the most common way to get the font wrong.

The generator renders with the system stack, so the comment picks up San Francisco when you build it on an iPhone and Roboto on Android, the same substitution the app itself makes. Checked against current app builds in September 2026; if TikTok ships a custom in-app face, this section will change.

Light and dark: the same comment, two token sets

A
Pinned
ava.films
wait the lighting in this is unreal, what camera?
Y
Liked by creator
2dReply
24.3K
View 1 reply
Y
youCreator
shot it on my phone honestly 📱
1dReply
1.2K
A
Pinned
ava.films
wait the lighting in this is unreal, what camera?
Y
Liked by creator
2dReply
24.3K
View 1 reply
Y
youCreator
shot it on my phone honestly 📱
1dReply
1.2K

The dark half of the anatomy of a TikTok comment is not an inversion. The sheet sits on pure black and every gray is white at an opacity step, so secondary text keeps the same relative weight it has on white. These are the values the generator uses for each part.

PartLightDark
Sheet background#ffffff#000000
Comment text#161823rgba(255,255,255,0.92)
Usernamergba(22,24,35,0.6)rgba(255,255,255,0.6)
Time, Reply, countsrgba(22,24,35,0.5)rgba(255,255,255,0.5)
Pinned / Creator pillrgba(22,24,35,0.06)rgba(255,255,255,0.12)
Idle heartrgba(22,24,35,0.34)rgba(255,255,255,0.5)
Thread rulergba(22,24,35,0.1)rgba(255,255,255,0.12)

How TikTok rounds a like count

Under a thousand, the raw number. From a thousand up, one decimal and a K; from a million, one decimal and an M; a trailing .0 is dropped. The rule is simple, and it is the number most mockups get wrong, usually by writing 24,300 in full.

  • 999999
  • 1,0001K
  • 1,2341.2K
  • 24,30024.3K
  • 1,000,0001M
  • 1,200,0001.2M

How the parts stack into one row

Read a comment as three columns. The avatar column is fixed at 40 px. The text column takes whatever is left and stacks, top to bottom: the Pinned label if present, the name row with its badge and pill, the comment, the creator-heart badge if present, then the time and Reply row. The heart column on the right is fixed at 26 px minimum and holds the heart with its count underneath.

Replies repeat the same three columns at a smaller scale, indented by exactly the avatar plus its gap, 52 px, so the reply's avatar lines up under the start of the parent's text. That alignment is the single most reliable tell in the anatomy of a TikTok comment: if the reply avatar sits anywhere else, the thread was drawn by hand.

Use the anatomy of a TikTok comment instead of memorising it

Every measurement on this page is already inside the TikTok comment generator: the sizes, the tokens, the K rounding, the 150-character counter and the reply indent. Type the words, toggle the badge, pin it, and export a transparent PNG at 2× or 3× with no watermark. For the single-bubble “Replying to” sticker the reply video shows, use the TikTok reply generator; to drop either onto a video, follow the CapCut comment overlay guide.

Open this specimen in the generatorFree, in the browser, nothing uploaded.

Building a cast of recurring commenters? Exports land in your files; sign in and the same usernames, avatars and themes follow you to the next video and the next device.

Anatomy of a TikTok comment FAQ

What font does TikTok use for comments?

Inside the app, the comment sheet renders in the phone's own system font — San Francisco on iPhone, Roboto on most Android phones. TikTok's website declares a proprietary TikTokFont, and TikTok Sans is the public brand typeface. Our generator uses the system font stack, so a comment made on an iPhone matches an iPhone screenshot.

How big is the text in a TikTok comment?

Measured in logical pixels, the anatomy of a TikTok comment comes out at: comment body 15 px, the username 14 px semibold, and the timestamp and Reply label 13 px, with like counts and the Pinned label at 12 px. Those are the sizes the generator renders at 1×; exports at 2× and 3× multiply everything evenly.

What is the character limit for a TikTok comment?

TikTok caps a comment at 150 characters. Longer text simply can't be posted, so a mockup with a 300-character comment is the first thing a sharp viewer notices. The generator counts as you type so you stay inside the limit.

How does TikTok display like counts on comments?

Raw numbers below 1,000, then one decimal with a K or M suffix: 1,234 becomes 1.2K, 24,300 becomes 24.3K and 1,000,000 becomes 1M. A trailing .0 is dropped, so 2,000 shows as 2K, not 2.0K.

What does the Creator tag on a TikTok comment mean?

The small Creator pill next to a username marks the person who posted the video. It appears on the creator's own comments and replies, in the same gray pill style as the Pinned label, and it is separate from the blue verified check.

Are the dark-mode colors of a TikTok comment just inverted?

No. Dark mode sits on pure black, and the text is white at graded opacities — about 92% for the comment body, 60% for the username and 50% for timestamps — rather than a flat gray. Light mode uses a near-black #161823 for the body with the same opacity steps for the secondary text.

Related guides and tools

Tool

TikTok comment generator

Every part of the anatomy of a TikTok comment, editable: badge, pin, Creator tag, creator heart, reply threads, light and dark.