Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: style strategies page from upstream #3231

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/pages/guidelines/typography/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: Typography
description:
Typography can help create clear hierarchies, organize information, and guide
users through a product or experience.
tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
---

<PageDescription>
Expand Down Expand Up @@ -48,7 +48,7 @@ The productive styles work together to support the hierarchy of information and
set user expectations. On the other hand, the larger expressive type styles
allow for a more dramatic, graphic use of type in editorial and marketing
design. These type styles are excellent for long form reading and scanning, but
would be distracting for use in product.
would be distracting if used in product.

Within **Body styles** and **Utility styles**, the same set of styles are
offered. Productive styles are named with a suffix of `-01` and expressive style
Expand All @@ -60,7 +60,7 @@ headings are responsive and the type styles change size at different
breakpoints.

For more detail, see
[Styling strategies](/guidelines/typography/styling-strategies/) and
[Style strategies](/guidelines/typography/style-strategies/) and
[Type sets](/guidelines/typography/type-sets/).

## Typeface: IBM Plex
Expand Down Expand Up @@ -131,8 +131,8 @@ long text.
### Italic

Each weight has an italic style, which should only be used when you need to
emphasize certain words in a sentence (titles of works, technical terms, names
of devices, and captions).
emphasize certain words in a sentence (i.e., titles of works, technical terms,
names of devices, and captions).

<TypeWeight type="italic" />

Expand Down
27 changes: 14 additions & 13 deletions src/pages/guidelines/typography/type-sets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: Typography
description:
The productive and expressive type sets support designers creating for a full
range of user needs and activities across product and web pages.
tabs: ['Overview', 'Styling strategies', 'Type sets', 'Code']
tabs: ['Overview', 'Style strategies', 'Type sets', 'Code']
---

<PageDescription>
Expand Down Expand Up @@ -48,7 +48,7 @@ Carbon uses type tokens to manage typography, and these tokens sit within two
type sets. The productive and expressive type sets support designers creating
for a full range of user needs and activities across product and web pages. To
understand when to use styles from each set, see
[Styling strategies](/guidelines/typography/styling-strategies).
[Style strategies](/guidelines/typography/style-strategies).

#### Base type sizes

Expand All @@ -72,18 +72,18 @@ nature of the pages.
density of information housed inside containers for space efficiency, and in
these situations fixed type styles are a must.

- The expressive type set has two fixed headings, for use where smaller headings
are needed. The remaining headings are _fluid_. Web pages need to be able to
flex and work at different breakpoints, and the fluid heading styles change
size at different breakpoints, and can extrapolate/stretch in between sizes
for smooth transitions.
- The expressive type set has two fixed headings that are to be used where
smaller headings are needed. The remaining headings are _fluid_. Web pages
need to be able to flex and work at different breakpoints, and the fluid
heading styles change size at different breakpoints, and can
extrapolate/stretch in between sizes for smooth transitions.

## Utility styles

The utility styles are for use with productive and expressive moments and
include styles for code snippets, labels for captions and helper text, as well
as legal copy. Productive styles have a suffix of `-01` and expressive styles
have a suffix of `-02`.
The utility styles are used with productive and expressive moments and include
styles for code snippets, labels for captions and helper text, as well as legal
copy. Productive styles have a suffix of `-01` and expressive styles have a
suffix of `-02`.

<TypesetStyle typesets="smallStyle" />

Expand Down Expand Up @@ -114,7 +114,7 @@ styles change size at different breakpoints.
Do not use these styles inside a container. They may be used in product pages
where text sits outside of a container, and a blend of expressive and productive
type styles is desired for hierarchy and distinction. For more information, see
[Styling strategies](/guidelines/typography/styling-strategies).
[Style strategies](/guidelines/typography/style-strategies).

<TypesetStyle typesets="fluidHeadings" breakpointControls={true} />

Expand All @@ -123,7 +123,7 @@ type styles is desired for hierarchy and distinction. For more information, see
The callout and display styles are part of the expressive set and being fluid,
they will adjust at different breakpoints. Do not use these styles inside a
container. For guidance about using display styles, see
[Styling strategies](/guidelines/typography/styling-strategies#expressive-use-cases).
[Style strategies](/guidelines/typography/style-strategies#expressive-use-cases).

<TypesetStyle typesets="fluidCallouts,fluidDisplay" breakpointControls={true} />

Expand All @@ -147,3 +147,4 @@ review.
- Office hours with Carbon for IBM.com. See our
[Slack channel](https://cognitive-app.slack.com/archives/C2PLX8GQ6) for
details.