@OskarGrosser
@fumzy123
Submitted
@OskarGrosser
Posted
The result looks great, you really improved on the design!
You are asking about typography, or rather when the heading elements (h1-h6) should be used. These things are not related! Typography is a stylistic concern, use CSS for this. To describe your content, use HTML. (Read more about Separation of Concerns and Semantic HTML.)
Heading elements describe their respective section; this is content. "Your Result" would be a good heading for the whole component. Similarly, "Summary" would be a good subheading. Therefore, the subheading should be one heading level higher (say, if "Your result" is h1, "Summary" should be h2). You can read more about headings on MDN or on web.dev.
You can argue that "Reaction", "Memory", etc. may be headings, in the same way I am arguing they are just labels for their respective scores. My argument for them being labels is: A document outline (e.g. a table of contents) wouldn't benefit from these being headings.
Unfortunately, there is no generic heading with no level. For that reason I would design components as if they are the only page content, like in your HTML. Those pages can always be embedded through iframe elements.
As for your images: It is always good to consider writing alternative text (its alt value), and in most cases it should actually have text. But in this case, the images for "Reaction", etc. are purely supplemental; their surrounding content wouldn't suffer if they were missing. In fact, their alt value is exactly the same as the immediately following word. For such cases, the HTML specification recommends using an empty alt value.
Regarding typography: Font, weight, style, size, color, etc. should all be set through CSS, not through HTML elements. What typography to use on a page should be considered on a case-by-case basis. A reputable news site may want to use a serif font on a light theme, whereas a playful coding site may want to use a monospace font on a dark theme.
You asked about typography in relation to headings, so I'll assume you meant "what heading for what size": In addition to "typography through CSS", a heading's level may be conveyed by more than just its size; it may be conveyed through color, font, weight, surrounding symbols or whitespace, or more.
Your CSS is separated very cleanly; a global stylesheet and a component-specific stylesheet. However, your style.css would likely be considered an anti-pattern: It requires the browser to follow one link, only to follow more links. The document has a head section, specifically for metadata such as stylesheets; there is no reason for your indirection.
Also, you can separate your component-specific CSS from the rest of the page by using Web Components, more specifically a Shadow DOM.
Note: Custom elements require JavaScript. Personally, I don't like to use JS when something can just as easily be built with HTML and CSS alone.
