Creating responsive typography is essential for ensuring that your website’s text adapts well to different screen sizes and devices. CSS...
‧‧‧ One of 32

Creating responsive typography is essential for ensuring that your website’s text adapts well to different screen sizes and devices.

CSS Units for Font Size:

Use appropriate units for font size to achieve responsiveness.
Common units include:
Pixels (px): Fixed size, not responsive. Example: font-size: 16px;
Ems (em): Relative to the parent element’s font size. Example: font-size: 1em;
Root em (rem): Relative to the root (usually) font size. Example: font-size: 1rem;
Percentage (%): Relative to the parent element’s font size. Example: font-size: 100%;
Media Queries:
Use media queries to adjust font sizes based on screen width.
@media (max-width: 768px) {
body {
font-size: 14px;

Second experiment can be seen at my solutions page, also with containers and variable CSS for each column.

Typography article

Typography plays a crucial role in web design, affecting readability, aesthetics, and overall user experience.


The color property defines the color of text.
You can use color names (e.g., red), hexadecimal codes (e.g., #05ffb0), RGB values (e.g., rgb(50, 115, 220)), or HSL values (e.g., hsl(14, 100%, 53%)).
Example: color: red;

Font Family:

The font-family property specifies the font to be used.
You can provide a list of font families, prioritized from left to right.
Example: font-family: 'Source Sans Pro', Arial, sans-serif;

Font Size:

The font-size property sets the size of the text.
You can use absolute units (e.g., px, em) or relative units (e.g., rem, %).
Example: font-size: 16px;

Font Style:

The font-style property defines whether the text is normal, italic, or oblique.
Example: font-style: italic;

Font Weight:

The font-weight property adjusts the thickness of the text.
Common values include normal, bold, and numeric values (e.g., 400, 700).
Example: font-weight: bold;

Line Height:

The line-height property controls the spacing between lines of text.
You can use unit values or a multiplier (e.g., 1.5).
Example: line-height: 1.5;

Letter Spacing:

The letter-spacing property adjusts the space between individual letters.
Example: letter-spacing: 1px;

Text Decoration:

The text-decoration property adds visual effects to text (e.g., underline, overline, line-through).
Example: text-decoration: underline;

Typography style


Experiments in typography & CSS


* Determine the image you want to project with your publication and choose fonts with personalities that will fit that image.
* Limit the number of typefaces you use in a publication. Many experts say to use a limit of two typefaces, but occasionally this will vary. Too many typefaces can create an unprofessional, jumbled image.
* Look at various publications for ideas about which typefaces work well together and the images they project.
* When using two typefaces, make sure they are very different. One typeface will probably be used for display type, such as headings, and the other for text. Strive for definite contrast between the two.
* When choosing only one typeface family, choose one with a lot of variations, so you will have some flexibility with your text design. The typeface Helvetica has many variations such as Helvetica Bold, Light, Regular, Condensed or Narrow, Outline, and Black.
* If you are unsure about which typeface to select, choose a common and reliable one such as Garamond, Palatino, Helvetica, Goudy, or Times Roman.
* When using a display type that has very strong characters (type that is bigger and bolder than regular type), use a typeface for text that looks more neutral. Very elaborate typefaces can be hard to read. Limit their use to only a few words and make sure the words are legible.
* All caps are harder to read than upper and lower case letters. Try to limit the use of all caps to two or three words. Some typefaces, such as Old English, are not designed to be used for all caps.
* Use bold and italic type for just a few words.
* Avoid setting large blocks of text in bold or italic type. Both styles are generally more difficult to read than regular type. A block of bold type tends to darken a page.
* Typeface weight will have a large impact on the color or darkness of your page. Thin lines will create a light and airy appearance, while thick lines will create a dark and heavy appearance. Weight can be very important to the image of a publication.
* Different typefaces take up different amounts of space. Some fonts are larger and take up more space per letter. This can greatly affect the length of a publication.
* The reader’s eye is attracted by white space. It gives the eye a rest and calls attention to what it surrounds.
* Break multi-line headings by phrase (where a spoken pause would occur). Place more white space above heading than below. This signals the reader that the heading goes with the text below it.
* Increase the spacing between lines or leading to create a lighter-looking page.

Start now

Custom work


  • Design and integration of custom specifications
  • SEO optimized result
  • Developing custom functions to extend Shopify functionality



  • Setting up and tuning environment for SEO
  • Installing Shopify templates
  • Shopify Setup and Configuration
  • Configuring Shopify apps



  • Shopify Management Support
  • Backend management (code fixing, updates etc...)
  • Store management (roles changes, content update/import/exports, etc.)



  • Migrating a Shopify install from an existing
  • Importing content into a Shopify install
  • Configuring content roles


milo, a designer, developer and consultant with experience of 400+ successfully launched Shopify stores.


A designer, developer, consultant & approved Shopify expert with a five-star track record in the design, setup & optimization of Shopify shops.

milo 317

Search   Sitemap

Say hello