Skip to content

Updates to Marketing Typography #583

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Jan 23, 2019
Merged

Updates to Marketing Typography #583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
818e224
Replace Roboto with Inter and include new sizing
Oct 17, 2018
c74df8e
Delete alt-text-small
Oct 17, 2018
d00f39a
Update docs
Oct 17, 2018
41091ce
ci fix
Oct 25, 2018
7131b7f
remove mono from docs
Oct 25, 2018
4586559
add !important to text-mono class
gladwearefriends Nov 26, 2018
7417eff
add fonts
gladwearefriends Jan 22, 2019
b11ac89
update font file url
gladwearefriends Jan 22, 2019
ee6f771
Merge branch 'master' into marketing-type-2018
gladwearefriends Jan 22, 2019
1a7850c
fix: add fonts dir to npm files list
shawnbot Jan 23, 2019
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
Binary file added modules/primer-marketing-support/fonts/Inter-UI-Medium.woff
View file
Open in desktop
Binary file not shown.
Binary file added modules/primer-marketing-support/fonts/Inter-UI-Regular.woff
View file
Open in desktop
Binary file not shown.
21 changes: 19 additions & 2 deletions modules/primer-marketing-support/lib/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
// Type
$alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
$alt-mono-font: $mono-font;
@font-face {
font-family: InterUI;
font-style: normal;
font-weight: $font-weight-normal;
src: local("InterUI"), local("InterUI-Regular"), url("/primer-marketing-support/fonts/Inter-UI-Regular.woff") format("woff");
}

@font-face {
font-family: InterUI;
font-style: normal;
font-weight: $font-weight-semibold;
src: local("InterUI Medium"), local("InterUI-Medium"), url("/primer-marketing-support/fonts/Inter-UI-Medium.woff") format("woff");
}

$font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

// Builds upon primer-support/variables/typography.scss
$h000-size: 64px !default;
$h000-size-mobile: 48px !default;

// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
// i.e. After 40px, we have 48, 64, 80, 96, etc.
Expand Down
1 change: 1 addition & 0 deletions modules/primer-marketing-support/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
},
"files": [
"index.scss",
"fonts",
"lib"
],
"repository": "https://github.com/primer/primer/tree/master/modules/primer-marketing-support",
Expand Down
25 changes: 11 additions & 14 deletions modules/primer-marketing-type/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,19 @@ The typography for our marketing pages differs slightly from what is in Primer's

## Heading Utilities

Use `.alt-h1` – `.alt-h6` to change an element's font, size, and weight on marketing pages.
Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.

```html title="Heading Utilities"

<p class="alt-h1">Pizza 1</p>
<p class="alt-h2">Pizza 2</p>
<p class="alt-h3">Pizza 3</p>
<p class="alt-h4">Pizza 4</p>
<p class="alt-h5">Pizza 5</p>
<p class="alt-h6">Pizza 6</p>
<p class="h000-mktg">Heading 000</p>
<p class="h00-mktg">Heading 00</p>
<p class="h0-mktg">Heading 0</p>
<p class="h1-mktg">Heading 1</p>
<p class="h2-mktg">Heading 2</p>
<p class="h3-mktg">Heading 3</p>
<p class="h4-mktg">Heading 4</p>
<p class="h5-mktg">Heading 5</p>
<p class="h6-mktg">Heading 6</p>

```

Expand All @@ -39,13 +42,7 @@ These utilities are meant to be used in addition to Primer's core utilities.

