Always I need to create styles for typography for every project. I copy-paste code from one project into another. But I tried to do that. So I've created the CSS file that can help to simplify customization typography using the special settings.
For using Typography you need to import the ds-typography.css file in your CSS file.
@import 'ds-typography.css';Note: Don't forget to use build systems so that the @import CSS at-rule doesn't get on production.
That's all. The default styles apply to elements. If you'd like to customize it you can use settings.
@import 'ds-typography.css';
:root {
--ds-typography-heading-font-family: 'Roboto Slab', serif;
--ds-typography-heading-line-height: 1.5;
}I've made options that you will use for customization. See the following:
| Name | Description |
|---|---|
| --ds-typography-main-font-family | What font do you want to use? Roboto? Use any! But don't forget to define safe font as a fallback. |
| --ds-typography-main-font-size | How large the text you use is. 2rem or 0.5rem? |
| --ds-typography-main-color | The color of the text. |
| --ds-typography-main-line-height | The basic line height of all elements. |
| --ds-typography-paragraph-margin-block-start | What's the gap will be generated by p elements? |
| --ds-typography-list-margin-block-start | What's the gap will be generated by the ul or ol elements? |
| --ds-typography-list-item-margin-block-start | What's the gap will be generated by li elements? |
| --ds-typography-heading-margin-block-start | What's the gap will be generated by heading elements? |
| --ds-typography-heading-line-height | What's the line height will be used for heading elements? |
| --ds-typography-heading-font-family | Do you wanna highlight heading? |
| --ds-typography-h1-font-size | What's a font size of the h1 element? |
| --ds-typography-h2-font-size | What's a font size of the h2 element? |
| --ds-typography-h3-font-size | What's a font size of the h3 element? |
| --ds-typography-h4-font-size | What's a font size of the h4 element? |
| --ds-typography-h5-font-size | What's a font size of the h5 element? |
| --ds-typography-h6-font-size | What's a font size of the h6 element? |
| --ds-typography-link-color | Don't forget to make the link text visible |
| --ds-typography-link-text-decoration-line | What kind of line do you use? |
| --ds-typography-link-text-decoration-thickness | What is line thickness? |
| --ds-typography-link-text-decoration-style | What is line style? |
| --ds-typography-link-text-decoration-color | What is a line color? |
| --ds-typography-link-text-decoration-offset | Set the gap between the text and line |
| --ds-typography-img-display | What's the value of the display property of img elements? |
| --ds-typography-img-max-width | What's the maximum width of img elements? |
| --ds-typography-img-object-fit | Do you wanna change the object-fit property? |
| --ds-typography-img-object-position | The image may be cropped. Fix it here |
| --ds-typography-img-aspect-ratio | What's the aspect ratio? |
| --ds-typography-img-margin-block-start | What's the gap will be generated by img elements? |
You should use the parent element or document root element to define the new value.
:root {
--ds-typography-main-font-family: 'Roboto', sans-serif;
--ds-typography-main-font-size: 2rem;
--ds-typography-main-color: #800080;
--ds-typography-main-line-height: 1.75;
--ds-typography-paragraph-margin-block-start: 1.75rem;
--ds-typography-list-margin-block-start: 1.75rem;
--ds-typography-list-item-margin-block-start: .25rem;
--ds-typography-heading-margin-block-start: 1.25rem;
--ds-typography-heading-line-height: 2;
--ds-typography-heading-font-family: 'Indie Flower', cursive;
--ds-typography-h1-font-size: 2.5rem;
--ds-typography-h2-font-size: 2.25rem;
--ds-typography-h3-font-size: 2rem;
--ds-typography-h4-font-size: 1.75rem;
--ds-typography-h5-font-size: 1.5rem;
--ds-typography-h6-font-size: 1.25rem;
--ds-typography-link-color: #ee40e7;
--ds-typography-link-text-decoration-line: line-through;
--ds-typography-link-text-decoration-thickness: 4px;
--ds-typography-link-text-decoration-style: dashed;
--ds-typography-link-text-decoration-color: #222;
--ds-typography-link-text-decoration-offset: 8px;
--ds-typography-img-display: flex;
--ds-typography-img-max-width: 100%;
--ds-typography-img-object-fit: cover;
--ds-typography-img-object-position: right top;
--ds-typography-img-aspect-ratio: 16 / 9;
--ds-typography-img-margin-block-start: 2rem;
}I have specified the allowed values here. You should use a value that is allowed for a CSS property from the second column.
| Name | CSS property |
|---|---|
| --ds-typography-main-font-family | font-family |
| --ds-typography-main-font-size | font-size |
| --ds-typography-main-color | color |
| --ds-typography-main-line-height | line-height |
| --ds-typography-paragraph-margin-block-start | margin |
| --ds-typography-list-margin-block-start | margin |
| --ds-typography-list-item-margin-block-start | margin |
| --ds-typography-heading-margin-block-start | margin |
| --ds-typography-heading-line-height | line-height |
| --ds-typography-heading-font-family | font-family |
| --ds-typography-h1-font-size | font-size |
| --ds-typography-h2-font-size | font-size |
| --ds-typography-h3-font-size | font-size |
| --ds-typography-h4-font-size | font-size |
| --ds-typography-h5-font-size | font-size |
| --ds-typography-h6-font-size | font-size |
| --ds-typography-link-color | color |
| --ds-typography-link-text-decoration-line | text-decoration-line |
| --ds-typography-link-text-decoration-thickness | text-decoration-thickness |
| --ds-typography-link-text-decoration-style | text-decoration-style |
| --ds-typography-link-text-decoration-color | text-decoration-color |
| --ds-typography-link-text-decoration-offset | text-decoration-offset |
| --ds-typography-img-display | display |
| --ds-typography-img-max-width | max-width or max-inline-size |
| --ds-typography-img-object-fit | object-fit |
| --ds-typography-img-object-position | object-position |
| --ds-typography-img-aspect-ratio | aspect-ratio |
| --ds-typography-img-margin-block-start | margin |
Also, this collection is created with the purpose of promoting my newsletter with CSS tips. I'm sure you find something what you don't know. Do you wanna check it? Subscribe!
The files herein are all Stas Melnikov.