Merge pull request #464 from UoA-eResearch/feature/update-typography

lugn621 · web-flow · commit a65c34ab0849 · 2025-10-24T14:13:25.000+13:00
Feature/update typography
diff --git a/research-hub-web/package-lock.json b/research-hub-web/package-lock.json
diff --git a/research-hub-web/package.json b/research-hub-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "research-hub-web",
-  "version": "2.8.12",
+  "version": "2.8.13",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
diff --git a/research-hub-web/src/Inter-Bold.otf b/research-hub-web/src/Inter-Bold.otf
diff --git a/research-hub-web/src/Inter-Italic.otf b/research-hub-web/src/Inter-Italic.otf
diff --git a/research-hub-web/src/Inter-Regular.otf b/research-hub-web/src/Inter-Regular.otf
diff --git a/research-hub-web/src/InterDisplay-SemiBold.woff2 b/research-hub-web/src/InterDisplay-SemiBold.woff2
diff --git a/research-hub-web/src/app/components/cards/cards-common.scss b/research-hub-web/src/app/components/cards/cards-common.scss
@@ -6,7 +6,7 @@
  */
 .card-label {
   color: rgb(255, 255, 255);
-  font-size: 14px;
+  font-size: 12px;
   font-weight: bold;
 }
 
@@ -21,7 +21,7 @@
   align-items: center;
   left: 0;
   top: 0;
-  padding: 0px 15px 3px;
+  padding: 3px 15px;
 }
 
 /**
@@ -37,6 +37,14 @@
   }
 }
 
+/**
+ * Mat Card Summary
+ */
+.card-summary {
+  line-height: 1.5;
+  font-size: 14px;
+}
+
 /**
  * Elevation
  */
