Editor different font sizes for different screen resolutions?


It would be nice if I could set Atom to use one font size on an external display (i.e. Thunderbolt display 2560x1440) and another on internal display (MBP Retina 1440x900).

One the built-in display, 12px Menlo looks perfect, but on the larger display it looks small and 13px looks better.

Is there a way to use a media query or something for this?

FAQ: Best Practices
Archived FAQs (see FAQ category for all current FAQs)

Now that font size is controlled via stylesheets, you should be able to use a media query to do what you’re thinking of. Unfortunately, I’m not an expert on CSS … so I don’t have any suggestions beyond that.


This seems to work. If I set the preferences page to 13px and then add this:

.editor {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
       font-size: 12px;


Added to the Best Practices FAQ.


I like it. :thumbsup:
Thanks for sharing.


If you want to hard code a font-size to a specific resolution (screens of different max resolution), you can do something like this too:

.editor {
    @media (device-height: 1440px) {
       font-size: 16px;