How to set the font for the settings UI and the command browser


#1

Hello,

I just begun using Atom. I managed to set the font size, and the font family for the editor (so the editor itself looks great now), but that does not seem to have any effect on either the settings UI or the command browser (“ctrl+shift+p”). So Atom remains very uncomfortable to use. I have trouble reading the commands when I use “ctrl+shift+p” and looking through the settings options is a pain. It is not only that the font size is small, but whatever font Atom is using is of very poor quality and looks very ugly and pixelated.

Can anyone suggest a solution? I have tried to find information online but I only get links back to the standard “customizing-atom” page. I looked through the config files, but I could only find the font settings for the editor.

Cheers,
Daniel.


#2

Atom’s UI is controlled via Themes and LESS/CSS stylesheets. I’ve also run into issues with the size of the fonts. You can see my solution in my post here:


#3

Thanks! That really helps. I copied your code to styles.less and that fixed the status bar, the tree menu, tabs, etc. However, the Settings GUI was not affected. But at least I knew that I had to look for .less files… After a lot of poking and searching I found the LESS files responsible for the GUI in my Atom installation. In there, I changed @font-size from 11px to 16px. Now I can read the settings GUI and I’m reasonably happy.

I still have not managed to get the check buttons to have a reasonable font size. I hope to fix that soon. In the mean time, I added an issue in Github:


#4

I also requested something similar in the configurable theme PR here:


How can I change the scale of atom's windows
#5

I found a quick way to scale the entire UI (fonts, widgets, the works, no need to change individual font sizes!) which works very well for me (using Atom 0.179.0).

Add the following line to your init.coffee (location depends on which OS you’re using):

require('web-frame').setZoomFactor(2)

(adjust the zoom factor (x * 100%) to your liking.)
Save the file, restart Atom and enjoy :slight_smile:


#6

Or… you can use Isotope :boom:


#7

Hello Braver:

just downloaded atom.
I also installed your package.
and added this to style.less:
html, body { font-size: 16px; }

But UI fonts (below a heading, e.g. subtitle or title, as well as inside text boxes and buttons) in Settings and Welcome views are quite small.

I also like to make the fonts thicker instead of one pixel widfh.

Do you have any suggestions?
Thanks.


#8

You may need to reload for the stylesheets for certain packages like settings-view to refresh and take in new values.
There is a font-weight option in the settings for isotope-ui.


#9

You may need to reload for the stylesheets for certain packages like settings-view to refresh and take in new values.

Does “reload” means exit Atom, and restart it?
If not, please be specific.
Thanks.


#10

You can quit and restart or use the ctrl-shift-R which is faster. It reloads the same way as it does in a normal browser.


#11

Thank you.


#12

The command (ctrl _ shift + p)

.command-palette {
   font-size: 16px;
}

The preferences / settings i did it with everything:

 atom-pane {
     font-size: 16px;
 }

#15

Awesome. Where could I get to know this classes and tags?


#16

You can use the Developer Tools to inspect the HTML behind the application. If you run Atom in Dev Mode, you can right-click any location in the UI and select “Inspect Element” just like you would in your browser.


#17

Thanks, this was great.

Note, the zoom factor doesn’t have to be an integer (I set mine to 1.25). Also, you have to press ctrl-alt-R (atom refresh) to have it take effect.