diff --git a/research-hub-web/src/app/components/cards/contact-card/contact-card.component.scss b/research-hub-web/src/app/components/cards/contact-card/contact-card.component.scss
@@ -1,7 +1,8 @@
 @import "variables";
 
 .contact-card-summary {
-  font-size: 16px;
+  font-size: 14px;
+  line-height: 1.5;
   a {
     color: $light-blue;
     display: inline-block;
diff --git a/research-hub-web/src/app/components/cards/org-unit-card/org-unit-card.component.html b/research-hub-web/src/app/components/cards/org-unit-card/org-unit-card.component.html
@@ -14,7 +14,7 @@
   </mat-card-title>
 
   <mat-card-content>
-    <span>
+    <span class='card-summary'>
       <p style="word-wrap: break-word">{{ orgUnit.description }}</p>
     </span>
   </mat-card-content>
diff --git a/research-hub-web/src/app/components/home/banner-image/banner-image.component.scss b/research-hub-web/src/app/components/home/banner-image/banner-image.component.scss
@@ -37,6 +37,7 @@
       .page-title {
         margin: 0 auto;
         font-weight: lighter;
+        font-family: "Inter" !important;
         color: white !important;
         font-size: 48px;
         text-align: center;
diff --git a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.scss b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.scss
@@ -29,6 +29,7 @@
 
 .embedded-entry-block .mat-card-title span {
   font-size: 18px;
+  font-weight: bold;
   color: $dark-blue;
 }
 .embedded-entry-block .mat-card-title span:hover {
diff --git a/research-hub-web/src/assets/imgs/one-uoa-favicon.svg b/research-hub-web/src/assets/imgs/one-uoa-favicon.svg
@@ -0,0 +1,10 @@
+<svg width="127" height="145" viewBox="0 0 127 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2630_21360)">
+<path d="M31.26 10.05H31.13C30.08 10.05 27.28 10.02 23.69 12.37C21.59 13.74 21.03 14.03 17.72 14.03C16.83 14.03 16 14.37 15.38 15C14.76 15.62 14.41 16.45 14.4 17.34C14.4 17.51 14.41 17.67 14.42 17.84C14.46 18.42 14.51 19.07 14 20.08C13.69 20.71 13.38 21.27 13.09 21.82C12.59 22.76 12.12 23.64 11.61 24.77C11.14 25.84 10.96 26.47 11.07 26.65C11.1 26.69 11.14 26.72 11.2 26.72C11.42 26.72 11.64 26.34 11.97 25.77C12.18 25.41 12.41 25.01 12.7 24.61C13.78 23.08 14.46 22.44 15.55 21.58C16.16 21.16 18.46 19.88 22.34 21.34C23.88 21.92 25.2 22.41 26.31 24.14C26.92 25.13 26.84 26.39 26.67 27.27C26.46 28.34 26.03 29.25 25.8 29.6C25.48 30.09 24.82 30.39 23.85 30.5C23.73 30.51 23.54 30.52 23.35 30.53C23.05 30.54 22.74 30.56 22.55 30.6C22.26 30.66 21.91 30.83 21.92 31.37V31.45H34.55V31.38C34.48 30.65 33.92 30.54 33.47 30.46C33.42 30.45 33.36 30.44 33.31 30.43C33.32 30.05 33.44 27.6 34.7 25.46C35.17 24.67 35.62 24.19 36.1 23.68C36.29 23.48 36.49 23.27 36.69 23.04C38.11 21.61 38.88 19.71 38.88 17.7C38.88 13.51 35.47 10.09 31.27 10.09L31.26 10.05ZM27 30.37C27.1 30.04 27.53 28.72 28.23 27.35C28.73 26.37 29.57 25.3 29.72 25.11C30.43 25.26 31.08 25.67 31.57 26.25C32.06 26.84 32.33 27.57 32.33 28.29C32.33 28.81 32.21 29.32 31.97 29.78C31.97 29.78 31.67 30.37 31.03 30.37H27.01H27ZM69.52 10.05H69.39C68.34 10.05 65.54 10.02 61.95 12.37C59.85 13.74 59.29 14.03 55.98 14.03C55.09 14.03 54.26 14.37 53.64 15C53.02 15.62 52.67 16.45 52.66 17.34C52.66 17.51 52.66 17.67 52.68 17.84C52.72 18.42 52.77 19.07 52.26 20.08C51.95 20.71 51.64 21.27 51.35 21.82C50.85 22.76 50.38 23.64 49.87 24.77C49.4 25.84 49.22 26.47 49.33 26.65C49.36 26.69 49.4 26.72 49.46 26.72C49.68 26.72 49.9 26.34 50.23 25.77C50.44 25.41 50.67 25.01 50.95 24.61C52.03 23.08 52.71 22.44 53.8 21.58C54.41 21.16 56.71 19.88 60.59 21.34C62.13 21.92 63.45 22.41 64.55 24.14C65.16 25.13 65.08 26.39 64.91 27.27C64.7 28.34 64.27 29.25 64.04 29.6C63.72 30.09 63.06 30.39 62.09 30.5C61.97 30.51 61.78 30.52 61.59 30.53C61.29 30.54 60.98 30.56 60.79 30.6C60.5 30.66 60.15 30.83 60.16 31.37V31.45H72.79V31.38C72.72 30.65 72.16 30.54 71.71 30.46C71.66 30.45 71.6 30.44 71.55 30.43C71.56 30.05 71.68 27.6 72.94 25.46C73.41 24.67 73.86 24.19 74.34 23.68C74.53 23.48 74.73 23.27 74.93 23.04C76.35 21.61 77.12 19.71 77.12 17.7C77.12 13.51 73.71 10.09 69.51 10.09L69.52 10.05ZM65.26 30.37C65.36 30.04 65.79 28.72 66.49 27.35C66.99 26.37 67.83 25.3 67.98 25.11C68.69 25.26 69.34 25.67 69.83 26.25C70.32 26.84 70.59 27.57 70.59 28.29C70.59 28.81 70.47 29.32 70.23 29.78C70.23 29.78 69.93 30.37 69.29 30.37H65.27H65.26ZM107.79 10.05H107.66C106.61 10.05 103.81 10.02 100.22 12.37C98.12 13.74 97.56 14.03 94.25 14.03C93.36 14.03 92.53 14.37 91.91 15C91.29 15.62 90.94 16.45 90.93 17.34C90.93 17.51 90.94 17.67 90.95 17.84C90.99 18.42 91.04 19.07 90.53 20.08C90.22 20.71 89.91 21.27 89.62 21.82C89.12 22.76 88.65 23.64 88.14 24.77C87.67 25.84 87.49 26.47 87.6 26.65C87.63 26.69 87.67 26.72 87.73 26.72C87.95 26.72 88.17 26.34 88.5 25.77C88.71 25.41 88.94 25.01 89.22 24.61C90.3 23.08 90.97 22.44 92.07 21.58C92.68 21.16 94.98 19.88 98.86 21.34C100.4 21.92 101.72 22.41 102.82 24.14C103.43 25.13 103.35 26.39 103.18 27.27C102.97 28.34 102.54 29.25 102.31 29.6C101.99 30.09 101.33 30.39 100.36 30.5C100.24 30.51 100.05 30.52 99.86 30.53C99.56 30.54 99.25 30.56 99.06 30.6C98.77 30.66 98.42 30.83 98.43 31.37V31.45H111.06V31.38C110.99 30.65 110.43 30.54 109.98 30.46C109.93 30.45 109.87 30.44 109.82 30.43C109.83 30.05 109.95 27.6 111.21 25.46C111.68 24.67 112.13 24.19 112.61 23.68C112.8 23.48 113 23.27 113.2 23.04C114.62 21.61 115.39 19.71 115.39 17.7C115.39 13.51 111.98 10.09 107.78 10.09L107.79 10.05ZM103.53 30.37C103.63 30.04 104.06 28.72 104.76 27.35C105.26 26.37 106.1 25.3 106.25 25.11C106.96 25.26 107.61 25.67 108.1 26.25C108.59 26.84 108.86 27.57 108.86 28.29C108.86 28.81 108.74 29.32 108.5 29.78C108.5 29.78 108.2 30.37 107.56 30.37H103.54H103.53ZM63.22 0H0V63.79C0 69.07 2.08 82.97 9.96 97.85C20.88 118.47 38.62 134.04 62.7 144.11L63.22 144.33L63.74 144.11C87.82 134.03 105.57 118.47 116.48 97.85C124.36 82.97 126.44 69.07 126.44 63.79V0H63.22ZM69.59 132.39L63.22 127.76L56.85 132.39L59.28 124.9L52.91 120.27H60.78L63.21 112.78L65.64 120.27H73.51L67.14 124.9L69.57 132.39H69.59ZM99.75 100.65L96.43 102.35C93.52 103.84 91.14 104.48 88.48 104.48C85.54 104.48 82.53 103.62 78.98 101.78C77.53 101.03 76.02 100.64 74.48 100.64C72.17 100.64 69.79 101.52 67.94 103.06L67.79 103.18C68.65 103.49 69.27 104.32 69.27 105.28C69.27 106.51 68.27 107.52 67.03 107.52H59.4C58.17 107.52 57.16 106.52 57.16 105.28C57.16 104.31 57.78 103.49 58.64 103.18L58.49 103.06C56.64 101.52 54.26 100.64 51.95 100.64C50.42 100.64 48.9 101.02 47.45 101.78C43.91 103.62 40.89 104.48 37.95 104.48C35.29 104.48 32.91 103.84 30 102.35L26.68 100.65V73.48L28.1 72.79V99.78L30.65 101.09C33.35 102.47 35.53 103.06 37.95 103.06C40.65 103.06 43.46 102.25 46.79 100.52C48.44 99.66 50.18 99.23 51.94 99.23C54.57 99.23 57.29 100.23 59.39 101.98L60.69 103.06L62.39 104.48H59.39C58.94 104.48 58.57 104.85 58.57 105.3C58.57 105.75 58.94 106.12 59.39 106.12H67.02C67.47 106.12 67.84 105.75 67.84 105.3C67.84 104.85 67.47 104.48 67.02 104.48H64.02L65.72 103.06L67.02 101.98C69.12 100.23 71.83 99.23 74.47 99.23C76.23 99.23 77.97 99.67 79.62 100.52C82.95 102.25 85.76 103.06 88.46 103.06C90.88 103.06 93.06 102.47 95.76 101.09L98.31 99.78V72.79L99.73 73.48V100.65H99.75ZM32.05 98.37C34.29 99.52 36.05 100.01 37.96 100.01C40.15 100.01 42.51 99.31 45.4 97.82C47.49 96.73 49.7 96.18 51.96 96.18C55.3 96.18 58.72 97.44 61.36 99.63L62.41 100.5V102.35L60.46 100.72C58.07 98.73 54.98 97.59 51.97 97.59C49.94 97.59 47.95 98.09 46.06 99.07C42.97 100.68 40.4 101.42 37.97 101.42C35.83 101.42 33.87 100.88 31.41 99.63L29.75 98.78V71.99L31.17 71.3V97.92L32.06 98.38L32.05 98.37ZM51.95 94.54C49.58 94.54 47.09 95.09 44.64 96.36C39.3 99.13 36.4 98.76 32.8 96.91V70.5C37.36 71.55 40.96 71.13 45.56 69.18C51.13 66.82 56.8 67.57 62.4 71.41V98.37C59.69 96.12 55.98 94.54 51.95 94.54ZM42.12 56.19L44.55 63.68L38.18 59.05L31.81 63.68L34.24 56.19L27.87 51.56H35.74L38.17 44.07L40.6 51.56H48.47L42.1 56.19H42.12ZM94.62 63.68L88.25 59.05L81.88 63.68L84.31 56.19L77.94 51.56H85.81L88.24 44.07L90.67 51.56H98.54L92.17 56.19L94.6 63.68H94.62ZM80.88 69.18C85.49 71.13 89.09 71.56 93.64 70.5V96.91C90.04 98.75 87.14 99.13 81.8 96.36C79.34 95.08 76.86 94.54 74.49 94.54C70.46 94.54 66.75 96.12 64.04 98.37V71.41C69.64 67.57 75.31 66.82 80.88 69.18ZM65.08 99.63C67.72 97.44 71.14 96.18 74.48 96.18C76.74 96.18 78.95 96.73 81.04 97.82C83.92 99.32 86.29 100.01 88.48 100.01C90.38 100.01 92.15 99.52 94.39 98.37L95.28 97.91V71.29L96.7 71.98V98.77L95.04 99.62C92.59 100.88 90.63 101.41 88.48 101.41C86.05 101.41 83.48 100.66 80.39 99.06C78.5 98.08 76.51 97.58 74.48 97.58C71.47 97.58 68.37 98.72 65.99 100.71L64.04 102.34V100.49L65.09 99.62L65.08 99.63ZM123.67 37.9C113.6 37.9 113.61 43.17 103.54 43.17C93.47 43.17 93.49 37.75 83.41 37.75C73.33 37.75 73.29 43.17 63.22 43.17C53.15 43.17 53.1 37.75 43.03 37.75C32.96 37.75 32.98 43.17 22.9 43.17C12.82 43.17 12.84 37.9 2.77 37.9V2.77H123.67V37.9Z" fill="#0C0C48"/>
+</g>
+<defs>
+<clipPath id="clip0_2630_21360">
+<rect width="126.44" height="144.34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/research-hub-web/src/index.html b/research-hub-web/src/index.html
@@ -7,7 +7,7 @@
     <base href="/">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="./assets/imgs/favicon.png?v=2">
+    <link rel="icon" href="./assets/imgs/one-uoa-favicon.svg?v=2">
     <link rel="apple-touch-icon" href="./assets/icons/icon-192x192_apple.png">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
diff --git a/research-hub-web/src/partial-styles/_styles-common.scss b/research-hub-web/src/partial-styles/_styles-common.scss
@@ -34,6 +34,6 @@
 }
 
 .card-summary {
-  font-size: 16px;
+  font-size: 14px;
   color: $color-icon;
 }
diff --git a/research-hub-web/src/partial-styles/_variables.scss b/research-hub-web/src/partial-styles/_variables.scss
@@ -125,7 +125,7 @@ $color-guide-tile-bg: $dark-blue;
 * All other text and headers to be updated to Inter Font
 */
 
-$font-family: "National";
+$font-family: "Inter";
 
 $body-light-bg-font-color: black;
 $link-light-bg-color: $light-blue;
diff --git a/research-hub-web/src/styles.scss b/research-hub-web/src/styles.scss
@@ -128,6 +128,7 @@ h4 {
 p {
   color: $body-grey;
   font-family: $font-family;
+  line-height: 1.5;
 }
 a {
   text-decoration: none;
@@ -195,14 +196,14 @@ mat-card.mat-card {
 
 app-search-filters {
   div.mat-list-text {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: normal;
     white-space: normal;
     line-height: 24px;
   }
   mat-tab-header {
     .mat-tab-label-content {
-      font-size: 16px;
+      font-size: 14px;
       font-weight: normal;
       color: black;
     }
@@ -279,7 +280,7 @@ mat-option.search-autocomplete-options .mat-option-text {
  */
 h1.content-title {
   color: $dark-blue;
-  font-size: 52px;
+  font-size: 48px;
   font-weight: bold;
   line-height: 110%;
 }
@@ -308,15 +309,18 @@ h2.maori-proverb {
  * Card Text
  */
 .card-title {
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: bold;
 }
 
 /**
  * Custom Button Styles
  */
 .standard-button {
   color: white !important;
-  padding-bottom: 2.4px !important;
+  // padding-bottom: 2.4px !important;
+  padding: .6em 2em !important;
+  font-weight: bold;
   border: 3px solid $dark-blue !important;
   border-radius: 50px !important;
   background-color: $dark-blue !important;
@@ -383,9 +387,9 @@ h2.maori-proverb {
     }
   }
   > p {
-    font-size: 16px;
+    font-size: 14px;
     @include size(medium) {
-      font-size: 20px;
+      font-size: 18px;
     }
   }
 }
diff --git a/research-hub-web/src/typography.scss b/research-hub-web/src/typography.scss
@@ -126,6 +126,29 @@
   font-style: italic;
 }
 
+@font-face {
+  font-family: "Inter";
+  src: url('Inter-Regular.otf') format('otf');
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url('Inter-Bold.otf') format('otf');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url('Inter-Italic.otf') format('otf');
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Inter Display";
+  src: url('InterDisplay-SemiBold.woff2') format('woff2');
+  font-weight: bold;
+}
+
 html,
 body,
 span,
@@ -139,7 +162,7 @@ h6,
 p,
 ion-item,
 ion-title {
-  font-family: "National" !important;
+  font-family: "Inter" !important;
   // white-space: normal;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "research-hub-web",`
`3`		`- "version": "2.8.12",`
	`3`	`+ "version": "2.8.13",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"ng": "ng",`