HTML5 text can display letters and numbers at varying heights

Can anyone explain why the numbers and letters are displaying at different heights? I am utilizing Bootstrap 3.

HTML 
<ul class="list-group">
            <li class="list-group-item">HTML5</li>
            <li class="list-group-item">CSS3</li>
            <li class="list-group-item">Javascript</li>
            <li class="list-group-item">jQuery</li>
            <li class="list-group-item">Github</li>
            <li class="list-group-item">Bootstrap</li>
</ul>
CSS 
#small-skills .list-group .list-group-item {
color: inherit;
border: 0.056em solid #c80a48;
background-color: inherit;
font-size: 1.2em;
}
View the screenshot here

htmlcsstwitter-bootstrap-3

Answer №1

It appears that the font itself is causing this effect, as there are no changes in markup or CSS. There are multiple methods to address this issue.

1) Switch to a different font entirely.

2) Develop a specialized font for numbers exclusively and include the original font as a fallback in the declaration:

font-family: numberFont, regularFont

3) Utilize a font that specifically targets the desired numbers:

@font-face {
   font-family: numberFont;
   /*add remaining font details here*/
   unicode-range: U+30-39;
}

4) Wrap each number within markup:

Number <span class="number">123</span>

Then apply CSS adjustments accordingly:

.number {
  font-family: Arial; /* Change Font */
  position: relative;
  top: -1em; /* Adjust positioning */
}

Answer №2

Switching from the 'Raleway' font resolved the problem with the text display.

Answer №3

After conducting research, I have discovered that numbers come in various styles. There are 'Text figures' with varying heights and 'lining figures' where all numbers align with the height of capital letters.

To customize the style of numbers in CSS, you can utilize the font-feature-settings property. Experiment with setting values like "onum" or "lnum".

Here is a resource for further information on manipulating number styles using CSS.

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

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

css: maximum width or maximum size

My website features images with a width of 720 pixels. I am looking for a way to ensure that these images are either 95% of the page's width (with a maximum width set at 95%), or 720px if the screen size is too large. This is to prevent distortion on ...

imagecssimage-resizing

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...

javascriptjqueryhtmlcssautomation

Turning Geometries into Clickable Hyperlinks in Three.js with WebGl Renderer

Recently, I've been experimenting with creating a spherical 360 panorama using three.js. My goal is to incorporate clickable objects that act as hyperlinks. Despite my efforts and research on raycasting, I haven't been successful in making the ob ...

javascripthtmlthree.js

Opening Tags in Selenium for HTML

Is it possible for Selenium with XPath to properly work with HTML that is not in the form of XML, and contains open tags like <col> and <input>? I'm curious if anyone can confirm this. I ask because our automation testing team has noticed ...

htmlxpathseleniumxhtml

Is it possible to swap out a webpage link for a different one based on the size of the screen?

I designed a website for a friend: www.donjas-wellbeingforkids.co.uk I set up a Facebook Messenger Contact Us Link directly from the contact page here: donjaswell-beingforkids contact It's functional on desktop, where it seamlessly opens Facebook Me ...

htmlcss

Storing div content in database directly

I have a straightforward div that allows users to edit content on the page. I need to save this content in a database, but without including any HTML tags while still preserving line breaks. Currently, I am using the innerText property for this purpose. N ...

javascriptphphtmldatabasecontenteditable

Interactive JavaScript function designed to react to user commands

Struggling to develop a JavaScript/AngularJS function that notifies the user whether a entered number is too high or low (> 100 indicates it's too high)? Check out the HTML code below: <div> <p id="num">Number : <input type="nu ...

javascripthtmlangularjs

Creating double borders in CSS with the second border extending all the way to the top of the element

Can you help me figure out how to achieve this effect using CSS? It seems like a simple task: border-top: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-bottom: 1px solid #848484; border-right: 1px solid #848484; Just add: box-shadow: 0.7px ...

htmlcssbutton

Ensure that the anchor element's height fills the entire div when using the display:block property

My HTML code is very simple: <div class='mydiv'> <a href='#'>Link</a> <div> As for the CSS: div.mydiv { height: 200px; width: 200px; background-color:red; } div.mydiv a { display:block; color:yellow; b ...

htmlcss

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Having trouble with using New Line '\n' ' ' in Typescript Here is an example of my typescript code: this.custPartyAddress = estimation.partyName + ',' + '\n' + estimation.partyAddress + ',' + ...

htmltypescriptbootstrap-4newline

Space allocation among the columns' borders

My layout consists of 3 columns in a row, each with the class col-xs-4, covering the entire row. I am trying to add a border to each column without them overlapping. Currently, I have applied the border but there is no spacing between the columns. I want ...

htmlcsstwitter-bootstrap

curved edges and accentuate the chosen one

I've been working on an angularJS application that includes a webpage with multiple tabs created using angularJS. Check out this example of the working tabs: http://plnkr.co/edit/jHsdUtw6IttYQ24A7SG1?p=preview My goal is to display all the tabs with ...

javascripthtmlcssangularjs

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

htmlxmlajax

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Guide to importing a JSON file into Vue.js and HTML

I'm a beginner in Vue and not very familiar with HTML I'm attempting to import data from a JSON file into my interface to display it for the user. Below is the structure of the JSON: [ { "Title": "SOFT-STARTER", "Cod&q ...

javascripthtmljsonvue.jsvuejs3

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Guide to autoplay an uploaded mp4 video in a flask application

I've been working on a Flask application that includes an upload button for videos in mp4 format. I'm facing an issue where after uploading a video, it only shows a generic grey screen without playing the video. I want to ensure that once a video ...

pythonhtmlvideoflaskmp4

The margin set in Bootstrap isn't making any difference

I'm currently utilizing bootstrap 4 in my react project, and while the bootstrap components seem to be functional, I am facing an issue where setting margins does not work as expected. Here is a snippet of code from one of my pages: return ( < ...

javascripthtmlcssangularjsbootstrap-4