25

Font size naming convention

8 months ago from

Whenever I'm working on a new design system I'm always torn between the most intuitive naming convention for typography scaling. Because we have moved away from the age of hard coded html we don't always need to refer to headings as h1 or h2, and if we don't, what names do we use when designers and developers talk to each other?

Examples:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph

Title

Subtitle

Heading

Subheading

Body

Jumbo

Huge

Extra Large

Large

Medium

What naming do you find the most intuitive, and which other ones do you use yourself?

17 comments

  • Zhaoli Jin, 7 months ago

    [Heading|body|caption] x [tshirt sizing like xs/s/m/l/xl/xxl]

    Setting a default size based on function, and being flexible for different hierarchy are both important. That's why I came up with this naming: "m" for default, and other for adjustment.

    Additionally I found people have different definition about "caption" and "subtitle". So I removed "subtitle". (I see caption a must-have to prevent people from using too-small body text)

    5 points
    • Ed P, 7 months ago

      What's nice about the shirt sizing system is that it also works for device sizes, paddings and margins. For example:

      S / M / L (being mobile tablet and desktop)

      XS / S / M / L / XL / XXL (being 4,8,16,32,64,128px spacing)

      S / M / L / XL / XXL / XXXL (being 12,16,24,32,40,48px type)

      3 points
      • Zhaoli Jin, 7 months ago

        Yes indeed. Shirt sizing system is scalable(to some extent), easy to understand and can tell default option. I used it in other foundation elements, too

        0 points
      • Scott Gamble, 6 months ago

        I almost always use this method. i set my main font size as either m or main. and then every size up or down from there is l or s with the number of steps being the number of x's before the size denotation. The system is usually also some sort of modular scale, and I never want to actually think about what the next size up is.

        What's great about this, is if I want to add a new size above or below what I already have, it's got a SUPER intuitive naming convention, and often the scaling system dictates what that number should be.

        I therefore end up with a chain of classes/scss variables along the lines of:

        font-xxs => font-xs => font-s => font-m => font-l => font-xl => font-xxl

        I've translated this to spacing, color tints and shades, content widths, you name it. It works like a dream, and it's really easy to use in conversation between designers and developers.

        Additionally, I tie these sizes to semantic names. So h1-h6 will run through the chain of sizes, with body copy and p tags and h4's usually using the main value.

        1 point
  • Radley MarxRadley Marx, 7 months ago

    I design to the platform, so H1-H6 for web / Android and Title1, Title2, etc for iOS & Mac. This way developers can take advantage of native components.

    2 points
  • iterati designiterati design, 7 months ago

    I always felt like H1-6 were really a web thing. Size doesn't always convey the hierarchy. For example, you could have an uppercase group/category title, like on the sidebar here on DN to the right where it says "ON THE JOB BOARD". It's only 12px compared to 14px body text size.

    All in all, I'm using title/subtitle/heading/subheading/body with a couple 'functional' classes.

    2 points
    • Ed P, 6 months ago

      This always seemed like the better option as context provides clarity, especially when others pick up the design work. The only issue is when you are dealing with 4+ headings it's difficult to name them both describing their use and in ascending/descending order without attaching numbers at the end.

      1 point
  • Fri RasyidiFri Rasyidi, 6 months ago

    I'm using a mix of Title and size, usually like this: Title 1, 2, 3 (sometimes use more when needed) and then body size with multiple different t-shirt sizes: X-Large, Large, Regular, Small, Micro. Sometimes I also throw in 'functional' classes when needed.

    I like this approach because it's simple, help us think about information hierarchy and allow us to be versatile when creating interface elements at the same time.

    1 point
  • Stefano TirloniStefano Tirloni, 7 months ago

    I think Heading 1Heading 2 ..Heading 6 don't scale.

    Will be better to have at least numbers with 2-3 digits like Heading 100 so if at some point you need something in between Heading 100 and Heading 200 you can do Heading 150

    1 point
  • Ryan Parag, 6 months ago

    Every team/designer has their preferred methodology for doing this in a way that best suits their work styles and product.

    While some design systems still employ the web element naming convention, others (like https://evergreen.segment.com/components/typography) use simple scales prefixed with the generic function of that text - which may help for designing between web and native too.

    1 point
  • Richard Bude, 6 months ago

    For the design system I'm currently building/working from... Hero, Title, Subtitle, Body, Small.

    Think I might change it to XL, L, M, S, XS.

    0 points
  • Amazing RandoAmazing Rando, 7 months ago

    I divorce meaning from the sizes and just use "Modular Scale N".

    Modular Scale

    0 points
    • Ed P, 7 months ago

      I guess just Size 0.5 / 1 / 2 / 3 / 4 / 5 / 6 etc. can also work as labels

      1 point
      • Matthew O'ConnorMatthew O'Connor, 6 months ago

        We use a type scale like the one above, with a T-Shirt naming convention.

        Heading / 800 / 5XL (62)

        This is an example of our largest, heaviest, title in Figma.

        The first prop can either be Heading or Paragraph.

        Then Headings have either 800 or 600 weight (Paragraphs have 600, 500, 400).

        And the last bit is the Size. It used to just say the T-Shirt size, but we added the actual size in brackets for quicker grabbing.

        0 points
    • Connor Lowe, 6 months ago

      We’re using the same thing (with a different scale) and it’s been great. Really versatile. Also, for us the ‘0’ represents the base size, so we try to keep everything balanced around 0. I see this as a benefit from the t-shirt sizing, which has no opinion as to how the sizes should be used.

      0 points
  • Alex Canning, 7 months ago

    We're following an approach similar to this https://www.tes.com/styleguide/core/typography/ where the font size and weight naming is separated from specific HTML elements. This means you can specify any font size or weight (or any other property you can think of) for any element as appropriate, while also keeping a human-readable system.

    0 points