Aligning font-variant: smallcaps with other elements

Question

I am having a bit of an issue with aligning elements vertically, as can be seen in the picture:

Namely, when font-variant: smallcaps is in effect, the span containing the text is no longer "centered" with the icon beside it, this is more apparent the bigger the "font" due to icon being a sized by the font-size.

I tried converting the span to a display:block element but couldn't manage to get it to work with vertical-align: middle, i tried turning it into display: flex and using align-items: center. No success, seems that only the display is "out of touch" while internally the text is properly sized. How would you fix this?

Fiddle: https://jsfiddle.net/1nzhgymf/

.menu-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  width: 100%;
  height: 2.8em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;

  flex-grow: 0;
  flex-shrink: 0;

  padding: 0.4em;
}

 .icon {
    min-width: 1em;
    min-height: 1em;
    background: red;
      margin-right: 0.4em;
  }

<div>
  <a class="menu-item">
    <div class="icon"></div>
    <span>Example</span>
  </a>
  <a class="menu-item" style="font-variant: all-small-caps">
    <div class="icon"></div>
    <span>Example</span>
  </a>
</div>

Can you create [a minimal example](https://stackoverflow.com/help/minimal-reproducible-example)? Thanks :) — Rayees AC, Sep 23 '20 at 09:20
I thought this is simple enough not to need one, but ok. Its gonna take some time, I'll see what i can do on fiddlejs — Dellirium, Sep 23 '20 at 09:25
There, added the example code. Since the whole thing is written in react with icons being custom components, scalable svg and whatnot, i simplified it to fit here, but essentially its the same thing. Can also check on the fiddle link. Using different font makes it more apparent as you can see in the picture i posted, but i dont have this font on stackoverflow — Dellirium, Sep 23 '20 at 09:34

A Haworth · Accepted Answer · 2020-09-23T16:17:39.353

1

The initial attempt at an answer here incorrectly concluded that the em size of a font was affected by all-small-caps in CSS font-variant. This is not so (and certainly should not be, an em being fixed for a font/font size) but I keep this answer here rather than deleting it because the questioner has made some useful comments.

Here is a further attempt at an explanation:

The problem as stated was an issue with aligning elements vertically. An example was given of an all uppercase word appearing to align differently from one which was set at all-small-caps. In the screenshot below you can see variations on this - with a line which is all lowercase or all small caps seeming to be further down than the uppercase example.

In some sense this is true - in the uppercase example the mid line goes through the middle of the uppercase E and X which makes it balanced about the line. In the all-small-caps example though the capitals' centres have dropped below the mid line. The final line in the image shows why this is necessary - mixed text would otherwise be waving up and down.

edited Sep 23 '20 at 16:17

answered Sep 23 '20 at 09:53

A Haworth

30,908
4
11
14

Problem is, when you use `smallcaps` instead of `all-small-caps` then the `text-transform: uppercase` takes precedence and you might as well not even have the font variant there at all, because its then simply an uppercase. I want to have small caps, weather `all-small-caps` or `small-caps` doesn't matter when you remove the `text-transform: uppercase` and instead write everything in lowcase letters in HTML, problem remains :S – Dellirium Sep 23 '20 at 10:44
https://jsfiddle.net/rLy3dfvp/ check this one out for clarification. I think you are onto something though, apparently even the normal one, without any `font-variant` is not cenetered when it isn't in caps, so it is probably not an issue of `font-variant` at all, rather text not being aligned to begin with, in case of lowercase letters. Rather it "centers" on uppercase. So, how does one CENTER on lowercase letters, regardless of what transformation? – Dellirium Sep 23 '20 at 10:49
I think I'm misunderstanding what you wanted, sorry. Vertical centring - yes a tricky one. Do all fonts have a baseline - which very often (normally, even) uppercase letters sit on or is the centre of an x taken as the central point vertically or.. I'm going to phone a typographer because I can't find this defined anywhere, but it must be. Do you know? – A Haworth Sep 23 '20 at 11:09
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align This one is very.... interesting to say the least, learned a lot today, including HOW to avoid it. Awesome reading material. Everything i thought i knew was wrong :D – Dellirium Sep 23 '20 at 11:29
Your link, that and a call I've just had with a professional typographer who has done loads with CSS & still didn't absolutely know where the vertical mid-point may be makes it OK for us to be struggling. My contact is meeting with a CSS/typography expert this afternoon and will contact me back if anything useful. He was very surprised that all-small-caps changed the em size, it should be immutable for any font. He avoids small caps because on many fonts they don't correspond code-wise to their peers (small cap A not giving the same code as normal A) making sites inaccessible to screenreaders – A Haworth Sep 23 '20 at 11:49
From that article i'd gather that EM does not change with `small-caps` but rather the `line-height` does. He specifically says that `em = font-size` and as such for all measurements it doesn't matter what you use. However that is not what gets **rendered**, or rather how "big" the size will be, because that is not based on `font-size` rather on `line-height` which is very weird. I just wanna underline that `all-small-caps` in fact DOES NOT change the `em` size, in only changes the rendered size, so don't make your typographer confused pls, I feel so bad now :S – Dellirium Sep 23 '20 at 14:17
Thanks, it was my fault for jumping to conclusions. I'll edit the 'answer' which isn't an answer to your problem but it might help someone if I include a few pictures of what happens. I suppose in the end the system does its best on deciding how to align text, it just looks weird with only small caps versus only caps versus only lowercase – A Haworth Sep 23 '20 at 14:50
So is the only answer to use normal uppercase but in a smaller font if required, just to get a 'balanced' look on the vertical alignment? – A Haworth Sep 23 '20 at 16:29
It is not the only way, providing you use CSS precompilers and are willing to do some work. That article I linked has some useful "methods" of solving it when you know the font's exact values but it is waaaaaaaaaaaaay out of the scope of the question. It does however provide a super accurate way of doing things, which works great. I solved the way you suggested in that last comment by using a `smallcaps` class with `text-transform: uppercase` and fiddled around the modified `em` value by changing the height/width value of the icon that has a parent class of `smallcaps`. – Dellirium Sep 28 '20 at 05:41
If i needed this for more then just menu items though, i'd definitively go with what that article suggests, but until the need arises ill stick to this because it serves a purpose and we have a deadline. Thanks for all the effort. Your modified answer now reflects the basis of the problem and if people are interested in more they can look at that link, so i accepted it as correct. – Dellirium Sep 28 '20 at 05:42

Aligning font-variant: smallcaps with other elements

1 Answers1