This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

webpage section Headings are too big, text-content is too small.

  • 14 replies
  • 5 have this problem
  • 1 view
  • Last reply by cor-el

more options

I have to make the content/text fonts big so i can read comfortably, but this makes the section headings on the webpages gigantic, and the whole layout is wrong.

in Opera, 10years ago, it used to be possible to change the font size of the class of the section headings (there were 6 classes/sizes of headings IIRC). the final effect was that the font size of the content was close to the font size of the section heading or headlines on the webpages. the settings changes were made on a configuration page for designating the name of the font and the sizes for proportional and for monospace. for instance the section heading on this text entry page is "Fill in the details of your question." and that font size is at least 3 or 4 times taller then the sub headings which ar "Question" and "Details."

so is there a way in FF to decrease the font size of the section headings as a general global setting?

I have to make the content/text fonts big so i can read comfortably, but this makes the section headings on the webpages gigantic, and the whole layout is wrong. in Opera, 10years ago, it used to be possible to change the font size of the class of the section headings (there were 6 classes/sizes of headings IIRC). the final effect was that the font size of the content was close to the font size of the section heading or headlines on the webpages. the settings changes were made on a configuration page for designating the name of the font and the sizes for proportional and for monospace. for instance the section heading on this text entry page is "Fill in the details of your question." and that font size is at least 3 or 4 times taller then the sub headings which ar "Question" and "Details." so is there a way in FF to decrease the font size of the section headings as a general global setting?

Chosen solution

When Firefox is installed, it does not automatically create the chrome folder. You can create a new folder in your profile folder:

C:\....\Application Data\Mozilla\Firefox\Profiles\z7hau5ip.default 

So it will appear one or a few spots below bookmarkbackups.

Read this answer in context 👍 1

All Replies (14)

more options

Sort of... You can apply style rules to web pages that specify the heading size in proportion to the size of ordinary text, and that should allow them to zoom proportionately.

By default, these values are:

  • ordinary text: 1em = 16 pixels
  • h1: 2em, or 2 x 16 pixels = 32 pixels
  • h2: 1.5em, or 1.5 x 16 pixels = 24 pixels
  • h3: 1.17em, or 1.17 x 16 pixels = 18.7 pixels

To re-proportion the headings, you could try this set of rules:

h1 {font-size:1.4em !important;}
h2 {font-size:1.25em !important;}
h3 {font-size:1.1em !important;}

To apply that to pages, you have two choices:

(1) userContent.css file

This is a file that does not ship with Firefox but can be created in your active settings folder (AKA Firefox profile folder). It's efficient in that it doesn't require an add-on, but only is read at startup, so fine-tuning rules is a chore.

(2) Stylish extension

This add-on allows you to create rules that you can edit and preview instantly so you can see whether you like the result.

There are numerous threads describing how to use these two tools, and for Stylish, the userstyles.org site contains many examples of rules you can try out.

Hope this helps.

more options

Two other notes:

(1) If zoom breaks the layout, you might be using "Text Only" zoom. To switch to "full page zoom" you can:

tap the Alt key > View menu > Zoom > uncheck Zoom Text Only

(2) The forum software detected your Firefox as version 12. Is that correct?

Version 12 is not secure; Mozilla discloses security flaws after each new release. Is something holding you back from upgrading to Firefox 22? Please let us know so we can suggest solutions or workarounds.

If Help > About Firefox shows Firefox 22.0, you may need to clear the preference that is misreporting your version number. See: How to reset the default user agent on Firefox.

more options

thanks very much, jscher2000.

i just added the Stylish123 plugin, and hope to find an example to follow to make headings smaller, since i have to make the content-font size quite large--then the headings and line spacings can take up a quarter of the page.

yes, i am using ff v.12. i tried to upgrade a while back and some of my favorite plugins would not install in the newer versions, so i switched back to v.12 which takes all but the "find duplicate bookmarks" addon (or something like that).

i guess i can try a newer version, but my plugins are very important to me: no squint, yet another smooth scrolling, toolbar buttons, download helper, add to search bar, adblock, and now "stylish."

if i can get stylish to work on leveling the headings-font sizes to just slightly bigger than the content-font size, i'll come back here and report.

i think a userContent.css file would be completely beyond my coding skills, unless there are fill in the blank templates.

thanks again for your thoughtful counsel, jscher2000

more options

Hello again. I did look at Stylish, but this seems to require a setting for each separate web page i might look at, but i hope to install one-time heading-font-size control which will apply to each and every web page i view, based on the text or content size on that page--or alternately, as a fixed size 15 or 16 font.