```html title="Typographic Utilities"

<p class="alt-lead text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>

<p class="text-gray">I'm a regular paragraph, except I'm gray. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>

<p class="text-gray alt-text-small">And I'm a tiny lil' baby paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>

<p class="alt-mono-font text-gray">Occasionally we want to use a mono font, there is a utility class for that.</p>
<p class="lead-mktg text-gray">I'm a lead paragraph. Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>

<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>

Expand Down
122 changes: 50 additions & 72 deletions modules/primer-marketing-type/lib/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,88 @@
// Marketing font utility class

.alt-mono-font {
font-family: $alt-mono-font;
}

//
// Headings

.alt-h0,
.alt-h1,
.alt-h2,
.alt-h3,
.alt-h4,
.alt-h5,
.alt-h6,
.alt-lead {
-webkit-font-smoothing: antialiased;
font-family: $alt-body-font;
.h00-mktg,
.h0-mktg,
.h1-mktg,
.h2-mktg,
.h3-mktg,
.h4-mktg,
.h5-mktg,
.h6-mktg,
.lead-mktg {
font-family: $font-mktg;
font-weight: $font-weight-semibold;
}

@mixin alt-h0 {
font-size: $h00-size;
font-weight: $font-weight-light;
@include breakpoint(md) { font-size: 54px; }
@include breakpoint(lg) { font-size: 72px; }
@mixin h000-mktg {
font-size: $h000-size-mobile !important;
@include breakpoint(md) { font-size: $h000-size !important; }
}

.alt-h0 {
@include alt-h0;
}
.h000-mktg { @include h000-mktg; }

@mixin alt-h1 {
font-size: 36px;
font-weight: $font-weight-light;
@include breakpoint(md) { font-size: $h00-size; }
@include breakpoint(lg) { font-size: 54px; }
@mixin h00-mktg {
font-size: $h00-size-mobile !important;
@include breakpoint(md) { font-size: $h00-size !important; }
}

.alt-h1 {
@include alt-h1;
}
.h00-mktg { @include h00-mktg; }

@mixin alt-h2 {
font-size: 28px;
font-weight: $font-weight-light;
@include breakpoint(md) { font-size: 34px; }
@include breakpoint(lg) { font-size: 38px; }
@mixin h0-mktg {
font-size: $h0-size-mobile !important;
@include breakpoint(md) { font-size: $h0-size !important; }
}

.alt-h2 {
@include alt-h2;
}
.h0-mktg { @include h0-mktg; }

@mixin alt-h3 {
font-size: 18px;
font-weight: $font-weight-normal;
@include breakpoint(md) { font-size: $h3-size; }
@include breakpoint(lg) { font-size: 22px; }
@mixin h1-mktg {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}

.alt-h3 {
@include alt-h3;
}
.h1-mktg { @include h1-mktg; }

.alt-h4 {
font-size: $h4-size;
font-weight: $font-weight-semibold;
@mixin h2-mktg {
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
}

.alt-h5 {
font-size: $h5-size;
font-weight: $font-weight-semibold;
}
.h2-mktg { @include h2-mktg; }

.alt-h6 {
font-size: $h6-size;
font-weight: $font-weight-semibold;
@mixin h3-mktg {
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
}

// Big opening paragraphs
@mixin alt-lead {
-webkit-font-smoothing: antialiased;
font-size: 21px;
font-weight: $font-weight-light;
@include breakpoint(md) { font-size: $h2-size; }
@include breakpoint(lg) { font-size: 26px; }
.h3-mktg { @include h3-mktg; }

.h4-mktg {
font-size: $h4-size !important;
}

.alt-lead {
@include alt-lead;
.h5-mktg {
font-size: $h5-size !important;
}

// For small text
.h6-mktg {
font-size: $h6-size !important;
}

.alt-text-small {
font-size: 14px !important;
// Big opening paragraphs
@mixin lead-mktg {
font-size: $h3-size;
font-weight: $font-weight-normal;
}

.lead-mktg { @include lead-mktg; }

// Pullquote

@mixin pullquote {
padding-top: 0;
padding-bottom: 0;
padding-left: $spacer;
margin-bottom: $spacer-4;
font-family: $alt-mono-font;
font-family: $mono-font;
font-size: $h4-size;
line-height: 1.4;
color: $text-gray;
Expand Down
4 changes: 2 additions & 2 deletions modules/primer-utilities/docs/box-shadow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ These types of shadows are typically applied to elements with borders, such as t
<h3 class="m-0">Organization</h3>
</div>
<div class="Box-row">
<p class="mb-0 alt-text-small text-gray">
<p class="mb-0 text-gray">
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
</p>
</div>
Expand Down Expand Up @@ -56,7 +56,7 @@ Medium box shadows are typically used on editorialized content that needs to app
<a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
<h3 class="text-gray-dark">Serverless architecture</h3>
<p class="alt-text-small text-gray">
<p class="text-gray">
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
</p>
<ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
Expand Down
2 changes: 1 addition & 1 deletion modules/primer-utilities/lib/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@

/* Set to monospace font */
.text-mono {
font-family: $mono-font;
font-family: $mono-font !important;
Copy link
Contributor

@gladwearefriends gladwearefriends Nov 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding a note for my commit:
!important is needed in order for the monospace font to have effect with other marketing headers, e.g. h2-mktg when you want a big monospace header like on github.com/ten https://github.com/github/github/pull/102693#discussion_r236315756

https://github.com/github/github/pull/102693/files#diff-20a6e07f77d51d5f093dded1d213d52dR70

}

/* Disallow user from selecting text */
Expand Down