Change UI font-size in Atom

Question

Im using the material-UI theme in Atom (MacBook Pro, 2021). I wish to make some of the UI text bigger, ex the text on tabs, menus, buttons, welcome page and so on. (note: I don't mean the text/code in the actual editor!).

For example, I wish to make the text of these menu options larger. (print-screen from Atom):

I can't find this option in neither the atom settings, nor the material settings. I've looked at the material less-files but I don't understand them. Searched google and SO but I haven't found a solution that works for me.

Please keep in mind that I am a beginner if you have an answer!

user_1329116 · Answer

Atom comes with a user stylesheet that one can use to override almost all parts of the UI. For example, you can add the following to increase the font-size of all DOM nodes by 120% – except the text editor itself:

html:not(atom-text-editor) {
    font-size: 120% !important;
}

If you want to make more granular changes, you will need to use more specific CSS selectors. Fortunately, you can use Atom's built-in developer tools to inspect the selectors of the editor.

user_7476280 · Answer

There is a setting in the Theme preferences - see my screenshots to locate the font size setting.

Change UI font-size in Atom

2 Answers