nasa / earthdata-search

Earthdata Search is a web application developed by NASA EOSDIS to enable data discovery, search, comparison, visualization, and access across EOSDIS' Earth Science data holdings.
https://search.earthdata.nasa.gov
Other
743 stars 221 forks source link

EDSC-4072: Update typography to match look and feel toolkit #1792

Closed rushgeo closed 1 month ago

rushgeo commented 1 month ago

Overview

What is the feature?

Update typography.

What is the Solution?

Overrode the default font families from Bootstrap with Public Sans for body text, Inter for headings, and DM Mono for monospaced text.

Updated the logo text to better match the example from the Figma render we received.

Followup on EDSC-4073: included a fix for disabling underlines for DOI badge links.

What areas of the application does this impact?

Displayed text.

Testing

Reproduction steps

The body and heading text is very similar to the existing fonts from Bootstrap, at least on our Mac developer machines. The easiest way to verify the fonts have been set as intended is to use the web inspector to check the applied styles for various elements. You can also use an identical URL for the dev and PROD instances of EDSC and toggle back and forth between them.

Currently, the only monospace font usage is in the Download Script panel. Headings and body text can be checked on any page. The app logo text should be in Inter, the primary heading font.

Attachments

App Logo Text (Inter)

Before

image

After

image

In addition to the font-family, this PR changes the font-size (smaller), letter-spacing (none), and transparency on the letters "EARTH" (none).

Headings (Inter)

Before

image

After

image

Body Text (Public Sans)

Before

image

After

image

Download Script Panel (DM Mono)

Before

image

After

image

Checklist

codecov[bot] commented 1 month ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 93.27%. Comparing base (619d533) to head (8fb4afc). Report is 1 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #1792 +/- ## ======================================= Coverage 93.27% 93.27% ======================================= Files 749 749 Lines 18208 18208 Branches 4687 4704 +17 ======================================= Hits 16983 16983 + Misses 1178 1141 -37 - Partials 47 84 +37 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.