proportional old style figures. (typography)

[fernandol97]

Hey,
is it possible to use the proportional old style figures in a typeface for numbers, if so how do I activate this feature?

Screen shot of the numbers with "proportional old style figures" turned on in my figma.

Many thanks

[Richard]

Dear @fernandol97

It should be possible, It may require you to use the open-type font format. .otf loaded into "text Formats"

https://www.quackit.com/css/css3/properties/css_font-variant-numeric.cfm

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

---

Best wishes 🌝
Richard

[fernandol97]

@Richard Thanks for getting back to me! could you share any guidance on how i activate that style of numbers on the phone number here for example? i am pretty new to the code side of things. thanks! https://www.ianadam-smith.co.uk/infooffgreen/

[Richard]

Dear @fernandol97

If you wish to apply old-style numbering to your whole webpage then you can always add the following code into > Lay Options > Custom CSS & HTML > Custom CSS or via > Customize > CSS

body{
    font-variant-numeric: oldstyle-nums;
}

Result:

Sorry @fernandol97 i realise now coming back to this thread, that font-variant-numeric is built-in since css3 and does not require font-variant to be applied within CSS of typeface!

https://www.quackit.com/css/css3/properties/css_font-variant-numeric.cfm

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

https://laytheme.com/documentation.html#custom-css-styling

---

Best wishes @fernandol97 & talk soon, let me know if you have trouble with the code and i can help 🌝

Richard

[fernandol97]

Hey Richard, Hope you are well. been a few years since I started this thread.

Starting up this thread again as I never figured this out. I am working with the same client and hoping to have certain lines of text set to Small Caps and numbers set to old style as seen here in my Figma design. im clueless when it comes to CCS was wondering if its possible to do via the type styles.

I should be going into the build phase in a few weeks time in lay theme and hoping I can figure it out. Thanks !

[arminunruh]

hey if you create a textformat, you will see it says :

html class: _MyFormat

Enter the custom css in "lay options" -> "custom css & html":

._MyFormat{
font-variant-numeric: oldstyle-nums;
}

you could talk to the font creator / distributor and ask them what kind of css to use to have those styles

or as i said in my other post you may be able to get fonts that ONLY have these old numbers or old caps. then create textformats that use those fonts

[fernandol97]

@arminunruh Wow my first ever CSS accomplishment, thank you man!