The styling for the <kbd> tags is, as we all know, quite nice: Enter, e.g. However, these are too small in headings:

Saving files with CtrlS

Body text, with CtrlS again.

Note that the tags are the same size as in the body text, just bold. Inline code is handled better:

Saving files with Ctrl-S

Body text, with Ctrl-S again.

Here, the Ctrl-S looks more in line with its location (it's the right size), but of course inline code isn't the right tool for the job here.

The desired behavior would be something like this:

Desired behavior of <code><kbd></code> tags in headers

I used font-size: 16px; here; adjust to taste.


This can be solved with the following style rule:

kbd {
    font-size: 75% !important;

The !important is only needed to override the current font-size: 11px rule, and wouldn't be necessary if the original rule were to be revised.

(At first I tried removing the font-size: 11px rule entirely, but it was obviously put there for a reason, since normal-font-size <kbd> tags look terrible. 75% has the same, desired effect but doesn't use a constant value, so it works in headings too.)

Calling @IlmariKaronen to add this to SOUP. :)

| improve this answer | |
  • I'm back from vacation and doing SOUPy stuff again. Added to v1.29 devel branch, with credit to you. Thanks! (I did tweak the font size up slightly to 80%, which gives a calculated size of 11.2px for body text, and exactly 16px for level 1 headings.) – Ilmari Karonen Feb 26 '15 at 14:35
  • Ps. An interesting side effect of this change is that it makes nested <kbd> tags much less intrusive. – Ilmari Karonen Mar 2 '15 at 19:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .