Yes, it is possible to adjust the positioning of text to some extent using a combination of CSS properties. This includes manipulating the line height, setting margins and padding, or using positioning properties like `position: relative` and `top`. Different techniques can be used depending on whether you are working with one line of text or multiple lines.

However, it's important to note that the rendering of text can vary across different operating systems and browsers, making it challenging to achieve precise control over the positioning of text.

Browsers typically position text in the middle of the line by default, based on the defined line height. There is no universal baseline for text across browsers, so the positioning of text may differ between browsers.

Creating a vertical rhythm involves ensuring that all text aligns at specific intervals. This requires controlling the font size, line height, and other elements that contribute to vertical spacing in your design. By selecting a "rhythm unit" and setting your text to align with it, you can maintain consistency in your design. The combination of borders, padding, and margins should add up to your rhythm unit to keep everything in line.

To illustrate these concepts, I have created a JS Fiddle example with code snippets.

When it comes to vertically centering text, the browser handles this automatically, which can result in text not aligning perfectly with a grid. To address this, there are different approaches you can take.

Here is a sample HTML structure:

<article>
  <section>
    <h2>Title!</h2>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
    <div class="second">Hello g World<br />Lorem ipsum...</div>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
  </section>
</article>

By applying basic CSS styles to the elements, such as setting line heights and font sizes, you can control the vertical alignment of text within your design.

Techniques for Positioning Text:

You can use `position: relative` and `top` to visually align text by positioning it relative to a grid in the background.

Here's an example of how this can be implemented in CSS:

.rel, .rel .first, .rel .second {
   position: relative;
}
.rel .first {
    top: 4px;
}
.rel .second {
    top: 9px;
}

Another method involves using padding and margin to adjust the vertical position of text, ensuring that the sum of top and bottom padding equals the rhythm unit.

For more details and additional methods for establishing vertical rhythm, I recommend reading articles on this topic such as the ones found on 24ways and A List Apart. Vertical rhythm generators can also be useful tools to maintain consistency in your design.

Ensure to include the line-height attribute:

div {
  background-color: rgba(255, 0, 0, 0.3); /* Visualization only */
  margin-top: 50px;                       /* Visualization only */
  height: 20px;                           /* Fixed height */
  line-height: 20px;
}

UPDATE

Align text vertically by centering with matching values for height and line-height:

JSBIN

If using only 16px and 30px works for you, great. For universal compatibility, consider an alternative layout such as the following:

<div class="container">
  <span class="align-bottom">Hello g world</span>
</div>

There doesn't appear to be a CSS property specifically for this situation, and it seems unlikely that you can determine it programmatically.

Nevertheless, you have the option to modify the height of the div using JavaScript, considering that the portion of the font above the baseline is about 80%:

var divs = document.getElementsByTagName('div');
for(var j = 0 ; j < divs.length ; j++) {
  divs[j].style.height= divs[j].offsetHeight*0.8+'px';
}

Make sure to remove the fixed div style height beforehand.

Check out the Fiddle here: http://jsfiddle.net/38eLft8q/1/

It may be a bit challenging and not completely foolproof, but here's what's been done so far:

HTML

<div class="first"  title="Hello g World"></div>
<div class="second" title="Hello g World"></div>

CSS

div {
  background-color: rgba(255, 0, 0, 0.3);
  margin-top: 50px;
  height: 20px; /* This size is fixed! */
  position: relative;
}

div:before {
   content: attr(title);
   position: absolute;
   bottom: -0.24em;
}

.first {
  font-size: 10px;
}

.second {
  font-size: 16px;
}

JSBIN

appreciate the challenge :)

UPDATES:

If we want to keep the structure of the question unchanged, we can maintain the text within the divs:

<div class="first">Hello g World</div>
<div class="second">Hello g World</div>

and use some JavaScript to generate the titles

var divs = document.getElementsByTagName("div"); 

for (var i = 0; i < divs.length; i++) {  

    var txt = divs[i].innerHTML;
    divs[i].setAttribute('title', txt);

}

then make some CSS adjustments

div {
  background-color: rgba(255, 0, 0, 0.3);
  margin-top: 50px;
  height: 20px; /* This size is fixed! */
  text-indent: -9999px;
  position: relative;
}

div:before {
   content: attr(title);
   text-indent: 9999px;
   position: absolute;
   bottom: -0.24em;
}

JSBIN

If we're open to changing the structure, it can be like this:

HTML

  <div class="first"><span>Hello g World</span></div>
  <div class="second"><span>Hello g World</span></div>

CSS

div {
  background-color: rgba(255, 0, 0, 0.3);
  margin-top: 50px;
  height: 20px; /* This size is fixed! */
  position: relative;
}

div span {
   position: absolute;
   bottom: -0.24em;
}

JSBIN

NOTE:

• Not tested with different fonts, but I believe it should work as long as you adjust the bottom position accordingly.