Repository: Sage/carbon (ts)

Issue:
Typography style 'Segment Sub-header' line height issue
### Current behaviour

The typography style 'Segment Sub-header' is 16px medium (700) weight text and has 31px line height. Is the line height an oversight or is there a particular reason for the 31px?
![typography-segment-subheader-carbon](https://github.com/Sage/carbon/assets/82100553/69607ff2-06cb-49ed-9aad-5b398c0f7cc5)


### Expected behaviour

The Design System (via Figma) defines the line height to be 24px, which looks about right.
![typography-segment-subheader-design-system](https://github.com/Sage/carbon/assets/82100553/dc73ed5a-c7b2-4831-9a6e-bb47e2e7a3de)


### CodeSandbox or Storybook URL

https://carbon.sage.com/?path=/docs/typography--variants-story

### JIRA Ticket (Sage Only)

_No response_

### Suggested Solution

Note from Daniel Dipper in the Slack Carbon channel:

It looks like the line height value we have is the same value we were given in 2020 when Typography was first created. We followed these specs here. I believe all we require is an updated spec from the DS, so that we can update our component with the new values Typography requires.

### Carbon Version

Latest

### Design Tokens Version

N/A

### What browsers are you seeing the problem on?

Chrome

### What Operating System are you seeing the problem on?

MacOS

### Anything else we should know?

I'm hoping this is an oversight but there may have been a specific reason for the 31px line-height in a particular case in a particular product. 

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
feat(typography): update line heights to align with DS
### Proposed behaviour

update all typography elements with the correct line heights as per the DS

fix #6335

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

### Current behaviour

many line heights are incorrect/outdated

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

Typography styling values need to be cross referenced with the Design System to ensure they're correct

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->


Patch:
diff --git a/src/components/typography/typography.pw.tsx b/src/components/typography/typography.pw.tsx
index 3c4c48f44..87fec4ef5 100644
--- a/src/components/typography/typography.pw.tsx
+++ b/src/components/typography/typography.pw.tsx
@@ -91,23 +91,27 @@ const getLineHeight = (variant: VariantTypes) => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":
diff --git a/src/components/typography/typography.style.ts b/src/components/typography/typography.style.ts
index 84a4452ad..d28751be9 100644
--- a/src/components/typography/typography.style.ts
+++ b/src/components/typography/typography.style.ts
@@ -59,23 +59,27 @@ const getLineHeight = (variant?: VariantTypes) => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":


Test patch:
diff --git a/src/components/typography/typography.test.tsx b/src/components/typography/typography.test.tsx
index 9bd15b0d0..76a880421 100644
--- a/src/components/typography/typography.test.tsx
+++ b/src/components/typography/typography.test.tsx
@@ -34,7 +34,7 @@ test("should render with expected styles when variant is 'h1'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "24px",
-    lineHeight: "31px",
+    lineHeight: "30px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -47,7 +47,7 @@ test("should render with expected styles when variant is 'h2'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "22px",
-    lineHeight: "29px",
+    lineHeight: "27.5px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",
@@ -60,7 +60,7 @@ test("should render with expected styles when variant is 'h3'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "20px",
-    lineHeight: "26px",
+    lineHeight: "25px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",
@@ -73,7 +73,7 @@ test("should render with expected styles when variant is 'h4'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "18px",
-    lineHeight: "23px",
+    lineHeight: "22.5px",
     fontWeight: "400",
     textTransform: "none",
     textDecoration: "none",
@@ -86,7 +86,7 @@ test("should render with expected styles when variant is 'h5'", () => {
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "16px",
-    lineHeight: "21px",
+    lineHeight: "20px",
     fontWeight: "400",
     textTransform: "none",
     textDecoration: "none",
@@ -99,7 +99,7 @@ test("should render with expected styles when variant is 'segment-header'", () =
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "20px",
-    lineHeight: "26px",
+    lineHeight: "25px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -112,7 +112,7 @@ test("should render with expected styles when variant is 'segment-header-small'"
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "18px",
-    lineHeight: "23px",
+    lineHeight: "22.5px",
     fontWeight: "700",
     textTransform: "none",
     textDecoration: "none",
@@ -125,7 +125,7 @@ test("should render with expected styles when variant is 'segment-subheader'", (
 
   expect(screen.getByText("Test")).toHaveStyle({
     fontSize: "16px",
-    lineHeight: "31px",
+    lineHeight: "24px",
     fontWeight: "500",
     textTransform: "none",
     textDecoration: "none",