milov.nl

Interaction design • webdevelopment • web art • photography

July 2004

fixed width font in Gmail

Does Gmail have a setting somewhere to make message text appear in a fixed width font? 'Cause if it does, I sure can't find it...

To force it to use a fixed width font anyway, I added the following to userContent.css in my Firefox profile:

div.msg div.mb {
  font-family: monospace !important;
  font-size: 12px !important;
}
(Firefox's 'View Selection Source' came in real handy trying to figure out these classnames; regular View Source is a pain on Gmail because the whole thing's Javascript-generated.)



P01 wrote on 2004/07/21:
Per user style sheets have been popular these days.

Though the chances that that CSS rule may interfere with another site are small, I suggest you to try one of these extensions :

* URIid ( http://extensionroom.mozdev.org/more-info/uriid ) which adds an id of the form www-milov-nl to the body tag of every page you visit.


* MyOwnCSS ( http://www.raphinou.com/cgi-bin/myowncss/main.cgi ) does the same as URIid, except that the CSS are stored on an external server and shared between the users. In a way, it the del.icio.us of the CSS customization.


Notice, that I haven't tried them yet, but I gonna install URIid and give it a try.


milov wrote on 2004/07/22:
Neato... And add these two extensions to really make the most of it:
http://extensionroom.mozdev.org/more-info/chromedit
http://extensionroom.mozdev.org/more-info/editcss


P01 wrote on 2004/07/22:
Yep, EditCSS is a must.
damn, I love FireFox.


milov wrote on 2004/07/22:
*sniff* I've known Firefox since it was just a little Phoenix, standing no taller than 0.1... It's certainly grown up to be one fine browser. http://milov.nl/1594


huphtur wrote on 2004/07/22:
Web Developer Extension comes with it's own "Edit CSS".
http://www.chrispederick.com/work/firefox/webdeveloper/


Woudloper wrote on 2004/07/23:
As I do not have a qmail account and I am a regular reader of your blog I would like to know what the use is of a 'fixed font size' for the mail?

And indead 'EditCSS' is a must for everyone who is editing (and doing other stuff) with websites!


milov wrote on 2004/07/23:
Woudloper: It's not about the size, it's about the width. I like the characters in my mail to be evenly spaced; I'm used to that from way back, when every mail reader used a fixed width font, that way ascii art etc. doesn't get all squished together.

I even forced Outlook Express to use fixed width by setting its 'Proportional font' to 'Courier New'.


Woudloper wrote on 2004/07/23:
milov: you are absolutely right. I was reading 'size' in-stead-of 'width'. My mistake...

Does this fix (or tweak) also works for HTML email messages or did you set your presence (if that is possible within QMail) to ignore HTML messages?


Mathieu 'P01' HENRI wrote on 2004/07/23:
fixed font size is a must to make CODE pasted as is in the body of emails readable. Not to mention, in text editors. Damn, it always scares the s**t out of me when I see some body using a proportionnal font in a text/code editor.


g. wrote on 2004/08/26:
used your code above in Firefox's serContent.css with no luck (Mac OS X, Firefox 091). Idea as to what I could have done wrong? Seemed so straightforward ...


Maggie wrote on 2005/05/20:
i waz just wondering how can u change the color or size or font of the typing if u no plz email to me how crazymagsters@gmail.com


ohshady wrote on 2005/10/07:
Just thought I'd give something back :-)

http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html

@-moz-document url-prefix(mail.google.com/mail/), domain(mail.google.com)
{
div#rc {
display: none !important;
}
font, div#mb_0 {
font-family: monospace !important;
font-size: 12px !important;
}
}


ohshady2 wrote on 2005/11/12:
We can do much better;

@-moz-document url-prefix(mail.google.com/mail/), domain(mail.google.com) {
/* the cell that contains the message, utils, ads */
td#fi {
padding: 0px 0px 0px 0px !important;
}
font[size="-1"] /* print view */, div#msgs /* conversation view */ {
font-family: monospace !important;
font-size: 1.2em !important;
}
}


Hugh wrote on 2005/12/02:
Re: oshady2,

Thanks for the great code! How would one go about getting the composition textarea to also display in monospace?

Thanks again,
Hugh. ;)


mash wrote on 2005/12/06:
Very useful modification. I have had trouble making this work. I have copied the relevant text and used the mozilla chrome editor extension to insert it (I've tried both userContent.css and userChrome.css) but to no avail.

Do I need to tell Firefox to check these files?

Is the code still working for you all?


Hugh wrote on 2005/12/09:
Hi,

Yes it still works for me. Try editing the files manually:

Go to Start > Run and type "%AppData%" without the quote marks.

Navigate to \Mozilla\Firefox\Profile\Chrome and edit/create userContent.css, filling it with the code in post #13 above.

Hope this helps,

Hugh. :-)
mailto:hughlilly##NOSPAM@GMail##NOSPAM.com


Petr Rehor wrote on 2005/12/24:
Thanks for your idea. There is my userContent.css:

@-moz-document domain(mail.google.com)
{
body,td,input,textarea,select,button {
font-family:verdana,arial,sans-serif !important;
}

.ab,.cd button {
font-size: 100% !important;
}

.mb {
font-family: monospace !important;
font-size: 100% !important;
}
}


Stephan Walter wrote on 2006/01/13:
I played with the CSS a bit and came up with some code that also makes the compose window have a fixed-width font.

For easier cut&paste, get the code from

http://stephan.walter.name/Gmail_CSS_tweaks


Sergey Martynov wrote on 2008/11/24:
There's a greasemonkey script, which adds a button in gmail interface and allows you to turn fixed font on and off easily: http://userscripts.org/scripts/show/37471


essay writing wrote on 2010/10/18:
"Does Gmail have a setting somewhere to make message text appear in a fixed width font?" - It does!


Eduardo wrote on 2011/05/05:
How would one go about getting the composition textarea to also display in monospace?