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 1 commit
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
Next Next commit
Replace Roboto with Inter and include new sizing
  • Loading branch information
Sophie Shepherd committed Oct 17, 2018
commit 818e2244413e477cd1f748fb8bb28dade14b9561
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("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("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
116 changes: 50 additions & 66 deletions modules/primer-marketing-type/lib/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,79 @@
// 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 h00-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 h1-mktg {
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
}

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

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

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

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

.alt-h4 {
font-size: $h4-size;
font-weight: $font-weight-semibold;
.h3-mktg { @include h3-mktg; }

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

.alt-h5 {
font-size: $h5-size;
font-weight: $font-weight-semibold;
.h5-mktg {
font-size: $h5-size !important;
}

.alt-h6 {
font-size: $h6-size;
font-weight: $font-weight-semibold;
.h6-mktg {
font-size: $h6-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; }
@mixin lead-mktg {
font-size: $h3-size;
font-weight: $font-weight-normal;
}

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

// For small text

Expand All @@ -104,7 +88,7 @@
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