How to sort font styles

4 replies
843 views

What is the algo for sorting these styles that Figma uses? In the font list they are returned with just names, and different fonts can get creative with naming their styles.

APIs

This topic has been closed for replies.

tank666Solution

fontWeight can be found at TextNode. That is, to get fontWeight, you need to load the font and create a TextNode.

figma.com

If the weight is the same, sort alphabetically.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

tank666

The fonts are sorted by font-weight.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Alex_FGAuthor

New Participant

The problem is that Figma fonts can have all kinds of styles that I don’t even know what their weight could be. What is 75 Bold? Is it bolder than Bold? Etc. Is there some kind of weight reference for this?

[
    "75 Bold",
    "??",
    "B",
    "Banner",
    "Banner Bold",
    "Banner Bold Italic",
    "Banner Italic",
    "Banner Semibold",
    "Banner Semibold Italic",
    "Black",
    "Black Italic",
    "Black-",
    "Black2",
    "Black3",
    "Block",
    "Bold",
    "Bold Condensed",
    "Bold Display",
    "Bold Extended",
    "Bold Extended Italic",
    "Bold Extended Oblique",
    "Bold Italic",
    "Bold Oblique",
    "Bold SemiCondensed",
    "Bold Slanted",
    "Bold Small",
    "Bold Text",
    "Bold-",
    "Bold2",
    "Bold3",
    "BoldItalic",
    "BoldOblique",
    "Book",
    "Condensed",
    "Condensed Black",
    "Condensed Black Italic",
    "Condensed Bold",
    "Condensed Bold Italic",
    "Condensed ExtraBold",
    "Condensed ExtraBold Italic",
    "Condensed ExtraLight",
    "Condensed ExtraLight Italic",
    "Condensed Italic",
    "Condensed Light",
    "Condensed Light Italic",
    "Condensed Medium",
    "Condensed Medium Italic",
    "Condensed Regular",
    "Condensed SemiBold",
    "Condensed SemiBold ",
    "Condensed SemiBold Italic",
    "Condensed Thin",
    "Condensed Thin Italic",
    "Default",
    "DemiBold",
    "DemiLight",
    "Display",
    "Display Black",
    "Display Black Italic",
    "Display Bold",
    "Display Bold Italic",
    "Display Condensed",
    "Display Condensed Black",
    "Display Condensed Black Italic",
    "Display Condensed Bold",
    "Display Condensed Bold Italic",
    "Display Condensed ExtraBold",
    "Display Condensed ExtraBold Italic",
    "Display Condensed ExtraLight",
    "Display Condensed ExtraLight Italic",
    "Display Condensed Italic",
    "Display Condensed Light",
    "Display Condensed Light Italic",
    "Display Condensed Medium",
    "Display Condensed Medium Italic",
    "Display Condensed SemiBold",
    "Display Condensed SemiBold Italic",
    "Display Condensed Thin",
    "Display Condensed Thin Italic",
    "Display ExtraBold",
    "Display ExtraBold Italic",
    "Display ExtraCondensed",
    "Display ExtraCondensed Black",
    "Display ExtraCondensed Black Italic",
    "Display ExtraCondensed Bold",
    "Display ExtraCondensed Bold Italic",
    "Display ExtraCondensed ExtraBold",
    "Display ExtraCondensed ExtraBold Italic",
    "Display ExtraCondensed ExtraLight",
    "Display ExtraCondensed ExtraLight Italic",
    "Display ExtraCondensed Italic",
    "Display ExtraCondensed Light",
    "Display ExtraCondensed Light Italic",
    "Display ExtraCondensed Medium",
    "Display ExtraCondensed Medium Italic",
    "Display ExtraCondensed SemiBold",
    "Display ExtraCondensed SemiBold Italic",
    "Display ExtraCondensed Thin",
    "Display ExtraCondensed Thin Italic",
    "Display ExtraLight",
    "Display ExtraLight Italic",
    "Display Italic",
    "Display Light",
    "Display Light Italic",
    "Display Medium",
    "Display Medium Italic",
    "Display Regular",
    "Display SemiBold",
    "Display SemiBold Italic",
    "Display SemiCondensed",
    "Display SemiCondensed Black",
    "Display SemiCondensed Black Italic",
    "Display SemiCondensed Bold",
    "Display SemiCondensed Bold Italic",
    "Display SemiCondensed ExtraBold",
    "Display SemiCondensed ExtraBold Italic",
    "Display SemiCondensed ExtraLight",
    "Display SemiCondensed ExtraLight Italic",
    "Display SemiCondensed Italic",
    "Display SemiCondensed Light",
    "Display SemiCondensed Light Italic",
    "Display SemiCondensed Medium",
    "Display SemiCondensed Medium Italic",
    "Display SemiCondensed SemiBold",
    "Display SemiCondensed SemiBold Italic",
    "Display SemiCondensed Thin",
    "Display SemiCondensed Thin Italic",
    "Display Semibold",
    "Display Semibold Italic",
    "Display Thin",
    "Display Thin Italic",
    "EB",
    "Expanded",
    "Expanded Black",
    "Expanded Bold",
    "Expanded ExtraBold",
    "Expanded ExtraLight",
    "Expanded Light",
    "Expanded Medium",
    "Expanded Regular",
    "Expanded SemiBold",
    "Expanded Thin",
    "Extended",
    "Extended Italic",
    "Extended Oblique",
    "Extra Bold",
    "Extra Bold Italic",
    "Extra Light",
    "Extra Light Italic",
    "ExtraBlack",
    "ExtraBlack Italic",
    "ExtraBold",
    "ExtraBold Italic",
    "ExtraCondensed",
    "ExtraCondensed Black",
    "ExtraCondensed Black Italic",
    "ExtraCondensed Bold",
    "ExtraCondensed Bold Italic",
    "ExtraCondensed ExtraBold",
    "ExtraCondensed ExtraBold Italic",
    "ExtraCondensed ExtraLight",
    "ExtraCondensed ExtraLight Italic",
    "ExtraCondensed Italic",
    "ExtraCondensed Light",
    "ExtraCondensed Light Italic",
    "ExtraCondensed Medium",
    "ExtraCondensed Medium Italic",
    "ExtraCondensed Regular",
    "ExtraCondensed SemiBold",
    "ExtraCondensed SemiBold Italic",
    "ExtraCondensed Thin",
    "ExtraCondensed Thin Italic",
    "ExtraExpanded",
    "ExtraExpanded Black",
    "ExtraExpanded Bold",
    "ExtraExpanded ExtraBold",
    "ExtraExpanded ExtraLight",
    "ExtraExpanded Light",
    "ExtraExpanded Medium",
    "ExtraExpanded Regular",
    "ExtraExpanded SemiBold",
    "ExtraLight",
    "ExtraLight Italic",
    "Extrabold",
    "Extrabold Extended",
    "Extrabold Extended Italic",
    "Extrabold Extended Oblique",
    "Extrabold Italic",
    "Extrabold Oblique",
    "Extralight",
    "Extralight Extended",
    "Extralight Extended Italic",
    "Extralight Extended Oblique",
    "Extralight Italic",
    "Extralight Oblique",
    "Hairline",
    "Hairline Italic",
    "Heading",
    "Heading Bold",
    "Heading Bold Italic",
    "Heading Italic",
    "Heading Semibold",
    "Heading Semibold Italic",
    "Heavy",
    "Heavy Extended",
    "Heavy Extended Italic",
    "Heavy Extended Oblique",
    "Heavy Italic",
    "Heavy Oblique",
    "Heavy-",
    "Heavy2",
    "Heavy3",
    "Italic",
    "L",
    "League Script",
    "Light",
    "Light Condensed",
    "Light Display",
    "Light Extended",
    "Light Extended Italic",
    "Light Extended Oblique",
    "Light Italic",
    "Light Oblique",
    "Light SemiCondensed",
    "Light Small",
    "Light Text",
    "Light-",
    "Light2",
    "Light3",
    "M",
    "MagerKursiv",
    "Medium",
    "Medium Extended",
    "Medium Extended Italic",
    "Medium Extended Oblique",
    "Medium Italic",
    "Medium Oblique",
    "Medium-",
    "Medium2",
    "Medium3",
    "Mono Casual",
    "Mono Casual Black",
    "Mono Casual Black Italic",
    "Mono Casual Bold",
    "Mono Casual Bold Italic",
    "Mono Casual ExtraBlack",
    "Mono Casual ExtraBlack Italic",
    "Mono Casual ExtraBold",
    "Mono Casual ExtraBold Italic",
    "Mono Casual Italic",
    "Mono Casual Light",
    "Mono Casual Light Italic",
    "Mono Casual Medium",
    "Mono Casual Medium Italic",
    "Mono Casual SemiBold",
    "Mono Casual SemiBold Italic",
    "Mono Linear",
    "Mono Linear Black",
    "Mono Linear Black Italic",
    "Mono Linear Bold",
    "Mono Linear Bold Italic",
    "Mono Linear ExtraBlack",
    "Mono Linear ExtraBlack Italic",
    "Mono Linear ExtraBold",
    "Mono Linear ExtraBold Italic",
    "Mono Linear Italic",
    "Mono Linear Light",
    "Mono Linear Light Italic",
    "Mono Linear Medium",
    "Mono Linear Medium Italic",
    "Mono Linear SemiBold",
    "Mono Linear SemiBold Italic",
    "Oblique",
    "One",
    "Regular",
    "Regular Display",
    "Regular Small",
    "Regular-",
    "Regular2",
    "Regular24",
    "Regular3",
    "Retina",
    "Sans Casual",
    "Sans Casual Black",
    "Sans Casual Black Italic",
    "Sans Casual Bold",
    "Sans Casual Bold Italic",
    "Sans Casual ExtraBlack",
    "Sans Casual ExtraBlack Italic",
    "Sans Casual ExtraBold",
    "Sans Casual ExtraBold Italic",
    "Sans Casual Italic",
    "Sans Casual Light",
    "Sans Casual Light Italic",
    "Sans Casual Medium",
    "Sans Casual Medium Italic",
    "Sans Casual SemiBold",
    "Sans Casual SemiBold Italic",
    "Sans Linear",
    "Sans Linear Black",
    "Sans Linear Black Italic",
    "Sans Linear Bold",
    "Sans Linear Bold Italic",
    "Sans Linear ExtraBlack",
    "Sans Linear ExtraBlack Italic",
    "Sans Linear ExtraBold",
    "Sans Linear ExtraBold Italic",
    "Sans Linear Italic",
    "Sans Linear Light",
    "Sans Linear Light Italic",
    "Sans Linear Medium",
    "Sans Linear Medium Italic",
    "Sans Linear SemiBold",
    "Sans Linear SemiBold Italic",
    "Semi Bold",
    "Semi Bold Italic",
    "SemiBold",
    "SemiBold Condensed",
    "SemiBold Italic",
    "SemiBold SemiCondensed",
    "SemiCondensed",
    "SemiCondensed Black",
    "SemiCondensed Black Italic",
    "SemiCondensed Bold",
    "SemiCondensed Bold Italic",
    "SemiCondensed ExtraBold",
    "SemiCondensed ExtraBold Italic",
    "SemiCondensed ExtraLight",
    "SemiCondensed ExtraLight Italic",
    "SemiCondensed Italic",
    "SemiCondensed Light",
    "SemiCondensed Light Italic",
    "SemiCondensed Medium",
    "SemiCondensed Medium Italic",
    "SemiCondensed Regular",
    "SemiCondensed SemiBold",
    "SemiCondensed SemiBold Italic",
    "SemiCondensed Thin",
    "SemiCondensed Thin Italic",
    "SemiExpanded",
    "SemiExpanded Black",
    "SemiExpanded Bold",
    "SemiExpanded ExtraBold",
    "SemiExpanded ExtraLight",
    "SemiExpanded Light",
    "SemiExpanded Medium",
    "SemiExpanded Regular",
    "SemiExpanded SemiBold",
    "SemiExpanded Thin",
    "SemiLight",
    "SemiLight Condensed",
    "SemiLight Italic",
    "SemiLight SemiCondensed",
    "Semibold",
    "Semibold Display",
    "Semibold Extended",
    "Semibold Extended Italic",
    "Semibold Extended Oblique",
    "Semibold Italic",
    "Semibold Oblique",
    "Semibold Small",
    "Semibold Text",
    "Semilight",
    "Semilight Display",
    "Semilight Italic",
    "Semilight Small",
    "Semilight Text",
    "Slanted",
    "Small",
    "Small Bold",
    "Small Bold Italic",
    "Small Italic",
    "Small Semibold",
    "Small Semibold Italic",
    "Solid",
    "Subheading",
    "Subheading Bold",
    "Subheading Bold Italic",
    "Subheading Italic",
    "Subheading Semibold",
    "Subheading Semibold Italic",
    "Text",
    "Text Bold",
    "Text Bold Italic",
    "Text Italic",
    "Text Semibold",
    "Text Semibold Italic",
    "Thin",
    "Thin Extended",
    "Thin Extended Italic",
    "Thin Extended Oblique",
    "Thin Italic",
    "Thin Oblique",
    "UltraCondensed",
    "UltraCondensed Black",
    "UltraCondensed Bold",
    "UltraCondensed ExtraBold",
    "UltraCondensed ExtraLight",
    "UltraCondensed Light",
    "UltraCondensed Medium",
    "UltraCondensed Regular",
    "UltraCondensed SemiBold",
    "UltraCondensed Thin",
    "UltraCondensed Thin Italic",
    "UltraExpanded",
    "UltraExpanded Black",
    "UltraExpanded Bold",
    "UltraExpanded ExtraBold",
    "UltraExpanded ExtraLight",
    "UltraExpanded Light",
    "UltraExpanded Medium",
    "UltraExpanded Regular",
    "UltraExpanded SemiBold",
    "UltraLight",
    "cmbx10",
    "cmex10",
    "cmmi10",
    "cmr10",
    "cmsy10",
    "cmti10",
    "vert"
]

tank666Solution

fontWeight can be found at TextNode. That is, to get fontWeight, you need to load the font and create a TextNode.

figma.com

If the weight is the same, sort alphabetically.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Alex_FGAuthor

New Participant

Thanks for the tip!

Sign up

Login with SSO

Login to the community

Login with SSO