If I use Titillium web font family I can scroll on <span> and <input> with line-height value not normal and <1.6. But not when I use San-serif. I expect when I use line-height:1.4 there is no scroll.
I don't know, is it because of inline-block behavior?
.box {
padding: 0;
margin: 0;
background-color: white;
}
input {
display: inline-block;
line-height: 1.4;
font-size: 16px;
font-family: Titillium web;
padding: 0;
}
input.test {
line-height: 1.2;
}
input.test-2 {
line-height: normal;
}
span {
display: inline-block;
line-height: 1.4;
font-size: 16px;
font-family: Titillium web;
overflow: auto;
padding: 0;
background-color: aqua;
}
p {
font-size: 16px;
font-family: Titillium web;
line-height: 1;
padding: 0;
margin: 0;
}
<div class="box">
<span>####</span><input type="text" value='####' /><input class="test" type="text" value='####' /><input class="test-2" type="text" value='####' />
</div>
<p>#############</p>
Here are my question:
Is each font family have different optimal line-height?
If so, when I should use line-height: normal? Because many articles suggest using specific line-height
Try to use the same value in line-height and font-size. Instead of 1.4 put 16px in line-height also.
Related
I need to position the number "01 / 04" like this image
So far I got this
Code structure is like this in vue js, so far:
<img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
<div class="product-images-popup-number">
<span class="product-images-popup-child_num">0{{current+1}}</span>
<span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
</div>
<div class="product-images-popup-pagination">pagination</div>
</div>
css so far:
.product-images-popup-bar {
position: absolute;
left: 5vw;
}
.product-images-popup-number {
display: flex;
align-items: flex-start;
}
.product-images-popup-child_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 7vw;
}
.product-images-popup-parent_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 15px;
font-size: 4vw;
padding: 1px 0 0 4px;
}
.product-images-popup-parent_num:before {
content: '/';
padding-right: 5px;
}
.product-images-popup-pagination {
}
The goal is moving the numbers + pagination up a bit in different device size.
I am thinking to get "product-images-popup-bar" coordinate, then subtract some values, then position it. Not sure how to get the coordinate though.
Just give the elements you want moved up slightly a position of relative and then top minus the amount you want
for example
.product-images-popup-number {
display: flex;
align-items: flex-start;
position: relative;
top: -5px;
}
and then obviously use media queries to adjust it as you please
I need all of my elements inside my flexbox container to be close to each other. Unfortunately, since they have different font sizes, this is proving hard to accomplish. I could fix it using margins, but it seems like a hacky way to do it.
#price {
font-weight: bold;
border: none;
font-size: 1.5em;
}
#currency {
color: #000000;
font-size: 1.5em;
font-weight: bold;
}
#price:focus {
outline: none;
}
#price-info {
display: flex;
align-items: flex-start;
}
<div id="price-info">
<p id="currency">U$S</p><input id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p>$/m2{sizePrice}</p>
</div>
Updated problem, still spacing problems
#price{
font-weight: bold;
border:none;
font-size: 1.5em;
}
#currency{
color:#000000;
font-size: 1.5em;
font-weight: bold;
}
#price:focus {
outline:none;
}
#price-info{
display: flex;
justify-content: center;
align-items: baseline
}
<div id="price-info">
<p id="currency">U$S</p><input id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p>$/m2{sizePrice}</p>
</div>
Here is a possible solution you are looking for.
You can play around with justify-content to place your elements horizontally.
I believe what you wanted can be done by align-items property.
Try this. but is not much easy you have to set margins manually
#price {
font-weight: bold;
border: none;
font-size: 1.5em;
}
#currency {
color: #000000;
font-size: 1.5em;
font-weight: bold;
margin-right: .3rem;
}
#price:focus {
outline: none;
}
#price-info {
display: flex;
align-items: center;
}
#size-price{
margin-left: -5rem;
}
.itens{
display: inline-block;
width: fit-content;
}
<div id="price-info">
<p class="itens" id="currency">U$S</p>
<input class="itens" id="price" type="text" value={this.state.price} onChange={this.handleChange} />
<p class="itens" id="size-price">$/m2{sizePrice}</p>
</div>
I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
I'm building a single page of text that's a tight fit onto a sheet of paper. For some unknown reason, Edge renders everything larger.
I'm using border-box, null margins and padding. I've tried CSS reset but the result is the same.
In the attached example, the H1 element is 57.03x25px in Chrome, 64.7x25.35px in Edge. H2 is 57.031x16px in Chrome, 64.7x16.09px in Edge.
I assume Chrome is right since I've specifically set a font size of 25px and 16px respectively.
All these small sub-pixel errors creep up until I get quite a significant difference after a page of text. Width increase does not bother me so much, but I assume it to be related.
I can't find any other option or margin to reset, so I assume that Edge/IE somehow adds undocumented white space.
Edit: Firefox also renders larger, 27px text height for a font of 25px.
https://jsfiddle.net/m74b0s09/
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
/*font: 12pt "Tahoma";*/
font: 10.66px "Tahoma"; /* IE/Edge does not render as Chrome with pt units, seems to ignore sub-pixel sizes */
z-index: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.section {
margin-top: 0;
z-index: 0;
}
.section h1 {
border-bottom: 1px solid;
margin-top: 8px;
margin-bottom: 3px;
}
h1 {
margin: 0;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: 10pt;
}
h3 {
margin: 0;
font-size: 9pt;
}
body {
font: 10.66px "Tahoma";
background-color: #fff;
}
a {
text-decoration: none;
}
.header {
margin-top: 0;
}
.header h1 {
border: none;
text-transform: none;
font-variant: small-caps;
font-size: 21px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.header .name {
display: inline-block;
}
.header .contact {
float: right;
text-align: right;
display: inline-block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-variant: small-caps;
}
</style>
<body>
<div class="section header">
<div class="name">
<h1>Lorem</h1>
<h2>Ipsum</h2>
</div>
<div class="contact">
<h3>
H3 text
</h3>
<h3>more H3</h3>
<h3>even more H3</h3>
</div>
</div>
</body>
Try using CSS Normalize which is a pack of CSS rules to make the main browsers render all elements more consistently and in line with modern standards.
I have a HTML like this:
<div id="footer">
<p> Copyright 2013 </p>
</div>
And a CSS like this:
#footer {
clear: both;
position: relative;
width: 980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
I want my text in <p> to have Arial font but I would not like to add the font in the #footer but to make Arial font generic to all texts in the site (which do not have a specific font assigned).
How could I achieve that? I tried adding a * { font-family:arial; } but it did not help...
----------------- UPDATE
Here is what I have:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
#footer {
clear: both;
position: relative;
width:980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
But the footer still comes out without inheriting the body's styles... :(
Apply that rule to the body
body {
font-family: arial;
}
Then any other element can override that:
.someClass {
font-family: verdana;
}
you have a style tag in your css which is invalid.
Removing it resolves the font issue, among others.
jsfiddle
You can declare the font on the body, with something like that.
body {
font: 16px/18px Arial, sans-serif;
}
You will set up, the size, line-height, and font for all font of the site.