How to change TAB font size in ANY BROWSER

Question

I just can't work near PCs anymore my eyes hurt - I am developer. I use browser a lot. I tried all of them: IE, Safari, FF, Chrome - they all are bad at the most simplest thing - large font size for tabs.

Please don't suggest me changing resolution or change DPI sizes - these are not solutions at all.

I don't care if Chrome loads 14 ms faster than browser X, if I spent 5000 ms trying to determine what the hell that tiny tab is for. I already have -2.00 - and this is stress for my eyes.

Numerous threads on Google, some magic dances in Firefox, didn't find anything for safari. Is it time for Linux already?

Maybe there is some genius guy who wrote plugin to save my vision?

I recommend Firefox due to the fact that it uses XUL/CSS for its UI. You can customize how any part looks, basically. — iglvzx, Mar 27 '12 at 07:17
that is definitely good for you :-) However I would like to see universal solution that would fit any poor soul like mine — Aubergine, Mar 27 '12 at 07:24
I'd be very interested to see an answer from @iglvzx as well. This is a problem I deal with too. — , Mar 27 '12 at 07:25

score 10 · Accepted Answer · edited Jun 12 '20 at 13:48

10

You can edit your Firefox profile's userChrome.css or use the Stylish add-on to define the following CSS rule:

#tabbrowser-tabs
{
    font-size: ... !important;
}

Where ... is replaced with a valid font-size value.

Example:

#tabbrowser-tabs
{
    font-size: 20px !important;
}

tabs

Video Demo: http://www.youtube.com/watch?v=BAhzZuhN61E

PS: If you want to also edit the font size of the List all tabs popup menu, the CSS selector is:

#alltabs-popup menuitem

PPS: Once you've increased the size of your tab's text, you can also increase the width of each tab to accommodate:

.tabbrowser-tab:not([pinned]) 
{
    min-width: ... !important;
    max-width: ... !important;
}

Where ... is replaced with a valid min-width or max-width value. Play around with these values to get different effects! Note: Pinned tabs will remain the same size.

Example:

.tabbrowser-tab:not([pinned]) 
{
    min-width: 400px !important;
}

wide tabs

edited Jun 12 '20 at 13:48

Community

1

answered Mar 27 '12 at 07:27

iglvzx

23,459
13
85
122

I tried however it didnt work - created `chrome' added css - no effect at all :-\ C:\Users\MyUserName\AppData\Roaming\Mozilla\chrome Maybe I've done something wrong? Update: such a lovely picture - my dream – Aubergine Mar 27 '12 at 07:37
+1. Works on my machine (latest FF on latest OS X). – Mar 27 '12 at 07:40
hmm, why does this happen to me, I will keep trying... :-) – Aubergine Mar 27 '12 at 07:42
@Aubergine Try the Stylish add-on, it works the same way, but is easier to use. – iglvzx Mar 27 '12 at 07:43
Stylish works! YeaY! Can I make tab names appear in full as it gets hidden under dots? like 'beer is...' it misses great. – Aubergine Mar 27 '12 at 07:51
@Aubergine Done! :) – iglvzx Mar 27 '12 at 08:11
1

you know what? You are WONDER :-D – Aubergine Mar 27 '12 at 08:39

How to change TAB font size in ANY BROWSER

1 Answers1

Example:

Video Demo: http://www.youtube.com/watch?v=BAhzZuhN61E

Example:

Linked