i also looked in my FF profiles folder but did not see any .css files to use as a guide. and searching FF support for how to write and install a user .css file was not productive.

i seem to remember early FF versions had a choice for user .css or the webpage .css file in the font choices options page. but i can't find this now. (or perhaps it was Opera that had the user .css choice)

if you could point me to an example i could copy which will control the h1, h2, etc. headings as only a little bit larger than the size of the text/content font on every web page the FF displays, then i would like to install that. and please tell me where to install that .css file.

more options

oh, yes, and i'd like to be able to change line spacings. i'm using the comic font because it is the most legible, i think, but i'd like to reduce the line spacing for comic, particularly in the h1 h2 h3 headings.

more options

here is the userContent.css file i added to the FF profile default folder C:\....\Application Data\Mozilla\Firefox\Profiles\z7hau5ip.default


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: normal; text-align: center }
caption         { text-align: center }
body            { margin: 8px }

h1 {font-size:1.25em !important;}
h2 {font-size:1.17em !important;}
h3 {font-size:1.1em !important;}

h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: normal }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

}

AFAIK there has been no change on any webpage visited.

also installed firebug and extra tools, but that is hopelessly confusing.

Modified by cor-el

more options

Hi 3katie3, are you saying the userContent.css rule worked (and solved your problem) or didn't work?

If Firefox is ignoring it, could you try deleting that @namespace line from the file, save, and restart and see whether that helps?

more options

Note that this @namespace is used in the userChrome.css file.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

For userContent.css you can consider to use this line:

@namespace url("http://www.w3.org/1999/xhtml");

Also note that you can restrict CSS rules to specific domains or URLs.

@-moz-document domain(support.mozilla.org)
@-moz-document url-prefix(https://support.mozilla.org/en-US/)
@-moz-document url(https://support.mozilla.org/en-US/questions/963378)
more options

thank you for your suggestions cor-el and jscher2000. i modifed my userContent.css file as shown above by deleting the namespace line entirely, and also trying these entries:

@namespace url("http://www.w3.org/1999/xhtml"); and @namespace url(http://www.w3.org/1999/xhtml);

but none of these 3 variations changed the way the webpages which i visit every day looked and the headings were all the usual size they always have been.

i tried these 3 variations on a half dozen different sites, with no affect.

i also tried disabling the no-squint FF add-on, and i changed the FF content option to let the webpages display their own fonts and sizes rather than my selection, and then changed them back to display my fonts and sizes.

nothing i have done has been able to reach the font display.

i'll try anything else you can suggest.

after looking through the firebug app on several different web sites, it seems there are many levels of display controls/code elements which are able to affect the final appearance. i wonder how FF determines which of the controls to use in the final display. maybe there isn't any way to tell without close inspection of the source and FF configuration

more options

Could you double-check the folder where you saved the file? It needs to be in a subfolder of your profile named chrome.

Also, could you try simplifying the file to contain just the following:

h1 {font-size:1.25em !important;}
h2 {font-size:1.17em !important;}
h3 {font-size:1.1em !important;}
more options

Hi jscher2000,

i searched C drv for "Chrome" and took 2 screenshots saved in monochrome to reduce file size enough to upload. (left side and right side of search panel) if i can upload them, please tell me where to paste userContent.css which will contain only these lines: h1 {font-size:1.25em !important;}

h2 {font-size:1.17em !important;}

h3 {font-size:1.1em !important;}

more options

Chosen Solution

When Firefox is installed, it does not automatically create the chrome folder. You can create a new folder in your profile folder:

C:\....\Application Data\Mozilla\Firefox\Profiles\z7hau5ip.default 

So it will appear one or a few spots below bookmarkbackups.

more options

well, jscher2000, i think the new chrome folder

C:\Documents and Settings\Administrator\Application Data\Mozilla\Firefox\Profiles\z7hau5ip.default\chrome\userContent.css

with just these 3 lines: h1 {font-size:1.25em !important;} h2 {font-size:1.17em !important;} h3 {font-size:1.1em !important;}

is having an effect on the display fonts.

there are other elements with too-large font sizes which seem to be designated as table elements?

so i am going to try adding more lines to the userContent.css file in the same form as the h1 h2 h3 lines you suggested to make the web pages much more readable, and more like professional print pages rather than jangly advertising layouts.

i guess i'll close this topic now by clicking the "question solved" button.

thanks again for sticking with this till it was solved.

more options

Note that you can make such rules work domain specific or URL specific with an @-moz-document domain(){} or url(){} block.

@-moz-document domain(support.mozilla.org), domain (xxxx){ body, body * { font-size: 1em !important; } }