Italicizing text may not display effectively across various devices

Does the bold text formatting differ based on the type of screen?

This is JSX code in react:

function App() {
  return (
    // Problem Here
    <b className="info-text">Info:{" "}</b>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
.info-text {
  font-size: 14px;
  font-weight: bolder;
  line-height: 24px;
  color: #15366D;
}
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>

<div id="root"></div>
cssreactjs

Answer №1

Extracted information from mdn docs: "Interpretation of relative weights"

Note that when utilizing relative weights, only four font variations are recognized — thin (100), normal (400), bold (700), and heavy (900). In the event that a font family offers more variations, they are disregarded for the purpose of determining relative weight.

In simpler terms:
if your main text was assigned with font-weight: 400, an element with font-weight:lighter would display the weight as 100 – instead of possibly anticipated 300.

This principle also extends to fonts supporting a broad range of weights (e.g variable fonts)

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{
  font-family:'Noto Serif';
  font-weight:400
}


.lighter{
  font-weight:lighter
}

.light{
  font-weight:light
}

.bolder{
 font-weight:bolder
}

.bold{
 font-weight:bold
}

.info-text {
  font-size: 32px;
  line-height: 24px;
  color: #15366D;
}
<h3>Implicit/relative weights</h3>
<p class="info-text lighter">p-lighter </p>
<b class="info-text bolder">b-bolder</b>

<h3>Explicit weights</h3>
<p class="info-text light">p-light </p>
<b class="info-text bold">b-bold</b>

If you desire consistent rendering across different browsers:

  • load webfonts - avoid depending on default system fonts like serif or sans-serif
  • utilize explicit font weights (bold/700 etc)

Answer №2

I recommend utilizing the <span> element over the <b> tag.

Take a look at this illustration:

.info-text {
  font-size: 14px;
  font-weight: bolder;
  line-height: 24px;
  color: #f00;
}
<span className="info-text">
  Info
</span>

Important: Transform this content into JSX format and utilize className instead of class.

Answer №3

To emphasize text, consider using numerical values for font-weight such as 600 for semi-bold or 700 for bold.

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

Alignment of inner div within the footer

I'm struggling to align my footer navigation inline with my footer title. Check out this code snippet to see what I've tried so far: https://jsfiddle.net/nkzsufov/ I experimented with using absolute and relative positioning: .footerNav { margi ...

htmlcssresponsive-design

What is the process for removing filtering options in material-ui Autocomplete?

Currently, I am utilizing the Autocomplete feature from material-ui for my project. The Autocomplete component fetches suggestions from a backend asynchronously as the user changes input values. Here is a snippet of the code in question: const [options, s ...

reactjsautocompletematerial-uireact-hooks

Utilize CSS for Sticky Headers to Create Full Page Scrollbars for Table Control

Here is a code sandbox showcasing the use of Material UI's Table within a Paper component with a sticky header: https://codesandbox.io/s/2n40y I am looking to have the scrollbars appear at the edges of the browser page, bottom and right, while still ...

csshtml-tablematerial-uisticky

In Reactjs, it is important that each child in a list is assigned a distinct "key" prop

I am currently working on fetching data in Nextjs/Reactjs after clicking a button, but I am encountering the following error in my console: Each child in a list should have a unique "key" prop Below is my current code where data is displayed wit ...

javascriptreactjsnext.js

Using React's useState hook with an array of objects

When I have 3 different inputs, my goal is to capture their states while updating the onChange input attribute. The desired state format should be structured as follows: [{lang: (inputName), text: (inputValue)}, ..]. This is what I attempted: function onC ...

javascriptarraysreactjsstate

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

javascriptreactjstypescripttypesdiscriminated-union

What is the best way to incorporate styled components and interpolations using emotion theming?

I've been building a React web application with a dynamic theme feature using the emotion-theming library. This allows users to switch between different environments, each with its own unique theme. To achieve this, I created my own CustomThemeProvide ...

cssreactjstypescriptemotion

What is the best way to integrate Bootstrap CSS and JS into a ReactJS application?

Just starting out with ReactJS and looking to integrate bootstrap into my React app. Successfully installed bootstrap using npm install bootstrap --save Now, figuring out the steps to load bootstrap CSS and JS in my React app while using webpack. webpac ...

twitter-bootstrapreactjswebpack

Layering elements using the z-index property in Internet Explorer 7,

Issue with text placement in a dialog div only occurring in IE 7. To see the problem, visit this page and click on any of the text boxes on the left side. Attempts to fix by adjusting z-index in the skin.css file for div.dialogFromAndTo did not resolve ...

cssinternet-explorer-7

What is the best redux middleware for my needs?

As I followed the guide, I discovered a variety of middlewares available for Redux applications. Redux Thunk, Redux Promise, Redux Promise Middleware, Redux Observable, Redux Saga, Redux Pack Selecting a middleware is based on personal preference. Howeve ...

javascriptreactjsreduxreact-redux

(Material UI version 5) Custom global style enhancements

One of the examples in MUI is the Global style overrides: const theme = createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { // Name of the slot root: { // Some CSS fontSize ...

cssreactjsmaterial-ui

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

pythoncssweb-scrapingscrapycss-selectors

What is the best way to modify a current state object without causing an endless loop of redirects?

const useCase = (argument) => { const [value, setValue] React.useState(argument) React.useEffect(() => setValue({...value ...argument), [argument, value, setValue]) } The above code is currently causing an infinite loop due to setting the stat ...

javascriptreactjsreact-hooks

Incorporating click functionality in React for a to-do list feature

I've recently developed a task management application using React. However, I've encountered a couple of issues with the functionality. I am unable to mark tasks as completed by simply clicking on them, and the option to clear completed tasks by ...

javascriptarraysreactjsonclick

When flex items refuse to shrink despite using flex-shrink

I'm struggling to shrink the flex items in my layout despite using the flex-shrink property. I've experimented with adjusting the vh and vw values of the .row (flex parent), playing around with margins and padding, but still, the items won't ...

cssflexbox

Challenges with splitting asynchronous code in NPM modules

Earlier, I posted a query on Stack Overflow I have recently established a local package within the main app's package.json: "contact-page": "file:local_modules/contact-page" The package.jsonmain and scripts sections for the contact module are confi ...

javascriptreactjswebpackbabeljs

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

htmlcsssass

Utilizing JavaScript to implement an interactive :hover pseudo-class dynamic effect

After reviewing a question on adding a hover class to an element, I am now curious about how to do the opposite. I already have a main class for a button I am planning to create, where I will customize the background for each button using myButton.style.b ...

javascripthtmlcsspseudo-class

ReactJS encountered an error: _this3.onDismissID is not defined as a function

My goal is to retrieve the latest news related to a specific search term from a website, showcase them, and provide a dismiss button next to each news item for users to easily remove them if desired. Here's a snippet of the code I'm using: import ...

javascriptreactjsfunctionthis

How can I resolve the vertical adjustment issue of Bootstrap 5 input group on mobile devices?

My current issue involves using Bootstrap 5.2.3 to create an input group that displays a set of spans with the ".input-group-text" class alongside inputs with the ".form-control" class. While this setup works well on a computer screen, it does not adjust c ...

javascriptjquerycssbootstrap-5