Letters and numbers different heights in html5 text
Any ideas as to why the numbers and letters render at different heights? Im using 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;
}
See screenshot here
http://imageshack.com/a/img911/1327/yTsaIZ.png
html5 css3 twitter-bootstrap-3
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
add a comment |
Any ideas as to why the numbers and letters render at different heights? Im using 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;
}
See screenshot here
http://imageshack.com/a/img911/1327/yTsaIZ.png
html5 css3 twitter-bootstrap-3
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18
add a comment |
Any ideas as to why the numbers and letters render at different heights? Im using 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;
}
See screenshot here
http://imageshack.com/a/img911/1327/yTsaIZ.png
html5 css3 twitter-bootstrap-3
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
Any ideas as to why the numbers and letters render at different heights? Im using 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;
}
See screenshot here
http://imageshack.com/a/img911/1327/yTsaIZ.png
html5 css3 twitter-bootstrap-3
html5 css3 twitter-bootstrap-3
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
asked Oct 22 '15 at 19:45
MoxDevMoxDev
268
268
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18
add a comment |
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18
add a comment |
2 Answers
2
active
oldest
votes
Since there is no markup or css changing this, it must be the actual font that is doing this. There are several ways to approach this.
1) Change the font altogether.
2) Create a font for numbers only and have this other font as the second one in the declaration:
font-family: numberFont, regularFont
3) Have a font specify the numbers you want:
@font-face {
font-family: numberFont
/*finish rest of font details here*/
unicode-range: U+30-39
}
4) Add markup around each number:
Number <span class="number">123</span>
and add CSS to adjust accordingly:
.number {
font-family: Arial; /* Change Font */
position: relative;
top: -1em; /* Adjust positioning */
}
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
add a comment |
Was using the font 'Raleway' changing the font fixed the issue.
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33289422%2fletters-and-numbers-different-heights-in-html5-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since there is no markup or css changing this, it must be the actual font that is doing this. There are several ways to approach this.
1) Change the font altogether.
2) Create a font for numbers only and have this other font as the second one in the declaration:
font-family: numberFont, regularFont
3) Have a font specify the numbers you want:
@font-face {
font-family: numberFont
/*finish rest of font details here*/
unicode-range: U+30-39
}
4) Add markup around each number:
Number <span class="number">123</span>
and add CSS to adjust accordingly:
.number {
font-family: Arial; /* Change Font */
position: relative;
top: -1em; /* Adjust positioning */
}
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
add a comment |
Since there is no markup or css changing this, it must be the actual font that is doing this. There are several ways to approach this.
1) Change the font altogether.
2) Create a font for numbers only and have this other font as the second one in the declaration:
font-family: numberFont, regularFont
3) Have a font specify the numbers you want:
@font-face {
font-family: numberFont
/*finish rest of font details here*/
unicode-range: U+30-39
}
4) Add markup around each number:
Number <span class="number">123</span>
and add CSS to adjust accordingly:
.number {
font-family: Arial; /* Change Font */
position: relative;
top: -1em; /* Adjust positioning */
}
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
add a comment |
Since there is no markup or css changing this, it must be the actual font that is doing this. There are several ways to approach this.
1) Change the font altogether.
2) Create a font for numbers only and have this other font as the second one in the declaration:
font-family: numberFont, regularFont
3) Have a font specify the numbers you want:
@font-face {
font-family: numberFont
/*finish rest of font details here*/
unicode-range: U+30-39
}
4) Add markup around each number:
Number <span class="number">123</span>
and add CSS to adjust accordingly:
.number {
font-family: Arial; /* Change Font */
position: relative;
top: -1em; /* Adjust positioning */
}
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
Since there is no markup or css changing this, it must be the actual font that is doing this. There are several ways to approach this.
1) Change the font altogether.
2) Create a font for numbers only and have this other font as the second one in the declaration:
font-family: numberFont, regularFont
3) Have a font specify the numbers you want:
@font-face {
font-family: numberFont
/*finish rest of font details here*/
unicode-range: U+30-39
}
4) Add markup around each number:
Number <span class="number">123</span>
and add CSS to adjust accordingly:
.number {
font-family: Arial; /* Change Font */
position: relative;
top: -1em; /* Adjust positioning */
}
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
edited Jan 22 at 18:36
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
answered Oct 22 '15 at 21:22
fanfavoritefanfavorite
4,22312353
4,22312353
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
add a comment |
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
so how to fix ? give css?
– robspin
Jan 20 at 10:02
so how to fix ? give css?
– robspin
Jan 20 at 10:02
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
Added some notes on fixes.
– fanfavorite
Jan 20 at 15:06
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
shoose one from four method or all four steps? I try step 4 using class="number" is fail. Can any fiddle example? thanks!
– robspin
Jan 20 at 16:41
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
You have to create CSS with .number to adjust accordingly. Either positioning, changing the font family, etc.
– fanfavorite
Jan 21 at 3:24
add a comment |
Was using the font 'Raleway' changing the font fixed the issue.
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
add a comment |
Was using the font 'Raleway' changing the font fixed the issue.
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
add a comment |
Was using the font 'Raleway' changing the font fixed the issue.
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
Was using the font 'Raleway' changing the font fixed the issue.
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
answered Oct 22 '15 at 21:22
MoxDevMoxDev
268
268
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33289422%2fletters-and-numbers-different-heights-in-html5-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
My guess would be the font you are using. Which one is it?
– fanfavorite
Oct 22 '15 at 19:49
That was it I was using 'Raleway' and fixed the issue when I changed it thanks!
– MoxDev
Oct 22 '15 at 21:18