Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@contentful/f36-typography
Advanced tools
Forma 36 includes a number of typography components, including a wrapper to automatically add spacing to typography elements.
Typography components are not tied to specific semantic elements - it's possible to render any typography component as a h1
, h2
, h3
, h4
, h5
, h6
or p
element.
Forma 36 uses system UI fonts. System UI fonts refer to the fonts used to render text in the UI of an operating system. When used on the web they offer familiarity, load with zero-latency, and support a wide number of character sets.
Heading is intended to be used to define a section. Headings are very important for accessibility, as it helps to make copy more easily scannable and guides a user through your content.
Another accessibility consideration screen readers. Visually impaired people often use screen readers, which find sections in your copy based on your heading hierarchy.
Font size: 21px = 1.313rem - Line Height: 31px = 1.938rem - Weight: 700
<Heading>Heading</Heading>
Subheadings are intended to be used as headings for copy nested within a section. EX: a subheading under Contact may be Address or Phone number.
Font size: 16px = 1rem - Line Height: 24px = 1.5rem - Weight: 700
<Subheading>Subheading</Subheading>
Section Heading is intended to be used as a title for a widget, and is most commonly used in the sidebar.
Font size: 12px = 0.75rem - Line Height: 18px = 1.125rem - Weight: 600
<SectionHeading>SectionHeading</SectionHeading>
Body is the base font size for content. It is intended to be used as paragraph copy.
Font size: 14px=0.875rem - Line Height: 21px=1.313rem - Weight: 500
<Paragraph>Paragraph</Paragraph>
DisplayText is used to display text in special scenarios - example usages of DisplayText include empty states, promotional/featured items, etc.
DisplayText should not be used as a replacement for headings/page titles (use the Heading component instead).
<React.Fragment>
<DisplayText size="large">DisplayText (large)</DisplayText>
<DisplayText>DisplayText</DisplayText>
</React.Fragment>
The <Typography>
component should be used to wrap a group of typography components (<Heading>
, <Paragraph>
, etc) for cases where you wish to display these components with default margins.
We follow the principle that a component should only be responsible for its own internal spacing - never its external spacing. This means that we're flexible in where our components can be used without having to override margins.
<Typography>
<Heading>My heading</Heading>
<Paragraph>My paragraph</Paragraph>
</Typography>
FAQs
Forma 36: typography React Component
The npm package @contentful/f36-typography receives a total of 26,321 weekly downloads. As such, @contentful/f36-typography popularity was classified as popular.
We found that @contentful/f36-typography demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.