Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> elements were determined by the author. I have already gone through a tutorial available at this link.

The tutorial was informative, but I am unable to grasp the rationale behind the numerical values chosen by the code's creator. It seems that 14px serves as the base font size and 22px functions as the base margin, resulting in a baseline leading value of 1.57142857 (calculated by dividing 22 by 14). However, I cannot discern the logic behind the author's line-height values for the different heading elements.

body { font:normal 14px/1.57142857 Arial,"Helvetica Neue",Helvetica,sans-serif; }

h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, address,
dl, ol, ul, table,
legend, hr, figure {    
margin-bottom:22px;
}

li > ul,
li > ol {
margin-bottom:0; 
}

/* Headings */
h1, .h1 { font-size:60px; line-height:1.10000000; font-weight:normal;  }
h2, .h2 { font-size:36px; line-height:1.16666667; font-weight:normal;  }  
h3, .h3 { font-size:24px; line-height:1.25000000; font-weight:normal;  }
h4, .h4 { font-size:18px; line-height:1.33333333; font-weight:normal; }
h5, .h5 { font-size:14px; line-height:1.57142857; font-weight:normal; }
h6, .h6 { font-size:12px; line-height:1.57142857; font-weight:normal; }
webtypographycss

Answer №1

It appears that the writer employed a modular scale in their work.

For more insight on how this technique is implemented, refer to the description provided by the Zurb's Foundation framework.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there anyone who can provide a straightforward solution (code) for < something basic?

I have learned a lot about programming, but I'm stuck on one thing. How can I make an image stay in place when clicked on? What I mean is that when you click and hold on the image, then move the cursor, the image moves with the cursor. What I want is ...

phphtmlcss

Conceal hyperlink repeatedly using jQuery

I am struggling with implementing a feature where I have two links, one displayed and the other hidden. Upon clicking the first link, it should disappear and the second link should be displayed. Clicking the second link should then hide itself and show the ...

javascriptjquerycss

Is there no sign of rails being utilized in production?

There are some classic image png files located in app/assets/images/... However, in production, after running rake assets:precompile The images do not appear! Upon inspecting the CSS source code, I noticed that .logo { background-image: url("/ass ...

cssimageruby-on-rails-4sassassets

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Is it possible to modify the CSS styling of the file_field?

I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...

javascripthtmlruby-on-railscss

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...

javascripthtmljquerycss

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below: <link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!docty ...

cssangular

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

javascriptjqueryhtmlcssmodal-dialog

Altering the dimensions of radio buttons

I am a newcomer to using material-ui. I am currently working on incorporating radio buttons in a component and would like to reduce its size. While inspecting it in Chrome, I was able to adjust the width of the svg icon (1em). However, I am unsure how to a ...

cssreactjstypescriptmaterial-ui

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

pythonhtmlcssdjango

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

javascriptjquerycsslightboxcss-position

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...

javascripthtmlcss

Altering the look of a button as you navigate to it by tabbing

Check out this code snippet: In my design, I have set it up so that the user can tab through the username field first, then the password field, followed by the login button and finally the navigation tabs labeled "Getting Started" and "Vegetables." The i ...

htmlcss

After a group of floated items, there will be an automatic "clear: both" applied

Within my Content Management System, I have custom Elements that need to be floated next to each other. Instead of adding an extra div with a class of "clear", I want to automatically insert a clear: both at the end using CSS3. I attempted this workaround ...

htmlcsscss-float

Zurb's Vertical Navigation Bar: A Stylish and Functional Design

I attempted to replicate the left navigation bar from this link: The responsive navigation bar and contents on the right caught my attention. Currently, I am working on a project that requires a similar navigation bar. While I am proficient in HTML and C ...

javascripthtmlcsszurb-foundation-5

When incorporating CSS with Bootstrap, it may not always have a visible impact on the

As a newcomer to using Bootstrap, I recently created a webpage with Bootstrap3. However, I encountered an issue when trying to apply two classes to the same element, as the CSS was not being applied: Here is the HTML code snippet: <div class="col-md-4 ...

htmlcsstwitter-bootstrap

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously

Here is the current code snippet... $("#contact").click(function() { if ( $( "#contact_div" ).length ) { $("#contact_div").remove(); } else { var html='<div id="contact_div" class="contact-info"><p>Contact info</p&g ...

javascriptjqueryhtmlcss

The React app hosted on Firebase displays a message saying "please activate JavaScript to run this application"

I created a web app using React that is hosted on Firebase Hosting, with a backend server utilizing Express and Cloud Functions. You can access the website here: The landing, login, and signup pages are functioning properly. However, when trying to acces ...

javascriptreactjsfirebaseexpressweb

What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors. ::-moz-selection { background: #fff; colo ...

htmlcssbackgroundselectionopacity