The above screenshot is what the default skin looks like when you use the Steam Client on a 1920×1080 display. If you have your face mashed up against the screen then you can read the text no problems. If, however, you are seated back a bit from the screen, or have a high-resolution screen, or just don’t have eagle-eyed vision, then the text can be really, really hard to read.

There is no setting in the Steam Client that lets you simply make everything bigger. The community has been asking for one for years, and years, and years but Valve doesn’t seem to care that much. They ‘recently’ let you, kinda, sorta, make some things bigger in the Library, but that’s of limited value to most people who spend far more of their time exploring their Discovery Queue (or using other parts of the Steam Client).

If you’ve got a couple of minutes of time you can apply a zoom to the body of the interface that turns the above into this:

I chose to name the new skin “bigger” — change it to whatever you like. A zoom of 1.2(120%) is what I use — also change it to whatever you like.


To create your own skin folder; You just need to make a few directories, copy the default steam.styles file into one of them, and create a webkit.css file in another. Edit the latter with whatever text editor you prefer.

In Windows:
The path to the Steam directory should be:
Program FilesSteam
Create all missing directories up to and including:
Program FilesSteamskinsbiggerresourcestyles
Into that last directory, copy the default Steam styles file from:
Program FilesSteamresourcestylessteam.styles
And create the text file for your custom CSS:
Program FilesSteamskinsbiggerresourcewebkit.css


In MacOS:
The path to the Steam directory should be:
~/Library/Application Support/Steam/
Create all missing directories up to and including:
~/Library/Application Support/Steam/skins/bigger/resource/styles/
Into that last directory, copy the default Steam styles file from:
~/Library/Application Support/Steam/resource/styles/steam.styles
And create the text file for your custom CSS:
~/Library/Application Support/Steam/skins/bigger/resource/webkit.css

After you create your webkit.css paste this code to it;

:root {
zoom: 1.2;
}

.breadcrumbs, #application_root, .store_tooltip,
.queue_reason_description, .queue_btn_ignore_menu,
.mature_content_notice, .queue_controls_description {
display: none !important;
}

#store_controls {
position: fixed !important;
top: 0px;
right: 0px;
}

#store_nav_area {
top: 0px !important;
}

div#store_header, div#store_header .content {
height: 40px !important;
}

.html5_video_overlay {
zoom: 0.666;}

If you are using Metro skin for steam client, then you don't have to create libraries for skins,

C:/Steam/skins/Metro-For-Steam/Resource/Webkit.css

Edit the latter with whatever text editor you prefer. and paste this code below;

:root {
zoom: 1.2;
}

.breadcrumbs, #application_root, .store_tooltip,
.queue_reason_description, .queue_btn_ignore_menu,
.mature_content_notice, .queue_controls_description {
display: none !important;
}

#store_controls {
position: fixed !important;
top: 0px;
right: 0px;
}

#store_nav_area {
top: 0px !important;
}

div#store_header, div#store_header .content {
height: 40px !important;
}

.html5_video_overlay {
zoom: 0.666;
}

The first Zoom:1.2 is enough for you to make it bigger which is equal to %120, but if you wanna make it much bigger, you can choose 1.3-1.4-1.5 which I don't recommend, or If you wanna make it smaller, I currently use 1.2 on 1920x1080 display and it's really cool, but you can try whatever you like.

In the Steam Client…

Steam » Settings » Interface
change the skin from the default to the “bigger” one
click OK and restart the Steam Client
That’s it. You’re done.

Enjoy!

This Guide is excerpted and edited from the Tp69 Blog