A Pen by Matthew Daniel Brown on CodePen.
Created
April 16, 2019 20:10
-
-
Save matt-daniel-brown/1107023771cf2cf44947fa4ce76cd1c5 to your computer and use it in GitHub Desktop.
Typography basic improvements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %header | |
| %h1 The Art Of Letters | |
| %p or words or whatever | |
| %main | |
| %article.content | |
| %header | |
| %h1 Typography for beginners | |
| %p Lorem ipsum isn't a great choice to use for demonstrating good typography. Ideally you would use real content. However for the demonstration in the post, I think it's acceptable. I could use my content, it would be strange and cause some duplication I imagine. | |
| %section | |
| %h2 A heading that is quite long | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Restinguet citius, si ardentem acceperit. Sed tu istuc dixti bene Latine, parum plane. Quid enim tanto opus est instrumento in optimis artibus. | |
| %section | |
| %h3 A heading related to the one above | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Esse enim quam vellet iniquus iustus poterat inpune. | |
| %section | |
| %h4 A heading related to the one above | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Esse enim quam vellet iniquus iustus poterat inpune. facilis totam, quis nam ea ullam quos porro quidem! Nesciunt, cumque! | |
| %section | |
| %h5 Nearly the last section | |
| %p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore voluptate eum, voluptates, facere vitae voluptatum dolore vel illo quaerat. | |
| %section | |
| %h6 Finally we are done. | |
| %p Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, consequatur voluptas velit magni consequuntur eum porro voluptatibus esse nemo ad, similique accusamus harum animi nam blanditiis necessitatibus non debitis illo! | |
| %footer | |
| %button First Button | |
| %button.secondary Second Button |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // A few tips for a post I'm working on | |
| // Just covering type scale, line height & lengths | |
| // How these few tips can immediately | |
| // improve a reading experience | |
| // iamsteve.me |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| padding: 3em 0; | |
| font-size: 18px; | |
| padding-top: 0 !important; | |
| } | |
| .content { | |
| max-width: 32em; /* 440/16 */ | |
| margin: auto; | |
| line-height: 1.5; } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 2.441em; | |
| line-height: 1.125; } | |
| h2 { | |
| font-size: 1.953em; | |
| line-height: 1.25; } | |
| h3 { | |
| font-size: 1.563em; | |
| line-height: 1.25; } | |
| h4 { | |
| font-size: 1.25em; } | |
| h5 { | |
| font-size: 1.125em; } | |
| h6 { | |
| color: gray; | |
| } | |
| h6, | |
| p { | |
| font-size: 1em; | |
| // font-weight: 500; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: 0 0 0.5em 0 !important; | |
| line-height: 1.35 !important; | |
| font-weight: 700; | |
| } | |
| p:last-child { | |
| margin-bottom: 4rem !important; | |
| } | |
| $system-font-stack: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !default; | |
| * { | |
| font-family: 'Circular Std', Circular Std, 'Circular', Circular $system-font-stack !important; | |
| } | |
| button { | |
| font-family: 'Circular Std', Circular Std, 'Circular', Circular $system-font-stack !important; | |
| letter-spacing: 1px !important; | |
| font-size: 18px !important; | |
| font-weight: 500 !important; | |
| cursor: pointer; | |
| min-width: 10em !important; | |
| &:first-of-type { | |
| float: left; | |
| } | |
| &:last-of-type { | |
| float: right; | |
| } | |
| background-color: mediumslateblue; | |
| border-color: mediumslateblue; | |
| // font-weight: 500 !important; | |
| border-width: 2px; | |
| } | |
| .secondary { | |
| background: transparent !important; | |
| color: mediumslateblue; | |
| border-color: mediumslateblue; | |
| font-weight: 500 !important; | |
| border-width: 2px; | |
| } | |
| body>header { | |
| padding: 2em 0 !important; | |
| text-align: center !important; | |
| width: 100%; | |
| background: ghostwhite; | |
| margin: 0 auto !important; | |
| * { | |
| font-weight: lighter !important; | |
| letter-spacing: 1px; | |
| margin: 0 auto !important; | |
| padding: 0 !important; | |
| text-align: center; | |
| line-height: 1 !important; | |
| } | |
| } | |
| main { | |
| padding: 2em 0 !important; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/marx/3.0.7/marx.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment