3

I'm using the Roboto Family of fonts. In general, it fits perfectly to all my needs except one. The length difference between ndash and mdash is to small. It is a very important aspect, because as a part of our services - we are helping editors, proofreaders, writers and typeseters.

To fix the issue, we adjusted the font and we hosted it on our server. Unfortunatly, this has an significant impact on page loading and rendering speed (even the preloading the font is done).

I would like to switch into CDNJS version of the Roboto font and I'm wondering if there is a CSS or CSS+JS way to fix the issue. The idea is to select all the ndashes on the site and to shorten all of them with either JS or CSS, to be exactly in the middle of the length between dash and mdash. In the origin Roboto font ndash is twice so long as dash but mdash is just a little bit longer than ndash.

An alternative is, to replace all the ndashes with an ndash from another font. Any other ideas?

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
aztechowski
  • 113
  • 7
  • great question and great use case... but i almost didn't read it because it looks so dry for SO... – Sheraff Oct 25 '20 at 21:38

1 Answers1

2

You mention replacing the ndashes and mdashes from another font.

Have you considered using the CSS font-face unicode-range property?

If you have a font that has the sort of size dashes you want you could substitute those for the dashes in Roboto.

I couldn't immediately find a font that had sufficiently different dashes to the standard ones to demonstrate, but here's the code from MDN which substitutes the ampersand in Helvetica with the slightly more flamboyant one from Times New Roman. This method saves having to do anything to your actual text.

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;/* 2013-2014 ndash and mdash */
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14