634087 - Consider using sans-serif or platform-dependent typeface in MailNews start page

Status: NEW

(SeaMonkey :: MailNews: General, enhancement)

Description

[Jens Hatlak (:InvisibleSmiley)]

Bug 486965 added some background work to the MailNews start page. Still the page looks a bit out of place IMHO. At least on Windows and Linux (Kubuntu), the whole default UI uses sans-serif: Menus, folder and thread pane contents, Account Central (especially the latter is displayed almost in the same context as the start page). Message contents are mostly typewriter if you have plain-text mails, or "whatever" if it's HTML. Only in Simple HTML mode a serif typeface is used.

The font settings of Account Central (msgAccountCentral.xul) depend on the "page" element definition which is in global.css, which is "-moz-use-system-font" for the Default theme.

Questions:
1. Am I alone with the feeling described above?
2. Would it be OK to use sans-serif/-moz-use-system-font throughout? (Compromise: Headings only)
3. Would Mac need specific exceptions from a "-moz-use-system-font" rule for the Default theme, if desired?
4. What fits best with Modern?

Comment 1

[Philip Chee]

http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/locales/en-US/chrome/global/intl.css#6
"tahoma,arial,helvetica,sans-serif"

Or Perhaps:
http://mxr.mozilla.org/comm-central/source/mozilla/testing/mozmill/mozmill/docs/_build/html/_static/sphinxdoc.css#7
"font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;"

Perhaps ask andreasn for his suggestions?

Comment 2

[Jens Hatlak (:InvisibleSmiley)]

Good starting points, thanks Philip.

I think the following additions improve things considerably:

/* Font family for all content */
body {
                /*Win7*/   /*XP*/  /*Win*/ /*Mac*/    /*Fallback*/ 
  font-family: "Segoe UI", Tahoma, Arial,  Helvetica, sans-serif;
}

/* The bold black on the water background is incredibly ugly! */
h1 {
  color: #55A;
}

/* The bold underlined link is very distracting and looks out of place,
   but we want it on hover. */
h1 > a:not(:hover) {
  text-decoration: none !important;
}

Comment 3

[Philip Chee]

> color: #55A
What colour is that?

http://www.febooti.com/products/iezoom/online-help/html-color-names-netscape-color-chart.html

I guess you're trying for something in this range?
377		CadetBlue	#5F9EA0	95,158,160
380		DarkOliveGreen	#556B2F	85,107,47
382		SeaGreen1	#54FF9F	84,255,159
383		PaleGreen4	#548B54	84,139,84
384		CadetBlue4	#53868B	83,134,139
385		DarkSlateGray4	#528B8B	82,139,139

Comment 4

[rsx11m]

The question with hard-color colors always is, how do they fit with the
user's selected desktop theme? It has probably been discussed elsewhere already, but it seems that using whatever desktop-theme aliases are available may be preferable over fixed colors?

Comment 5

[rsx11m]

s/hard-color/hard-coded/

Comment 6

[Jens Hatlak (:InvisibleSmiley)]

(In reply to comment #3)
> > color: #55A
> What colour is that?

One I came up with through experimenting. If it has a name I don't know it.

> 377        CadetBlue    #5F9EA0    95,158,160
> 384        CadetBlue4    #53868B    83,134,139
> 385        DarkSlateGray4    #528B8B    82,139,139

Those are the only ones that don't look completely out of place but still I think my choice is much better. Actually IMHO there is no point in limiting ourselves to certain named or defined colors. Instead we should go with what fits best. If someone provides a color that fits better than what I proposed, fine, I'm all ears.

(In reply to comment #4)
> The question with hard-color colors always is, how do they fit with the
> user's selected desktop theme? It has probably been discussed elsewhere
> already, but it seems that using whatever desktop-theme aliases are available
> may be preferable over fixed colors?

The thing is: This color here doesn't depend on any desktop theme, only on the background (SM waves) added through bug 486965 and the blue line below the heading. The chosen text color should harmonize with those two. And I think for judging that you need to actually apply the styles and see them in action (e.g. using Stylish or userContent.css).

Comment 7

[Philip Chee]

And make sure your monitor is colour calibrated properly.