Last updated: May 29, 2024
# Styling subtitles with Transloadit: 3 creative ways
**Joseph Grabski**
Content Lead · Rochester, United Kingdom · Show bio
[](https://x.com/joe%5Fgrabski)[](https://github.com/Missing-Tech)
A distinctive subtitle style is just one of the many ways in which video streaming services can choose to define their brand. You can often tell in a single glance whether a video originates from Netflix or YouTube, simply based off the design of the subtitles. The aim of today's blog is to help you create a unique brand identity for your content, by uncovering the secrets of subtitle styling with the help of Transloadit.
## Our base Template
Before we go through any styling options, let's look at the base Template that we are going to be using to control our file flow.
```json
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"video_filtered": {
"use": ":original",
"robot": "/file/filter",
"result": true,
"accepts": [["${file.mime}", "regex", "video"]],
"error_on_decline": false
},
"subtitle_filtered": {
"use": ":original",
"robot": "/file/filter",
"result": true,
"accepts": [["${file.mime}", "regex", "application/x-subrip"]],
"error_on_decline": false
}
}
}
```
The two [/file/filter](/docs/robots/file-filter.md) Steps here will select our video and subtitle files from the array of files we upload to the Assembly, and allow us to directly access and pass them on to the subsequent[/video/subtitle](/docs/robots/video-subtitle.md) Steps.
Throughout the rest of the blog, each Step we look at will be added onto this basicTemplate.
With that out of the way, it's time to get creative! 🎨
## 1. Netflix subtitles
First up are the Netflix subtitles, with their characteristic back-to-basics style. TheStep shown below will:
* Set the `border_style` to `shadow`
* Make the primary text color white
* Make the shadow color black, and slightly transparent
* Set the font to Consolas
```json
"netflix": {
"robot": "/video/subtitle",
"use": {
"steps": [
{
"name": "video_filtered",
"as": "video"
},
{
"name": "subtitle_filtered",
"as": "subtitles"
}
]
},
"preset": "empty",
"ffmpeg_stack": "v5.0.0",
"subtitles_type": "burned",
"font": "Consolas",
"border_color": "80000000",
"font_color": "FFFFFF",
"border_style": "shadow"
}
```
Looks pretty sleek, doesn't it?
## 2. YouTube subtitles
Now onto Youtube's blocky subtitle style. To achieve this effect, we need to:
* Set the font to Roboto
* Set the `border_style` to `box`
* Make the font color white
* Make the box color black, and slightly transparent
```json
"youtube": {
"robot": "/video/subtitle",
"use": {
"steps": [
{
"name": "video_filtered",
"as": "video"
},
{
"name": "subtitle_filtered",
"as": "subtitles"
}
]
},
"preset": "empty",
"ffmpeg_stack": "v5.0.0",
"subtitles_type": "burned",
"font": "Roboto",
"border_color": "40000000",
"font_color": "FFFFFF",
"border_style": "box"
}
```
This should look quite familiar!
## 3. Vintage subtitles
Our final style is a veritable blast from the past: some vintage, VHS-inspired subtitles. We need to set our parameters as follows:
* Set the font to Arial
* Set the `border_style` to `outline`
* Set the outline color to black
* Set the text color to that distinctive shade of yellow
```json
"vintage": {
"robot": "/video/subtitle",
"use": {
"steps": [
{
"name": "video_filtered",
"as": "video"
},
{
"name": "subtitle_filtered",
"as": "subtitles"
}
]
},
"preset": "empty",
"ffmpeg_stack": "v5.0.0",
"subtitles_type": "burned",
"font": "Arial",
"border_color": "00000000",
"font_color": "03fcff",
"border_style": "outline"
}
```
Now take a moment to admire our retro-style subtitles in all their glory.
## Wrapping up
That's all for our brief look at subtitle styling using Transloadit. Of course, feel free to play around with the parameters yourself to see what suits you and your content best. For even more customization and fine-grain control, take a look at[SSA Subtitles](https://www.eztitles.com/Webhelp/EZTitles/export%5Fsubtitles%5Fsubstation%5Falpha.htm), which Transloadit also supports.
Until next time! And in the meantime, why not take a look at one of our[demos](/demos.md)?
[#assembly](/blog/tags/assembly.md)[#video-subtitle-robot](/blog/tags/video-subtitle-robot.md)[#file-filter-robot](/blog/tags/file-filter-robot.md)[#workflow](/blog/tags/workflow.md)
### 👩💻 Join 20k+ developers
Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.
Your email:
Get access
## File uploading and encoding. Made simple.
Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy](https://uppy.io) and [Tus](https://tus.io) setting standards in file processing.
[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)
No credit card needed · 5 GB included in the free plan
Cancel anytime