Download & Extend

Seven has inconsistent fonts on form elements

Project:Drupal core
Version:7.x-dev
Component:Seven theme
Category:bug report
Priority:normal
Assigned:Unassigned
Status:needs work
Issue tags:CSS, Needs design review

Issue Summary

Text input and select form elements in Seven consistently appear with this font stack:

"Helvetica Neue",Helvetica,Arial,sans-serif

Except where they don't. The filter dropdowns on admin/content, and on admin/people, the filter dropdowns and *some* of the update options.

Firefox 3.5.5 on OS X. Same behavior in Safari.

AttachmentSizeStatusTest resultOperations
forms-fonts.png154.36 KBIgnored: Check issue status.NoneNone

Comments

#1

#2

Font-stacks should certainly cover all applicable uses.

Maybe have a look at how much of this is covered by #575294: Add reset.css through drupal_add_css() instead of through the .info file and check if #592018: Re-organize styles across stylesheets from system.module and separate presentational and behavior-supporting styles has any bearing on this.

#3

Status:active» needs review

This patch adds html-elements.css, for styling of generic elements. It pulls some of that styling over from style.css. It resolves the fonts problem on the form elements in this issue and also resolves #634498: Filters layout is broken on admin/content and admin/people

AttachmentSizeStatusTest resultOperations
634724-html-elements-css.patch7.73 KBIdlePassed on all environments.View details | Re-test

#4

+1 for font consistency. This patch has a few visual side effects to work out though. I've illustrated these in attached screenshots.

  • admin-appearance-before and -after.gif: The tabs (e.g., List and Configure) get a gap below them introduced by this patch. Also, the action links (eg, "+ Install New Theme") get bullets added. In general the type appears bigger, and some like 'Skip to Main Content' gets much bigger. This is what I'm seeing in Mac FF 3.5.5.
  • admin-verticaltabs-before and -after.gif: The vertical tabs themselves seem to be indented farther right, bumping the actual tab contents down below the tabs. Again, it's Mac FF 3.5.5.
  • admin-before and -after.gif: On the admin page all the div boxes seem to get extra padding/margin pushing their content (eg, 'List - select the default theme for your site') to the right.
AttachmentSizeStatusTest resultOperations
admin-appearance-before.gif56.68 KBIgnored: Check issue status.NoneNone
admin-appearance-after.gif58.29 KBIgnored: Check issue status.NoneNone
admin-verticaltabs-before.gif54.26 KBIgnored: Check issue status.NoneNone
admin-verticaltabs-after.gif49.27 KBIgnored: Check issue status.NoneNone
admin-before.gif51.42 KBIgnored: Check issue status.NoneNone
admin-after.gif48.73 KBIgnored: Check issue status.NoneNone

#5

This patch addresses all of the issues raised in #4.

AttachmentSizeStatusTest resultOperations
634724-html-elements-css1.patch8.64 KBIdleFAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 634724-html-elements-css1.patch.View details | Re-test

#6

I'm very much in favor of adding an html-elements.css file to style generic elements, it adds clarity and structure by seperating the typographic basics from the per-case specifics. It'll make a better impression on themers inspecting these files, too, it's just something you do :-)

Will apply this, review and report back.

#7

Title:Seven has inconsistent fonts on form elements» Add html-elements.css and fix inconsistent fonts on form elements
Status:needs review» needs work

Strange. Applying this patch makes text go smaller than before.

I see that a font-size: 0.8em gets redefined to a font-size: 0.875em. This should keep focus on fixing the form elements and the addition of html-elements.css without any other design changes (which I'm sure is the intent).

http://skitch.com/yoroy/nea3n/before
vs.
http://skitch.com/yoroy/nea38/after

(FF 3.5.5 on OS X)

#8

Title:Add html-elements.css and fix inconsistent fonts on form elements» Seven has inconsistent fonts on form elements

I may have derailed this issue a little bit with the html-elements.css change. So I've added #641734: Separate generic html elements' style into html-elements.css which will just split those stylesheets up as we've been discussing here. Once that gets in, we can get back to the fonts on these form elements.

#9

Status:needs work» needs review

bumping this for review.

#10

Component:Seven theme» markup

Still an issue!

Markup component?

#11

Component:markup» Seven theme

Nope. Markup component is not for theme-specific issues.

#12

Is this the right place to question whether the form elements ought to be in a different font in the first place? I think if the form labels, help text, and so forth are Lucida Grande, then the form elements should be too. Adding a slightly different sans-serif to the page does not improve the design, regardless of how consistently it's applied.

#13

#5: 634724-html-elements-css1.patch queued for re-testing.

#14

Status:needs review» needs work

The last submitted patch, 634724-html-elements-css1.patch, failed testing.

#15

nobody click here