input font: inherit also pulls in line height

[brendon]

I have a search form where the parent element sets a line height to vertically centre the text in the form. The following rule brings that line height to the text inside the input in the form:

button,
input,
optgroup,
select,
textarea {
font: inherit; /* 1 */
}

Perhaps this was overlooked? I don't think it's a great 'normalisation' as I don't think anyone would expect this particular aspect of the font style to come through. Perhaps we could be more specific and inherit just the font-face?

[jonathantneal]

I’m not a fan of styling inputs beyond what’s necessary. However, inheriting all font styles may be an expectation of normalize.css. I’m not sure if this particular choice is “the exception that proves the rule” (which is why body { margin: 0 } happens), and that it must stay in future releases, but I would need a lot more input from the community, particularly from the bootstrap community.

[jonathantneal]

@battaglr, @patrickhlauke, I would very much be interested in your input here, no pun intended. :)

[battaglr]

@jonathantneal, @brendon, sadly this is the trade-off of using inherit. In the past using it in other properties has proven to be problematic, as in #502.

Pondering some options I can think of three possible actions:

1. Leave it as it is, accepting the trade-offs of inherit.

2. Remove the normalization altogether —not a good idea IMO.

3. Declare explicit values instead of inherit, using the default values of most browsers, and our own opinionated defaults:

font: small/normal sans-serif;

Or if we want to be even more explicit, and avoid some quirks of the font property we could use:

font-family: sans-serif;
font-size: small;
line-height: normal;

Notes:

• According to the MDN the default value for font-family is medium —although in my tests is usually closer to small— and for line-height is normal. Also, in this code-base the body has a font-family of sans-serif —since its value depends on the user agent.
• By doing this the optgroup declaration will no longer make sense.
• Finally, these values of course should be reviewed.

I would like to hear other opinions. 😃

[battaglr]

Hum, apparently I missed a fairly obvious fourth option, that is a middle ground:

font-family: inherit;
font-size: inherit;
line-height: inherit;

If we do this we still have to deal with potential problems of inherit, but by being explicit we don't take anyone by surprise while using the font property that may be a bit confusing for some. Also we avoid inheriting things like font-style, font-weight, etc.

As a bonus point, we could remove the the optgroup declaration.

[thierryk]

I don't like the idea to use inherit with shorthand syntax because that affects every single property:

• font-style (normal per spec)
• font-variant (normal per spec)
• font-stretch (normal per spec)
• font-weight (normal per spec)
• font-size (medium per spec)
• line-height (normal per spec)
• font-family (depends on user agents per spec)

Being explicit seems more reasonable to me. Also because a new property could be added; as it happened with font-stretch that was not part of the original properties to include in font.

[brendon]

I agree, that's a great compromise :)

[battaglr]

@thierryk, we totally agree on this (thank you for the spec links).

What would you suggest as possible solution for this?

[thierryk]

@battaglr using inherit with a limited set of properties is definitely an improvement but I don't see how your suggestion solves the problem. From my understanding, @brendon does not want this:

line-height: inherit;

Or am I missing something? Because his comment ("great compromise") seems to say otherwise...

[brendon]

@thierryk, sorry you're right, I didn't notice the line-height inclusion. I don't think line-height should be inherited by any of those elements. Most tend to have their own 'surroundings' that look weird when a line-height is applied.

My comment should be: It's a great compromise, provided you're inheriting logical aspects of the font. What is 'logical' is probably a matter of opinion.

[thierryk]

The specs say that the initial value for line-height is normal. Do we know the discrepancies between browsers and controls regarding the initial value of that property? Because if we need to set a line-height value then it may be better to go with normal rather than inherit as this should lead to more "predictable" results, no?

[jonathantneal]

I’m with @thierryk on this, because line-height: normal would be a spec normalization, and the current style is opinionated, anyway. However, a lot of people might be expecting this with normalize.css, line-height and all, so I hope for more feedback.

[brendon]

I'm happy with normal.

[battaglr]

@jonathantneal, @thierryk, @brendon, I may have expressed myself wrong, since I was not necessarily advocating for a particular solution, but hopping to open an interesting discussion (like this one) by presenting some options.

I think that line-height: normal would be a good replacement for inherit —as I mentioned in a previous comment—, but I'll ask the same question than @thierryk:

Do we know the discrepancies between browsers and controls regarding the initial value of that property?

If I'm understanding right, we all agree that would be a good idea to stop using font and just normalize only the 3 properties that —apparently— differ in browsers. Having something like this:

font-family: inherit || sans-serif;
font-size: inherit || ??;
line-height: normal; /* If indeed requires normalization */

Generally I would prefer an explicit value over inherit for these properties, but I'm not sure about font-size.

[thierryk]

To be honest, I don't like inherit. If normalize.css is about:

• Preserving useful defaults, unlike many CSS resets.
• Normalizing styles for a wide range of elements.
• Correcting bugs and common browser inconsistencies.

Then I think we should avoid using inherit because this value relates to styles set by authors instead of styles set by UAs. In other words, I think normalizes.css should style elements the same regardless of projects and inherit does not help to achieve that.

I understand that most authors expect to have these values inherited but I don't think this is the job of normalizes.css. In my opinion, people should use custom rules targeting form controls for this. normalizes.css should not become a "base"/opinionated style sheet.

I don't know. May be there should be a companion file, containing rules that do not belong to normalize.css but that are pretty much meant to be included in every project.

[patrickhlauke]

I would also agree that setting the normalization to line-height: normal would be good, as well as making font-family and font-size match up more (opinionatedly) with the main content/body styles.