chore: [IOAPPX-488] Increase title size in the HeaderFirstLevel (#415)

## Short description
This PR increases the size of the title in the `HeaderFirstLevel`

## List of changes proposed in this pull request
- Refactor `H2` and `H3` to allow/remove `Bold` weight
- Add `maxFontSizeMultiplier` to set a maximum size limit when larger
text is enabled
- Update `Typography` page in the example app

### Preview
<img
src="https://github.com/user-attachments/assets/7850c361-597d-41d5-abe9-ff7ca9467ac4"
width="320" />

## How to test
N/A

Author: dmnplb

example/src/pages/HeaderFirstLevel.tsx

@@ -3,7 +3,6 @@ import {
   Body,
   ButtonOutline,
   ButtonSolid,
-  H3,
   H6,
   HeaderActionProps,
   HeaderFirstLevel,
@@ -83,7 +82,7 @@ export const HeaderFirstLevelScreen = () => {
       header: () => (
         <HeaderFirstLevel
           ignoreSafeAreaMargin={alert !== undefined}
-          title={"Pagina"}
+          title={"Portafoglio"}
           actions={actionsConfiguration[actionsSize]}
         />
       )
@@ -98,8 +97,6 @@ export const HeaderFirstLevelScreen = () => {
       }}
       scrollEventThrottle={8}
     >
-      <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
-      <VSpacer />
       <ListItemHeader label="Header actions size" />
       <ListItemRadio
         value="No actions"

example/src/pages/Typography.tsx

@@ -116,6 +116,9 @@ export const H2Row = () => (
   <VStack space={4}>
     <H2>{getTitle("H2")}</H2>
     <H2 style={styles.distancedTitle}>{getLongerTitle("H2")}</H2>
+    <H2 style={styles.distancedTitle} weight="Bold">
+      Header H2 Bold
+    </H2>
   </VStack>
 );
 
@@ -126,7 +129,6 @@ export const H3Row = () => (
     <View style={{ backgroundColor: IOColors["grey-700"] }}>
       <H3 color={"white"}>Header H3</H3>
     </View>
-    <H3 weight="Bold">Header H3 Bold</H3>
   </HStack>
 );
 

src/components/layout/HeaderFirstLevel.tsx

@@ -23,7 +23,7 @@ import {
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HStack } from "../stack";
-import { H3 } from "../typography";
+import { H2 } from "../typography";
 import { HeaderActionProps } from "./common";
 
 type HeaderActionsProp =
@@ -125,14 +125,15 @@ export const HeaderFirstLevel = ({
 
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
-          <H3
+          <H2
             weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
             color={theme["textHeading-default"]}
+            maxFontSizeMultiplier={1.25}
           >
             {title}
-          </H3>
+          </H2>
         </View>
         <HStack space={16} style={{ flexShrink: 0 }}>
           {actions.map((action, index) => (

src/components/typography/H2.tsx

@@ -1,25 +1,32 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIONewTypeface, useIOTheme } from "../../core";
-import { IOFontSize } from "../../utils/fonts";
+import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
+type H2StyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
+};
+
 export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 34;
 
 /**
  * `H2` typographic style
  */
-export const H2 = forwardRef<View, TypographicStyleProps>(
-  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+export const H2 = forwardRef<View, H2StyleProps>(
+  (
+    { weight: customWeight, color: customColor, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
     const theme = useIOTheme();
     const { newTypefaceEnabled } = useIONewTypeface();
 
     const H2Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title1", // iOS only
       font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
-      weight: "Semibold",
+      weight: customWeight ?? "Semibold",
       size: h2FontSize,
       lineHeight: h2LineHeight,
       color: customColor ?? theme["textHeading-default"]

src/components/typography/H3.tsx

@@ -1,33 +1,26 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
 import { useIONewTypeface, useIOTheme } from "../../core";
-import { IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type H3StyleProps = TypographicStyleProps & {
-  weight?: Extract<IOFontWeight, "Semibold" | "Bold">;
-};
-
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
 
 /**
  * `H3` typographic style
  */
-export const H3 = forwardRef<View, H3StyleProps>(
-  (
-    { weight: customWeight, color: customColor, ...props },
-    ref?: ForwardedRef<View>
-  ) => {
+export const H3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
     const { newTypefaceEnabled } = useIONewTypeface();
 
     const H3Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title2", // iOS only
       font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
-      weight: customWeight ?? "Semibold",
+      weight: "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,
       color: customColor ?? theme["textHeading-default"]