Screen Recording Options for Code Editors

In my Goals Setting post for 2022, I shared that I wanted to improve my blogging activity, and “try and expand into some online videos and possibly even do some live streaming.”

One of the biggest hurdles with creating technical video content is making sure that any code in the code editor is readable when watching the video. While I tend to watch tutorial videos in full screen mode they are often embedded into layouts that are between 700 – 900 pixels wide (YouTube, on blog posts etc), and it would be ideal if the code was also at least readable at that width.

I generally record at a resolution of 1920 x 1080. However some folks find the code hard to read at that resolution. The next resolution down would be 1280 x 720, which makes the code bigger, but also leaves less space on screen, as everything else is bigger as well.

It’s been suggested to me that a dark theme makes the code more readable, but I’m not sure if this is actually true, or just dependent on contrast and brightness settings. I personally find it jarring when my browser is light, but my code editor is not, so I’ve switched to light themes all around, even in my terminal.

Finally, I recently discovered is that it’s possible to create two screen capture sources in OBS, the software I use to record my screen. This means I can create a screen capture source at a size of 1280 x 720 pixels, but which is only capturing a specific part of the screen. This is useful because I can switch screen capture sources during a recording, and effectively zoom in on a specific section of the code editor when I’m showing some code. The downside is that I have to make sure I don’t code outside of that area.

OBS does have a “Window Capture” option, which I can set to only capture a specific window. That’s going to mean I have to make sure to set the code editor window to the right height and width. Depending on the result of this experiment, I might have to look into that.

All of this leads me to the point of this post, in that I’m trying to determine which of the available options makes it easier to read the code on screen:

1. 1920 x 1080 light theme
2. 1920 x 1080 dark theme
3. 1280 x 720 light theme
4. 1280 x 720 dark theme
5. cropped 1280 x 720 light theme
6. cropped 1280 x 720 dark theme

If you have a moment, please watch all six videos, and then vote at the bottom of the page.